有没有当鼠标移动到特定的地方,显示图片。

例如鼠标移动到一段文字上 ,在原来的页面出现新的一层显示图片效果。

这个实现起来很容易,学过JavaScript、CSS和HTML的如果没忘了基本都会。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS教程:鼠标悬停文字上显示图片</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 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="/images/logo.gif" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" /> 
<p></p> 
</body> 
</html>

追问

非常感谢,可以让出现的图片自适应比例出现吗?因为原图可能比较大,用固定宽度的话可能图片可能会拉扁。

追答

指定宽度,不要指定高度,这样就可以了

温馨提示:答案为网友推荐,仅供参考
相似回答