help with onmouseover javascript

[martin_b14]

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

[trandrus]

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:

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

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.

[martin_b14]

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

[qrizly]

change this for every link:

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

function changePicture(id, src)
{
document.getElementById(id).src = src;
} 

[martin_b14]

Hey Grizly,

Thanks that works a treat!

Kudos to you

Regards,

Martin