Hi All,

I am trying to put my first page together and I want to have a series of DIV to make a nav bar, ie home, info, contact.

I found this on a page

<div><a onmousedown="changeImages('b42_artists', '../../-WEB%20FILES/images/b42_artists-over.gif'); return true;" onmouseup="changeImages('b42_artists', 'images/b42_artists-over.gif'); return true;" onmouseover="changeImages('b42_artists', 'images/b42_artists-over.gif'); return true;" onmouseout="changeImages('b42_artists', 'images/b42_artists.gif'); return true;" href="artists.html"><img class="dsR79" src="b42_artists.gif" alt="" name="b42_artists" height="53" width="118" border="0" /></a></div>

But don't understand how to mod it to use my images??

Your help is much appreciated!!

Since this thread is about JavaScript, I've moved it to the appropriate forum.

The image paths are contained in the function call, e.g. "images/b42_artists-over.gif" so it seems you just have to change that. But the various mouse events call the function changeImages(), which is absent from your code example. You should also preload the mouseover images, to prevent delays while the images load.

Here's another way to make rollovers with CSS only: http://www.wellstyled.com/css-nopreload-rollovers.html

Def. recommend achieving this with css (in an external file, of course) marked up something like this (snippet from our site):

You effectively don't have to use a DIV for each link, that would created a tag soup of redundant DIV's. A list, as Website Design Perth indicated, is a good way to code it and then use CSS to swap the images. See Listamatic and the URL Christian pointed you to.