Preserved Topic: basic mouseovers for a consol/interface (Page 1 of 1)

I have a consol with buttons and a screen...when you put the mouse over the buttons...i wanted the button to change color and the screen to change. However....I wanted the screen to be different depending on what button you put your mouse on. For example one button is contact and one is history. When you go over contact, the image that appears in the screen should be different than the one that appears when you go over history. Could someone please point me to a detailed tutorial or post an understandable script outline that would show me how to do this?

Hiya Lightning! Have you gotten the basci mouseover down yet, with just the button you mouseover changing? If you have, cool, if not, check out my hands-on tutorials, I have a good script there for you. Once you get one mouseover to work, doing the next is simple. You make a function just for changing the screen, and then you can put TWO function calls in your mouseover script, like...

<a href="foo.html" onMouseover="function1();function2()">

The first one would be for the button, the second for the screen! There are other ways to do this, but that's the simplest. Here's a real simple variation on that function, I created this page just to demonastrate what you're asking about. See http://www.ozones.com/interface.html - it does pretty much just what I explained above.

Your pal, -doc-<P>

I have the basics down and actually have the general code with functions. The only problem is that it's putting the image in 2 places now! For example the 'web' button loads in it's correct place, but when you run the mouse over it, an identical copy of 'web' shows up on another area of the consol and stays there. When you go over the original 'web' again, the other web changes to it's 'on' image and the screen image that is supposed to change appears above the copy of the 'web' image. Everything ended up in the wrong place! I'm wondering if the name of the image has anything to do with this? A lot of my images in the consol start with numbers like 16_web.jpg. However, I renamed it and that didn't seem to help. Any ideas?

I think I have it, I decided to make life easier and borrow your code(thanks!). Needless to say I'm confusing myself with all the different images. Could you explain what needs to go in
names2 = new Array(
);
}

and in the href what numbers are what in the swap function?

Lightning,

Do you have a URL where what you are trying can be seen?


Walking the Earth like Kane

Not sure which array is which, but the first one in Doc's contains the names which the actual IMG tags contain (each image that will be changed must have the name tag in it so the script knows which image to switch the SRC of).

The 2nd array contains the URLs for all the images that will change.

In the swap function, the first # refers to which image you will be changing by means of the first array. The 2nd number refers to which IMG SRC you are replacing it with from the second array.

It takes a minute to understand how this works, but it is so much better than the crappy rollovers Dreamweaver and FP put in your code because you can easily modify it to swap any images from anywhere anytime.