View Full Version : Need Help With MouseOver
11-13-2012, 01:39 PM
First timer, and in need of some help :)
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! :)
11-13-2012, 01:53 PM
11-13-2012, 02:16 PM
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/
11-13-2012, 07:44 PM
11-14-2012, 01:58 AM
I really shouldn't do this, but...
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.
11-14-2012, 01:44 PM
I would give you a hug if I could!
Thanks a 100 times!
var hovers = [
// 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!
11-14-2012, 07:52 PM
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:
When the user hovers over "nov4.jpg" (the 4th actual <img>) the replacement come out of the 4th sub-array:
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).
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
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
so the images are *relative* to that base URL.
11-14-2012, 11:53 PM
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 :thumbsup:
11-15-2012, 12:29 AM
..is that THE Rasmus (http://en.wikipedia.org/wiki/Rasmus_Lerdorf)?
11-22-2012, 10:59 AM
Can somebody help with that?
PS. I don't think i'm THE Rasmus, at least not yet
11-25-2012, 03:14 PM
11-25-2012, 11:09 PM
Not on that demo page I gave you:
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?
11-26-2012, 11:58 AM
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 :)