/    Sign up×
Community /Pin to ProfileBookmark

onMouseOver help!

Copy linkTweet thisAlerts:
Jul 13.2006

I haven’t really used javascript before. I need a mouseover to a link. that when you put your mouse over the link an image AND background color of the td changes. How can i do that?

here’s what i’ve done, but it changes the background color of the whole site:
(there’s the onMouseover image too, that works…)

<td><a href=”#” onMouseOver=”document.paw.src=’paw3.gif’; document.bgColor=’#ffffff'” onMouseOut=”document.paw.src=’vari.gif’; document.bgColor=’#000000′”><img src=”vari.gif” name=”paw”>Test</a></td>

thanks! and sorry about my bad english ?

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Luke2000Jul 13.2006 — Maybe you could chnage the img with JS and the bgcolor with CSS [URL=http://www.designmeme.com/articles/cssrollovers/]link[/URL]
Copy linkTweet thisAlerts:
@pixuauthorJul 13.2006 — Maybe you could chnage the img with JS and the bgcolor with CSS [URL=http://www.designmeme.com/articles/cssrollovers/]link[/URL][/QUOTE]

yeah, but then the background color changes only behind my link text, it won't change the whole td tag to different color.

i have an image, then the link text

and when i go over with my mouse i want the image to change, and the td background color to change.

i can't put the bg color mouseover to td tag, because then when you go over to td, it changes the td background color, but not the image, cause the image is in the link tag, if you understand what i mean.
Copy linkTweet thisAlerts:
@Luke2000Jul 13.2006 — Is this what you want: [URL=http://www.bibliocommerce.com/test/bgcolor.htm]Link[/URL]

[CODE]<html>
<head>
<title>Links</title></head>
<style type="text/css">
a:link
{
background: #FF0000
}
a:visited
{
background: #00FF00
}
a:hover
{
background: #FF00FF
}
a:active
{
background: #0000FF}
</style>
<body>
<table>
<td>
<a href="" onMouseOver="document.paw.src='http://www.stories.org.br/querocontar/emoticons/hehe.gif'" onMouseOut="document.paw.src='http://www.rain-story.com/blog/images/emot/hehe.gif'" style="display: block;">
Link
</a>
<img src="http://www.rain-story.com/blog/images/emot/hehe.gif" name="paw" />
</td>
</table>
</body>
</html>[/CODE]
×

Success!

Help @pixu 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.17,
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,
)...