[Javascript] Mouseover menu

[Verwijderd]

Ik heb getracht in Javascript een mouseover menu te maken waarbij een textlink wordt vervangen door een plaatjes bij een mouseover. Ik ben tot het volgende gekomen (en zo werkt het ook zoals ik wil in Firefox).

code:

<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
 img_on =new Image();  img_on.src ="images/background/menu-zitzak.gif"; 
 img_off=document.write=('Zitzakken');  
}
function handleOver() { 
 if (document.images) document.imgName.src=img_on.src;
}
function handleOut() {
 if (document.images) document.imgName.src=img_off.src;document.write('Zitzakken'); 
}
//-->
</script>
<a onmouseout="handleOut();return true;" onmouseover="handleOver();return true;" href="index.php?_a=viewCat&amp;catId=4">
<img height="50" border="0" width="71" src="" alt="Zitzakken" name="imgName"/>
</a>

Elke andere browser snapt echter niet helemaal wat de bedoeling is. In plaats van te beginnen met een textlink krijg ik meteen een kan-het-plaatje-niet-vinden-kruisje, bij mouseover krijg ik wel mijn plaatje te zien, bij mouseout krijg ik weer het kruisje in beeld.

Ik snap dat dit komt doordat ik tussen de <a> tags...

code:

<img height="50" border="0" width="71" src="" alt="Zitzakken" name="imgName"/>

... heb staan. Ik krijg het echter niet voor elkaar om met bijvoorbeeld document.write in het begin al de text te laten zien ipv een plaatje zonder source.

Ik hoop dat iemand mij kan helpen of een tip kan geven om dit werkend te krijgen in elke browser.

[Noork]

Kun je niet gewoon de visibility aan en uit zetten?

[TeeDee]

JavaScript:

img_off=document.write=('Zitzakken'); 

Zal niet echt lekker werken. Wat had je daar verwacht te doen of te laten zien? Als ik het verhaal (zonder een online testcase werken is lastig!) begrijp wil je de tekst zitzakken vervangen met een plaatje van een zitzak tijdens de mouseover? Dat Firefox het wel 'goed' doet komt door het feit dat Fx geen 'kan-het-plaatje-niet-vinden-kruisje' heeft. Tevens wil je dus de tekst (zitzak) in een <img /> laten zien. Ook dat gaat niet werken.

Als aanvulling op Noork: maak 2 containers. 1 met tekst en 1 met het plaatje. Op basis van een hover het juiste element tonen met bijv. de visibility van het element. Je zal dan imo strontirritante verspringen krijgen, maar goed, ook zo zonder een fatsoenlijke online testcase wordt dat lastig in te schatten.

Edit @ hieronder: kan ook

[ Voor 49% gewijzigd door TeeDee op 25-08-2009 00:14 ]

[Noork]

Even q&d gedaan, zoiets:

HTML:

<a onmouseout="document.imgName.style.display='none';return true;" onmouseover="document.imgName.style.display='';return true;" href="testmenu1.php">
<span>Tekstlink</span>
<img src="button.png" alt="Zitzakken" id="imgName1" name="imgName" style="display:none;"/>
</a>

En dan een mooie functie ervan maken, en zorgen dat de tekstlink ook verdwijnt.

[Verwijderd]

Het verspringen is imo goed te controleren met css.

Ik ga iig even aan de slag nav de reply van Noork

[ Voor 68% gewijzigd door Verwijderd op 26-08-2009 18:04 ]

[mcDavid]

Noork schreef op dinsdag 25 augustus 2009 @ 00:14:
Even q&d gedaan, zoiets:

HTML:

<a onmouseout="document.imgName.style.display='none';return true;" onmouseover="document.imgName.style.display='';return true;" href="testmenu1.php">
<span>Tekstlink</span>
<img src="button.png" alt="Zitzakken" id="imgName1" name="imgName" style="display:none;"/>
</a>

En dan een mooie functie ervan maken, en zorgen dat de tekstlink ook verdwijnt.

heb je volgens mij nieteens JS voor nodig:

code:

a img {display: none;}
a:hover img {display: inline;}
a:hover span {display: none;}