/    Sign up×
Community /Pin to ProfileBookmark

help with onmouseover javascript

Copy linkTweet thisAlerts:
May 24.2011

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:
[url]http://www.snaptease.com/[/url]

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

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@trandrusMay 24.2011 — 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:

<i>
</i>&lt;a onmouseover="mouseOver([COLOR="SeaGreen"]this[/COLOR]);num=8;slideshow(7);return false"&gt;...&lt;/a&gt;


Then in your function you know what element you're mousing over at any given time:

<i>
</i>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.
Copy linkTweet thisAlerts:
@martin_b14authorMay 24.2011 — 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
Copy linkTweet thisAlerts:
@qrizlyMay 24.2011 — change this for [U]every[/U] link:

[code=php]
<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>[/code]

add this in mouseover.js:

[code=php]function changePicture(id, src)
{
document.getElementById(id).src = src;
}[/code]
Copy linkTweet thisAlerts:
@martin_b14authorMay 24.2011 — Hey Grizly,

Thanks that works a treat!

Kudos to you

Regards,

Martin
×

Success!

Help @martin_b14 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...