Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Need Help With MouseOver

    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
    Last edited by Mc-Mowgli; 11-13-2012 at 01:44 PM.

  • #2
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,211
    Thanks
    23
    Thanked 605 Times in 604 Posts
    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/

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mc-Mowgli (11-22-2012)

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    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:
    Code:
        ["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:
    Code:
        ["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
    Code:
        <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):
    Code:
        ["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
    Code:
    ["nov18.jpg","nov14.jpg","nov10.jpg","nov6.jpg"],
    The *BROWSER* automatically interprets those as the URLs
    Code:
    <img src="http://www.artsofsnohomish.org/nov12/nov18.jpg" .../>
    simply because the page you are looking at has a base URL of
    Code:
         http://www.artsofsnohomish.org/nov12/
    so the images are *relative* to that base URL.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mc-Mowgli (11-22-2012)

  • #8
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Regards Rasmus
    ..is that THE Rasmus?
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #11
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Bump it

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Quote Originally Posted by Mc-Mowgli View Post
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

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