javascript - 使用javascript在鼠标悬停时显示图片

Question

我使用此代码通过 javascript 在鼠标悬停时显示图片

<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="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 (Source=="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">
#Style {
    position:absolute; 
    visibility:hidden;
    border:solid 1px #CCC;
    padding:5px;

}
</style>

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="http://www.wallpaperama.com/post-images/forums/200901/11-880-aaaa.jpg"></div>

但是您如何添加多个文本链接以便识别不同的图像呢？

Answer 1

试试这个:

您只需要在参数中添加图片 url，并在某处定义样式 id div ONE TIME

function ShowPicture(id,show, img) {
  if (show=="1"){
    document.getElementById(id).style.visibility = "visible"
    document.getElementById(id).childNodes[1].src = img;
  }
  else if (show=="0"){
    document.getElementById(id).style.visibility = "hidden"
  }
}

.imageBox {
  position: absolute;
  visibility: hidden;
  border: solid 1px #CCC;
  padding: 5px;
}

<a href="#" onMouseOver="ShowPicture('Style',1, 'http://www.wallpaperama.com/post-images/forums/200901/11-880-aaaa.jpg')" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div class="imageBox" id="Style">
    <img src="" />
</div>