SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :

    Can you clarify please?

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hoodleehoo View Post
    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).
    This

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok I have an idea but what does masses mean?

  5. #5
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh sorry, should be "passes" lol!

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
     
    <area shape="rect" coords="0,0,669,2448" onmouseover="x=1;" />
    appears to cover the whole image.

  7. #7
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I want it to cover the entire image.

  8. #8
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do something like this without an image map.

    Code:
     
    <!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>

  10. #10
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  11. #11
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hoodleehoo View Post
    1. It worked! I don't understand any of that which you did, but it works! lol
    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

    Quote Originally Posted by hoodleehoo View Post
    2. 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!
    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.

  12. #12
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

  13. #13
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •