Preserved Topic: rollover help (Page 1 of 1)

Hi, I'm new here. I am using Doc's javaScript code from his tutorial page on a site I am designing.. I got the script working on a page with the simple rollover effect.. The other pages I am working on require a multiple image rollover effect, but I can't figure out what I need to do to modify Doc's code to do this. I'd like to stick with his code as it is fast loading.. I looked through some of the posts in this category already and have not found something that will point me in the right direction.. Any ideas on how I will need to modify Doc's code to do what I'd like done?

Basically, I need two images to change when the mouse is moved over the 'button'.

Here is the URL for an image of how the page is laid out (no code, just a .gif): http://www.primenet.com/~ntyler/Review/testing3.html

The buttons on the bottom row are the problem here. Because of the way the top buttons are laid out, I had to slice the "arm" off of the bottom buttons to get the tables lined up (there are no tables in the example URL I provided). So now, I need to get the "arms" to change at the same time one of the bottom buttons is in the mouseover state. As you can probably see, these "arms" are also identical.. is there any chance I'd be able to use the same image multiple times to minimize the number of graphics used?

Thanks in advance for any assistance..
--niki

This is a relitively easy process.

As you have the code now you use a single swap(des,num); on the onMouseover command.

You will need to use multiple swap statements inside of the quotations in order to have multiple mouse over effects.

onMouseover="swap(0,1);swap(4,10);swap(5,7);swap(6,9)"

That is an example of multiple image swaps.

So just do the code as normally. Listing the images you want to swap, with the des and num, and it will work for you.

I will try that, thanks!

This is my Javascript of choice for rollovers:
<SCRIPT LANGUAGE="JavaScript">
function pic(img_name,img_src) {
document[img_name].src=img_src;
}
</SCRIPT>

in your document give the images a name in the <img> tag.
like <img name="about" src="about.gif">
and then have that in a link tag <a href=...>
and then use OnMouseOver to change the image like this OnMouseOver="pic('about','about2.gif')"
then have this in the same tag: OnMouseOut="pic('about','about.gif')"

I don't have anything against Doc's code, but I like this better seeing as I don't need to define all my rollovers inside the script, this is really easy, ready to rock right out of the box.