That's done in JavaScript, but you can do it easily with CSS.
Chief Snake wrote:
<style type="text/css">
a.rollover { /* Sets the <a> class, "rollover". To identify things by this class, use <a href="#" class="rollover">Link Text (which will not be visible)</a> */
background: #FFF url('images/normalimage.png') no-repeat center;
/* Where #FFF is the backup colour (in this case, white), for if the image link is broken. no-repeat makes the background not repeat itself (only displays once) and center is somewhat unnecessary but makes sure the background image is centred. This is a comment and does not make any difference to the rest of the code. */
text-indent: -2000px; /* Makes sure the text you put in the <a> tag is not visible. */
width: 100px; /* The width, in pixels, of the image you set in background. */
height: 100px; /* The height, in pixels, of the image you set in background. */
border: none; /* Not sure if this is necessary, but just in case... */
}
a.rollover:hover {
background: #999 url('images/hoverimage.png') no-repeat center; /* See comment above for info. */
border: none;
/* We don't have to repeat what has already been written in a.rollover except for background to change it to the rollover image and [i]border[i] due to the default border style. */
}
</style>
a.rollover { /* Sets the <a> class, "rollover". To identify things by this class, use <a href="#" class="rollover">Link Text (which will not be visible)</a> */
background: #FFF url('images/normalimage.png') no-repeat center;
/* Where #FFF is the backup colour (in this case, white), for if the image link is broken. no-repeat makes the background not repeat itself (only displays once) and center is somewhat unnecessary but makes sure the background image is centred. This is a comment and does not make any difference to the rest of the code. */
text-indent: -2000px; /* Makes sure the text you put in the <a> tag is not visible. */
width: 100px; /* The width, in pixels, of the image you set in background. */
height: 100px; /* The height, in pixels, of the image you set in background. */
border: none; /* Not sure if this is necessary, but just in case... */
}
a.rollover:hover {
background: #999 url('images/hoverimage.png') no-repeat center; /* See comment above for info. */
border: none;
/* We don't have to repeat what has already been written in a.rollover except for background to change it to the rollover image and [i]border[i] due to the default border style. */
}
</style>
Off hand, I think that's all you need to do, anyway. Took me ages to write with all those colours. ;D
Just make sure you make the links like:
<a href="http://somewhere.com/whatever.html" class="rollover">Some text here which will not be seen.</a>
Or were you talking about the JavaScript menus at the top of the page under the banner? If you were I can't really help you there, I'm not much of a JavaScript guru. I wouldn't imagine they'd be hard to find out about through Google though.
