Changing a Div's background image onMouseOver
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
Code:
#test{
background-image:url(images/bg1.gif);
height:100px;
width:100px;
}
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>
That's basically it. Any help is appreciated.
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>
Ah! Thank you very much!
What about on a Mouse Exit?
What additional script needs to be included to have it return to the original image on a mouse exit?
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.
Originally Posted by
tugboat
What additional script needs to be included to have it return to the original image on a mouse exit?
Code:
<div
id="test"
onMouseOver="changeBgImage('images/bg2.gif', 'test')"
onMouseOut="changeBgImage('images/bg1.gif', 'test')">
</div>
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?
nevermind, i figured it out wasn't closing my div tag haha i am a genius
Can someone tell me with using the same method, how can you remove the image as you use "onMouseOut"??
this code functions very well to change the background image
Thread Information
Users Browsing this Thread
There are currently 3 users browsing this thread. (0 members and 3 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
.
Reply With Quote
Originally Posted by tugboat
more simple
Bookmarks