Show an enlarge image on image's tooltip

Tuesday, October 28, 2008 by Lance Zhang ,

Hi friend

try to use the following code, easy and coolCool

<html>


<head>


<title>Lance</title>


<script language="javascript">


function showPic(sUrl)


{


var x,y;


x = event.clientX;


y = event.clientY;


document.getElementById("Layer1").style.left = x;


document.getElementById("Layer1").style.top = y;


document.getElementById("Layer1").innerHTML = "<img height=200 width=400 src=\"" + sUrl + "\">";


document.getElementById("Layer1").style.display = "block";


}


function hiddenPic(){


document.getElementById("Layer1").innerHTML = "";


document.getElementById("Layer1").style.display = "none";


}


</script>


</head>


<body>


<div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>


<img src="http://forums.asp.net/Themes/FAN/style/i/logo.png" onmouseout="hiddenPic();" onmousemove="showPic(this.src);"/>


<p></p>


</body>


</html>







0 comments