Please forgive me, I’m very ignorant of javascript and am trying to learn the basics online. This is my first attempt and it isn’t working. I’m not sure what I’m doing wrong.
The url of the site I’m working on (it’s a sample) is here
All I’m trying to do is make it so that the “next” button changes which url it links to depending on if at any time the mouse masses over any part of the second image (at the bottom). I thought I had it coded correctly based on what I read, but it isn’t working. Can anyone spot the problem? I’ve tried everything I know to do. :-/
Thanks so much, guys! You guys have been an amazing help to me in the past!
ok, then what you are doing doesn’t make sense to me.
If you want the onmouseover to affect the whole image then you don’t need an image map at all. Just add the onmouseover event handler to the <img> directly.
It’s also still not clear which url value you want attached to the button’s onclick before and after the mouse passes over the image.
You are a genius! It worked! I don’t understand any of that which you did, but it works! lol
Yes, the image map was dumb. I originally just put the onmouseover command in the image tag but someone from another site suggested I make it a full coverage image map to see if that would make it work. Obviously it didn’t!
What I did is similar in principle to what you did in your javascript
I put the 2 urls in an array - which you can edit to suit if the urls ever change in the future.
I created a global variable urlIndex storing an integer which represents the indexes in the array in 1)
added an onmouseover to the <img> which sets urlIndex to 1 when the mouse passes over the image.
when the “Next” button is clicked it fires the go2url() function
go2url() redirects the current page to the url in the array in 1) whose index is the current value of urlIndex
You could do it with an image map and it will work but since in your case the coords cover the whole image, the image map is totally redundant and does nothing but add extra code to your html. Normally you would not use an image map for what you are tring to do.
Well, the website seems to work for me perfectly, but some people are using the actual scroll at the right of the screen instead of the scroll button on their mouse so their mouse doesn’t actually pass over the second image.
Is there a way to trigger the “urlindex=1” when any part of the image comes visible onto the screen? So that whenever the screen is scrolled down to where the second image comes into view urlindex will be changed to the value 1?