---

Hej kodevenner

Jeg skal bruge en kode til en mouseovereffekt, som ikke forsvinder efter 10 sekunder. Lige nu har jeg følgende kode: <img src="question.gif" alt="Denne tekst kommer som gul firkant, når jeg holder musen over.">.

Jeg forestiller mig, at jeg i stedet skal have fat i en kode, der er noget i retning af
<img src="question.gif" onMouseover="alert(Denne tekst kommer som gul firkant, når jeg holder musen over.')">

Jeg er bare ikke interesseret i at koden kommer som eventen "alert", da det ikke skal poppe op i en boks. Det skal bare komme frem som tekst akkurat som Title="xxx" eller Alt="xxx", når jeg laver mouseover, og blive der i 20 sekunder, eller indtil brugeren flytter musen fra billedet. Jeg er ikke interesseret i et længere js script - Det skal kunne laves med en almindelig html-kode.

---

Det er ikke noget man sådan bare laver i ren HTML!

---

Jeg beder heller ikke om ren html - Jeg beder bare om, at det ikke bliver et langt js script. Jeg har en fil, der ikke må være ret meget tungere.

---

Du kan sagtens lave det i ren HTML med CSS ...uden brug af Javascript eller event handlere

Her i XHTML 1.1 og CSS:


Bemærk: Her benytter jeg et billede "DIT__BILLEDE.jpg" som er 163 pixel bredt og 241 pixels højt. Derfor skal værdien ligeledes i stylesheetet være:

.pop a {display:block;text-decoration:none;width:163px;}

..for at det ser "pænt" ud, men du kan jo eksperimentere med værdierne som du lyster. Du kan også vælge font type, font størrelse, farver, mv. præcis som du selv synes.

</MOLOKYLE>

---

Ps. At jeg har lavet en lidt 'bøvlet' konstruktion med et link der ikke peger nogen steder hen skyldes at pseudoklassen :hover KUN virker for anchor markøren <a> .. </a> i IE versioner lavere end 7.

Hvis Microsoft fra starten havde implementeret pseudo egenskaberne korrekt ville det kunne laves MEGET mere elegant. F.eks en simpel :hover på billed elementet <img.. /> i stedet.

</MOLOKYLE>

---

Molokyle ... Du er igen en stjerne, og det er næsten på plads, men ... Jeg skal have billedet til at sidde tæt op ad en rulleliste, men når jeg har en div-funktion, vil billedet hoppe ned på næste linje? Samtidig skubber mouseoverfeltet alle mine underliggende celler, fordi mouseoverteksten ikke bare kommer som en svævende tekst over felterne ligesom standard-title-funktionen. Giver det mening?

Du kan se min kode her:

<tr id="a4">
<td>Hvor skal annoncen indrykkes?</td>
<td id="indsenderSelect4"><select name="indrykkesi">
<option value="Ikke valgt" selected>V&aelig;lg...</option>
<option value="Dagblad/Ugeavis">Dagblad/Ugeavis</option>
<option value="Foreningsblad">Foreningsblad</option>
<option value="Magasin/Katalog">Magasin/Katalog</option>
<option value="Andet">Andet</option>
</select><div>
<span class="pop">
<a href="#" title=""><img src="/intranet/teamrooms/reklame_vaerkstedet.nsf/alt/46A9045D9EB56B8CC12572A7004CFDD9/$file/question.gif"><span>V&aelig;lg det medie, hvor annoncen skal indrykkes.</span></a>
</div>
<td id="indsenderSelect5">Antal farver p&aring; annoncen: </td>
<td id="indsenderSelect6"><select name="antalfarver">
<option value="Ikke valgt" selected>V&aelig;lg ...</option>
<option value="4 farver">4 farver</option>
<option value="Sort/bl&aring;/hvid">Sort/bl&aring;/hvid</option>
<option value="Sort/hvid">Sort/hvid</option>
<option value="Bl&aring;/hvid">Bl&aring;/hvid</option>
</select>

---

En dynamisk 'flytten' rundt på dit mouseover element kan IKKE lade sig gøre i CSS ...såvidt jeg er orienteret?

Måske du evt. kan lægge din 'gule infoblok' OVEN på?

Tjek Z-index parameteren: http://www.w3schools.com/css/pr_pos_z-index.asp

..evt. med en relativ positionering i stedet for den absolutte?

1.) http://www.w3schools.com/css/css_reference.asp#positioning
1.1) http://www.w3schools.com/css/pr_class_position.asp



Meld gerne tilbage ...eller læg en URL i stedet for kildekoden

</MOLOKYLE>

---

Dét jeg mener er:

Måske du kan lægge 'span' boxen 'ovenpå' dit billede via relativ positionering og z-index?

Således re-positionerer du dermed IKKE dine andre HTML DOM elementer på siden i forhold til 'show/hide' effekten.

Show/hide CSS egenskaberne er MÅSKE en helt anden CSS løsning på dit problem?

Her et eksempel på netop præcis det MODSATTE: En tekst med en mouseoverfunktion som viser et billede ved mouseover...

http://www.cssboxing.com/temp/textmouseover.html

Den MODSATTE effekt (=tekst ved mouseover på billede) kan naturligvis også la' sig gi' sig

..jeg 'gider' bare ikke lege nu ...jeg drikker øller

</MOLOKYLE>

---

Pps. :


En DIV (inddeling) = <div> .. </div> vil ALTID give et linjeskift ..uden blank linje, i modsætning til PARAGRAFFEN (afsnittet) = <p> .. </p> ..med en indsat blank/tom linje.

Det er jo begge blok markører!

Prøv i stedet in-line pendanten SPAN = <span> .. </span>

..så undgår du linjeskiftet

</MOLOKYLE>

---

In-pendanten? Skal den så sidde i stylesheetet eller nede omkring selve koden i body?

---

..i selve (X-)HTML koden

Stylesheet'et (CSS) for SPAN markøren kan du så angive i stylesheet'et (lokalt, externt ..eller @import)

...eller som 'in-line' : style="..." parameteren til aktuelle <span> ..</span>.

</MOLOKYLE>

---

Tak for svaret molokyle.

Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.