/    Sign up×
Community /Pin to ProfileBookmark

Changing a Div’s background image onMouseOver

Copy linkTweet thisAlerts:
May 02.2007

I’m sure this is a very simple script but I have very little experience in JavaScript. I am trying to learn it and I would appreciate it if you help me create this effect ?.

Style.css

[code]#test{
background-image:url(images/bg1.gif);
height:100px;
width:100px;
}[/code]

and I imagine the HTML would look something like this, with the Javascript I have so far.

[code]
<html>
…
<script type=”text/Javascript”>
function changeBgImage (image , id) {
var element = getDocumentByID(id);
element.style.background-image = url(image);
}
</script>

<body>

<div id=”test” onMouseOver=”changeBgImage(‘images/bg2.gif’,’test’)”>
</div>

</body>
</html>[/code]

That’s basically it. Any help is appreciated.

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@boskoMay 02.2007 — Like this?

[CODE]<html>
<head>
<style type="text/css">
#test {
background-image:url(images/bg1.gif);
height:100px;
width:100px;
}
</style>
<script type="text/javascript">
function changeBgImage (image, id) {
var element = document.getElementById(id);
element.style.backgroundImage = "url("+image+")";
}
</script>
</head>
<body>
<div id="test" onMouseOver="changeBgImage('images/bg2.gif', 'test')">
</div>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@alecksauthorMay 02.2007 — Ah! Thank you very much! ?
Copy linkTweet thisAlerts:
@tugboatNov 15.2007 — What additional script needs to be included to have it return to the original image on a mouse exit?
Copy linkTweet thisAlerts:
@sgreveNov 15.2007 — Hey guys, could the above snippet be modified to work onClick and with multiple background images on one div? Ideally the background change would depend on which of a series of links was clicked.
Copy linkTweet thisAlerts:
@DahwanFeb 06.2009 — What additional script needs to be included to have it return to the original image on a mouse exit?[/QUOTE]

<i>
</i>&lt;div
id="test"
onMouseOver="changeBgImage('images/bg2.gif', 'test')"
onMouseOut="changeBgImage('images/bg1.gif', 'test')"&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@RyanMMalinoskiAug 03.2009 — this code does not account for the right side of the div tag. onmouseout works for the top left and bottom sides but not the right ideas?
Copy linkTweet thisAlerts:
@RyanMMalinoskiAug 03.2009 — nevermind, i figured it out wasn't closing my div tag haha i am a genius
Copy linkTweet thisAlerts:
@ashkanjjAug 03.2009 — Can someone tell me with using the same method, how can you remove the image as you use "onMouseOut"??
Copy linkTweet thisAlerts:
@JocelitoAug 29.2012 — this code functions very well to change the background image

<center class="menu" onmouseover="this.style.backgroundImage='url(images/image_2.jpg)'" onmouseout="this.style.backgroundImage='url(images/image_1.jpg)'">

in the css the bg image must be set how 'image_1.jpg', so whem you goes with the cursor on this, it change to 'image_2'.. with the cursos goes out, it come back to 'image_1'

very simple
×

Success!

Help @alecks 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 5.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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...