Få opp text ved mouse hover et annet sted

Anterialis · 20. mai 2004

Jeg har menyknapper til venstre på siden. Disse har ingen form for merking på seg så man kan ikke se hvor man kommer ved å trykke på disse. Men jeg har laget et vindu på høyre side som jeg vil at teksten til den knappen man holder over kommer opp. Så det jeg egentlig vil er at det i dette vinduet skal komme opp feks "diverse" når man peker på knappen til "diverse" på venstre side.

Lar dette seg gjøre i css? evt. html eller php..

På forhånd takk

enden · 20. mai 2004

Har gitt deg svar på dette ved hjelp av bilder i den andre tråden din, men det kan gjøres med tekst også. Det er litt vanskeligere, så jeg anbefaler igrunn bilder.

Uansett er det en dårlig løsning å satse på "gjett hvem" løsningen på menyen. Det senker bruksgodheten betraktelig og er en veldig uproff løsning. Tenk på at folk som ikke kjenner siden din ut og inn skal kunne bruke den til noe fornuftig.

EZAccess · 20. mai 2004

Kanskje noe lignende dette?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
 <title>DHTML - onmouseover - onmouseout</title>
 <link rel = "stylesheet" type = "text/css" href = "../stylesheet.css">
</head>

<body>

 <!-- Her vises info -->
 <div id="info"><p>Her kommer info...</p></div>
 
 <p>
 	<a href="" onmouseover="document.getElementById('info').innerHTML='<p>Ingen info foreløpig</p>'" 
        onmouseout="document.getElementById('info').innerHTML='<p>Her kommer info...</p>'">Link 1</a>
 <br />
 	<a href="" onmouseover="document.getElementById('info').innerHTML='<p>Ingen info her heller...</p>'" 
        onmouseout="document.getElementById('info').innerHTML='<p>Her kommer info...</p>'">Link 2</a>
 </p>
 
 <p>Flere eksempler på DHTML her - <a href="http://www.w3schools.com/dhtml/dhtml_examples.asp">w3schools</a></p>
 
 <!-- Validering --> 
 <p>
     <a href="http://validator.w3.org/check/referer"><img border="0"
         src="http://www.w3.org/Icons/valid-html401"
         alt="Valid HTML 4.01!" height="31" width="88"></a>
   </p>
   
</body>
</html>

Arve Systad · 20. mai 2004

Gjør det med CSS!

http://www.meyerweb.com/eric/css/edge/popups/demo.html

Anterialis · 21. mai 2004

Det der var kjempe bra arve87! Men jeg skjønte ikke helt hva som var meningen der. Han hadde ingen class eller id på <span> taggen, men definerte han alle span tagger i link eller?

I mitt tilfelle så har jeg skrevet dette på linkene som ligger et bilde.

HTML

<a href="http://home.no.net/nanbjor2/hjemmeside/index.php" class="my_link"><span class="hide">Tilbake til hovedsiden</span></a>

<a href="http://home.no.net/nanbjor2/hjemmeside/stuff.php" class="my_link2"><span class="hide">wee</span></a>

<a href="http://home.no.net/nanbjor2/hjemmeside/index.php" class="my_link3"><span class="hide">wee</span></a>

<a href="http://home.no.net/nanbjor2/hjemmeside/credit.php" class="my_link4"><span class="hide">wee</span></a>

<a href="javascript:history.back()" class="my_link5"><span class="hide">wee</span></a>

CSS

.hide
{
display: none;
}

hide:hover
{
position: absolute;
width: 30px;
height: 30px;
z-index: 1;
top: 400px;
left: 750px;
}

Det blir sikkert ikke sånn her fordi jeg skjønte det ikke helt. Men hvordan blir det i mitt tilfelle?

Endret 21. mai 2004 av w3p

pgdx · 21. mai 2004

Det blir nok noe ala det, ja. Det er jo ikke akkurat noe hokus pokus med den siden, annet enn at det er display: none; eller noe på links, og på hover blir de vist et annet sted på siden...

Lokaltog · 21. mai 2004

Slik jeg forsto den tutorialen skulle du ha en forklaring i den <span>'en. Som det her:

<a href="http://home.no.net/nanbjor2/hjemmeside/index.php" class="my_link">Tilbake til hovedsiden<span class="hide">Forklaring til hovedsiden</span></a>

Og så plasserer du .hide der du vil ha forklaringen i dokumentet (position:absolute;)..

Anterialis · 21. mai 2004

Har jo forklaring? wee står det der samma hva det er på dette stadiet. Når jeg får det til å fungere kan jeg endre på det. Men ingen her som kan hjelpe meg da? Får det ikke til å fungere slik jeg har det nå:

HTML

<a href="http://home.no.net/nanbjor2/hjemmeside/index.php" class="my_link"><span class="hide">Tilbake til hovedsiden</span></a>
<a href="http://home.no.net/nanbjor2/hjemmeside/stuff.php" class="my_link2"><span class="hide">Forskjellig møkk</span></a>
<a href="http://home.no.net/nanbjor2/hjemmeside/index.php" class="my_link3"><span class="hide">Noe her</span></a>
<a href="http://home.no.net/nanbjor2/hjemmeside/credit.php" class="my_link4"><span class="hide">credit</span></a>
<a href="javascript:history.back()" class="my_link5"><span class="hide">Tilbake</span></a>

CSS

.hide
{
display: none;
position: absolute;
width: 30px;
height: 30px;
z-index: 1;
top: 400px;
left: 750px;
}

.hide:hover
{
position: absolute;
width: 30px;
height: 30px;
z-index: 1;
top: 400px;
left: 750px;
background-color: #6699CC;
color: #FFFFFF;
}

Endret 21. mai 2004 av w3p

Logg inn

Få opp text ved mouse hover et annet sted

Anbefalte innlegg

Anterialis

Lenke til kommentar

Videoannonse

enden

Lenke til kommentar

EZAccess

Lenke til kommentar

Arve Systad

Lenke til kommentar

Anterialis

Lenke til kommentar

pgdx

Lenke til kommentar

Lokaltog

Lenke til kommentar

Anterialis

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer