What am I doing wrong?

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!

all I see is images of animals and their name next to them and up the top is a “Next” button

It’s not clear to me what is supposed to happen and when :confused2:

Can you clarify please?

This :slight_smile:

ok I have an idea but what does masses mean?

Oh sorry, should be “passes” lol!

are you sure the coords in your image map are correct?

They should cover only the portion of the image you want the onmouseover to affect.

Atm

 
<area shape="rect" coords="0,0,669,2448" onmouseover="x=1;" />

appears to cover the whole image.

Yes, I want it to cover the entire image.

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.

I would do something like this without an image map.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
var urlsA = ['http://www.url1.com',
             'http://www.url2.com'];
 
var urlIndex = 0;
 
function go2url() {
    window.location.href = urlsA[urlIndex];
}
 
</script>
</head>
<body>
 
<div>
        <input type="button" value="Next" onclick="go2url();" />
</div>
 
<div>
       <img src="pic1.jpg" alt="" onmouseover="urlIndex=1;" />
</div>
 
</body>
</html>

  1. You are a genius! It worked! I don’t understand any of that which you did, but it works! lol

  2. 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

  1. I put the 2 urls in an array - which you can edit to suit if the urls ever change in the future.

  2. I created a global variable urlIndex storing an integer which represents the indexes in the array in 1)

  3. added an onmouseover to the <img> which sets urlIndex to 1 when the mouse passes over the image.

  4. when the “Next” button is clicked it fires the go2url() function

  5. 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.

Thanks!

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?