Need Help With MouseOver

[Mc-Mowgli]

Hey Folks!

First timer, and in need of some help

I need a javascript that change an image when your mouse is over it
Here is the image:



The picture is divided into four parts, and my idea was that when you was to hover your mouse over one of the parts, all the boxes would change to another picture. So if you were to hover over the first "box" all the "boxes" would change to a different picture and so on.

If you got a clue what to do here, it would be much appreciated!

Regards Rasmus

[Mc-Mowgli]

[sunfighter]

It is obvious that this is a single image with white bars over it. You want four hot spots that will replace the image with four other images onhover.
This calls for image map or just plain map. Here http://www.w3schools.com/tags/tag_map.asp or give this a go: http://www.image-maps.com/

[Mc-Mowgli]

Thx man! I'm really new to javascript, so how do I make the hover effect exactly? I know that you can use onmouseover, but don't know how to use it in this context. I can cut the picture up in four pieces and then make them clickable, but how do I make all the four pictures change to four other pictures?

Regards Rasmus

[Old Pedant]

I really shouldn't do this, but...

http://www.artsofsnohomish.org/nov12/hoverdemo.html

Most of those images aren't really square; I forced them to be square for purposes of this demo.

But is this what you are after?

If so, just right click the bottom of the page and do VIEW==>>SOURCE (or PAGE SOURCE) and there's the code.

[Mc-Mowgli]

I would give you a hug if I could!
Thanks a 100 times!

Just don't know how to take in my own pictures, and put them in? I really am totally new to javascript.

var hovers = [
["nov5.jpg","nov9.jpg","nov13.jpg","nov17.jpg"],
["nov18.jpg","nov14.jpg","nov10.jpg","nov6.jpg"],
["nov11.jpg","nov19.jpg","nov7.jpg","nov15.jpg"],
["nov8.jpg","nov16.jpg","nov20.jpg","nov12.jpg"]
];
// first, preload the images...just replace the hovers array elements

So I have to replace these nov.jpg with my own pictures, and how do I do that?

Don't really get where all those pictures come from, i can only see that there should be 4:

<img src="http://www.artsofsnohomish.org/nov12/nov18.jpg" alt="0" title="nov1"/>ev
<img src="http://www.artsofsnohomish.org/nov12/nov14.jpg" alt="1" title="nov2"/>ev
<img src="http://www.artsofsnohomish.org/nov12/nov10.jpg" alt="2" title="nov3"/>ev
<img src="http://www.artsofsnohomish.org/nov12/nov6.jpg" alt="3" title="nov4"/>ev

Thank you again!

[Old Pedant]

The four images in the actual <img> tags are your original 4 images.

In the hovers array, there are 4 sub-arrays.

Each sub-array corresponds to the 4 images that you want to use as replacements when one of the original images is hovered over.

So, for example, when the user hovers over "nov1.jpg" (the first actual <img> tag), the replacements for *ALL FOUR* of them images come out of the FIRST sub-array:

    ["nov5.jpg","nov9.jpg","nov13.jpg","nov17.jpg"],

When the user hovers over "nov4.jpg" (the 4th actual <img>) the replacement come out of the 4th sub-array:

    ["nov8.jpg","nov16.jpg","nov20.jpg","nov12.jpg"]

So, in total, you should have 20 images. IT DOES NOT MATTER where the images come from.

It would be perfectly okay to have, for example

    <img src="http://www.picasa.com/77181bb181.jpg" alt="0" title="http://www.picasa.com/77181bb181" />

and yet have the sub-array images coming from a completely different site (or even sites):

    ["http://www.mysite.com/image/x.jpg", "y.jpg", "z.jpg", "http://www.codingforums.com/pictures/337.jpg" ],

Note only that if the image comes from the SAME SITE as the web page then you do NOT have to specify the full URL to the image (though it is perfectly okay to do so).

That's it.

If you don't have 20 images--if some of them are repeated for various reasons--that's fine. But you still need the 20 images "slots" as shown in the code.

p.s.: As you noticed that, indeed, my sub arrays just used

["nov18.jpg","nov14.jpg","nov10.jpg","nov6.jpg"],

The *BROWSER* automatically interprets those as the URLs

<img src="http://www.artsofsnohomish.org/nov12/nov18.jpg" .../>

simply because the page you are looking at has a base URL of

     http://www.artsofsnohomish.org/nov12/

so the images are *relative* to that base URL.

[Mc-Mowgli]

You are really a nice guy, taking your time to explain this to me! Seems like this is a great community, and everybody is helping were they can. Keep up the awesome job of providing coding solutions to people that needs guidance in that field!

Thanks again for your help!

Regards Rasmus

[AndrewGSW]

Regards Rasmus

..is that THE Rasmus?

[Mc-Mowgli]

I need one last tweak, which is on mouse out, the start picture will reappear. Right now with the javascript I was handed with (thanks to Old Pedant ), the picture you are hovering over is the one you will see when you move your mouse away.

Can somebody help with that?

Regards Rasmus

PS. I don't think i'm THE Rasmus, at least not yet

[Mc-Mowgli]

Bump it

[Old Pedant]

Originally Posted by Mc-Mowgli

I need one last tweak, which is on mouse out, the start picture will reappear. Right now with the javascript I was handed with (thanks to Old Pedant ), the picture you are hovering over is the one you will see when you move your mouse away.

Huh?


Not on that demo page I gave you:
http://www.artsofsnohomish.org/nov12/hoverdemo.html

Hover over image1 and the new set of images appears.
Move your mouse off of image1 (and *NOT* onto any other image) and the original 4 images appear.

Hover over image1 and a new set of images appear; hover over image2 and a different set appear; go back to image 1, and the first new set reappears. Move off of both image1 and image2 at any time and the original 4 images appear.

Maybe you need to describe *exactly* what action you are expecting that is different than that?

[Mc-Mowgli]

Okay, I actually found out what the problem was. I can see that your code included all the things I needed I changed in a number that was 0 to 4, else it would not work for me, but then it was changed on another computer and worked, really strange.. But thanks