[CSS] Onmouseover, load a image, onmouseout unload it, without flick

**Khrysller** · January 29th, 2008, 06:04 AM

Hi : )

I am trying to load a image X when I mouse over Y. Actually the code bellow do this, but this is getting a annoying flick. I tried to work with z-index but without success. Is someone has some light, please let me know.

Code and test images bellow.

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Link 1</title>
<script language="Javascript">
<!--
function toggleDiv(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
<style type="text/css">#div1, #div2, #div3 {position:absolute; top: 0; left: 0; z-index: 0; width:200; visibility:hidden}</style>
</head>

<body>
<a onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)" target="_blank" href="http://www.google.com"><img border="0" src="page_edit.gif"></a><div id="div1"><img border="0" src="bartest.gif"></div>

</body>

</html>

And the image link become unuseful.

If you have some ideias in how to do this in a different way, please let me know ^^

Thanks for any info. : )

**markoc** · January 31st, 2008, 01:29 AM

Hi Khrysller,
The image will flicker doing it that way. I would have the div with the link and image in it and when mouse over/out change the class and swap the background using the bartest image as the source.

But as the bartest image is a true colour u could just change the background color to the grey in the image.

The only thing you need to do is change the canvas side of the page_edit image to to make it the same height as the bartest image and also increase the width to place the image in the square space in the bartest image. I have attached the image resized and see the code below for both examples.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Link 1</title>
<script language="Javascript">
<!--//

var classArray = new Array(3);
classArray[0] = "div_off";
classArray[1] = "div_on";
classArray[2] = "div_on2";

function toggleDiv(d, s) {
	document.getElementById(d).className = classArray[s];
}

//-->
</script>
<style type="text/css">

body {
	margin: 0px;
}

#mainDiv {
	height: 34px;
}

.div_off {
	background: transparent;
	width: 249px;
	height: 34px;
}

.div_on {
	background: url(bartest.gif) no-repeat;
	width: 249px;
	height: 34px;
}

.div_on2 {
	background: #D5D5D5;
	width: 249px;
	height: 34px;
}

</style>
</head>
<body>
<div id="mainDiv">
	<div id="div1" style="float: left;" class="div_off">
		<a href="http://www.google.com" target="_blank" onMouseOver="toggleDiv('div1','1');" onMouseOut="toggleDiv('div1','0');"><img id="img1" src="page_edit.gif" border="0"></a>
	</div>
	<div id="div2" class="div_off">
		<a href="http://www.google.co.uk" target="_blank" onMouseOver="toggleDiv('div2','2');" onMouseOut="toggleDiv('div2','0');"><img id="img2" src="page_edit.gif" border="0"></a>
	</div>
</div>
</body>
</html>

Threads:	525,393
Posts:	977,012
Members:	220,040

Developer Shed Network

ASP Free Login

Menu

Thread: [CSS] Onmouseover, load a image, onmouseout unload it, without flick