Mensen,

ik ben op zoek naar een simpel rollover script/code voor mijn menu die in een div staat. Het is "afbeelding1.gif" die bij mouseover vervangen wordt door "afbeelding2.gif" meer is het niet..

Iemand die me kan helpen?

Code:

<div id="menu">
     <a href="index.html"><img src="afbeeldingen/home.gif" class="menu" alt="home" border="0" /></a><br/>
        <a href="about_me.html"><img src="afbeeldingen/about_me.gif" class="menu" alt="about me" border="0" /></a><br/>
        <a href="gallery.html"><img src="afbeeldingen/gallery.gif" class="menu" alt="gallery" border="0" /></a><br/>
        <a href="contact.html"><img src="afbeeldingen/contact.gif" class="menu" alt="contact" border="0" /></a><br/>    
    </div>

Even gegoogled;)

Code:

<A HREF="somewhere.html"
onmouseover="document.sub_but.src='movedown.gif'"
onmouseout="document.sub_but.src='moveup.gif'">

<IMG SRC="moveup.gif" WIDTH="143" HEIGHT="39" BORDER="0" 
ALT="Move your mouse over me" NAME="sub_but">

</A>

kun je i.v.m de div. 1 voorbeeld maken met de code zoals hierboven? en waar moet ik hem precies plaatsen?

de eerste lukt echter, maar als ik meerdere op deze manier doe geeft hij geen een meer weer..

Code:

<A HREF="somewhere.html"
onmouseover="document.sub_but.src='movedown.gif'"
onmouseout="document.sub_but.src='moveup.gif'">

<IMG SRC="moveup.gif" WIDTH="143" HEIGHT="39" BORDER="0" 
ALT="Move your mouse over me" NAME="sub_but">

De sub_but tags moet je vervangen. Je moet ze allemaal (zie dik gedrukt) een andere naam geven. Doe bijvoorbeeld de eerste knop_home, de tweede knop_about, etc.

</A>

ah ok.. zal eens proberen

heerlijk.. hij werkt!

Dit is wel niet echt netjes.. probeer eens:

a {
display: block;
width: xpx;
height: 20px;
background: image.gif 0px 0px;
}
a:hover {
background-position:0px -20px;
}

het plaatje bevat dus allebei de states. De hover zit er gewoon onder, dus hoef je maar 1x te laden, en zonder JS!

Heerlijk old school inderdaad.
CSS zijn inderdaad betere oplossingen.

bedankt beide.. hij is iig werkend nu :D

Origineel gepost door Emile Nijssen

Dit is wel niet echt netjes.. probeer eens:

a {
display: block;
width: xpx;
height: 20px;
background: image.gif 0px 0px;
}
a:hover {
background-position:0px -20px;
}

het plaatje bevat dus allebei de states. De hover zit er gewoon onder, dus hoef je maar 1x te laden, en zonder JS!

Dan zou hij in zijn geval elke button een class moeten geven.

illusiv.nl

Maar zo is het wel w3c Valid ;)

Origineel gepost door Illusiv

Dan zou hij in zijn geval elke button een class moeten geven.

illusiv.nl

Waarom? Uitgaand dat de knop in een menu staat, kun je gewoon #menu a {} gebruiken.

heb de rollovers inderdaad in css gezet..