how to put effect onmouseover changing background?

**davelf** · 06-06-2011, 09:53 AM

I have this script to change background image onmouseover:

Code:

<html>
<head>
<style type="text/css">
#test	{
	background-image:url(images/background-2.jpg);
	height:1300px;
	width:1800px;
}
</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/background-2.jpg', 'test')"
    onMouseOut="changeBgImage('images/background-3.jpg', 'test')">
</div>
</div>
</body>
</html>

How to add some effect like fade for example. I know we can use jquery, the problem is i'm not really understand how to make it work. Example or tutorial should be nice. Thanks a lot

**Beverleyh** · 06-06-2011, 12:23 PM

this should start you off

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Div Swop</title>

<style type="text/css">
#swop1, #swop2 { position:absolute; top:50px; left:50px; width:150px; height:150px; }
#swop1 { background:url('images/1.jpg'); }
#swop2 { background:url('images/2.jpg'); display:none; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function()
		{
		$('#swop1').mouseover(function(){ $('#swop2').fadeIn(500)});
		$('#swop2').mouseout(function(){ $('#swop2').fadeOut(500)});
          	});
</script>

</head>
<body>

<div id="swop1"></div>
<div id="swop2"></div>

</body>
</html>

**davelf** · 06-06-2011, 02:16 PM

hmm, thx beverleyh for your reply.
I have already tried to use the script you gave to me, but nothing happen? is there something you forgot?

Thank you very much...

**Beverleyh** · 06-06-2011, 03:14 PM

I don't think so - it works on my local machine using my own images as referenced (only quickly tested in IE8, Firefox, Safari and Chrome and all those browsers are working).

Have you definitely replaced the CSS background URL images with your own and checked the paths are correct?

Maybe change the URLs to absolute and surround with "images/1.jpg" instead of 'images/1.jpg' too

**traq** · 06-06-2011, 07:38 PM

some servers also have problems with filenames that start with numbers - not common, but it happens

Thread: how to put effect onmouseover changing background?

Thread Tools

Search Thread

how to put effect onmouseover changing background?

Bookmarks

Bookmarks

Posting Permissions