www.webdeveloper.com
Results 1 to 5 of 5

Thread: help with onmouseover javascript

  1. #1
    Join Date
    Jan 2008
    Posts
    42

    help with onmouseover javascript

    Hi,

    I have a nice bit of code that allows me to have a mouseover effect and display a picture with text. The code works fine with the different pictures and text but does not work properly with the mouseover effect.

    Take a look at the webpage here:
    http://www.snaptease.com/

    When you roll over the red icons you can see the image and text change but unfortunately all of the buttons change. I would prefer if they worked separately. Can you help?

    I haven't included the code, I guess if you are smart enough to figure out the problem then you are clever enough to access the code yourself. Having said that if you want me to display the code then I will.

    Many thanks in advance.

    Martin

  2. #2
    Join Date
    Jun 2007
    Location
    Washington D.C. Metro
    Posts
    76
    Your function changes all instances of the buttons and is called on each rollover. What you want is to create a generic function that toggles the rollover for each button individually. In your html, add a reference to the element:

    Code:
    <a onmouseover="mouseOver(this);num=8;slideshow(7);return false">...</a>
    Then in your function you know what element you're mousing over at any given time:

    Code:
    function mouseOver(elm) {
        var id = elm.id;
    }
    Of course, a better solution would be to use jQuery to handle your dom events so they are abstracted from the markup.

  3. #3
    Join Date
    Jan 2008
    Posts
    42

    Thanks

    Hey Trandrus,

    Thanks for your quick reply.

    What you explain make sense, but I am not advanced enough to interpret your solution can you be more specific with your amendment by giving an example using my code?

    Many thanks

    Martin

  4. #4
    Join Date
    May 2011
    Posts
    25
    change this for every link:

    PHP Code:
    <a onmouseover="changePicture('b1', 'images/aa1.jpg');num=0;slideshow(0);return false" href="aa.html" onmouseout="changePicture('b1', 'images/aa2.jpg');"><img alt="Album Art" src="images/aa1.jpg" id="b1" class="aa" /></a>
    <
    a onmouseover="changePicture('b2', 'images/am1.jpg');num=1;slideshow(1);return false" href="am.html" onmouseout="changePicture('b2', 'images/am2.jpg');"><img alt="Animal Mania" src="images/am1.jpg" id="b2" class="am" /></a
    add this in mouseover.js:

    PHP Code:
    function changePicture(idsrc)
    {
    document.getElementById(id).src src;


  5. #5
    Join Date
    Jan 2008
    Posts
    42
    Hey Grizly,

    Thanks that works a treat!

    Kudos to you

    Regards,

    Martin

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles