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

试试这个：

您只需在参数中添加图片网址，并在某处一次

定义Style id div

＆＃13;

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"
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

Try this in jQuery.
<html>
<head>
  <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">    </script>
<style type="text/css">
.img_container {
    width: 200px;
    height: 200px;
    background-color: white;
    margin-bottom: 10px;
    border: 1px solid green;
    position: relative;
}
.img_container img {
    width: 100%;
    height: auto;
    display: none;
}
.img_show {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: none;
    position: absolute;
}
.main_wrapper{
    position: relative;
    width: 1000px;
    margin: 0 auto;
}
</style>

<div class="main_wrapper">
    <div class="img_container">
        <img src="black-gear-rope.png">
    </div>
    <div class="img_container">
        <img src="coor-gear-rope.png">
    </div>
    <div class="img_container">
        <img src="main-rope.png">
    </div>
    <div class="img_show">
        <img src="">
    </div>

</div>

<script type="text/javascript">
  $(".img_container").on({
   mouseenter: function() {
    var imgsrc = $(this).find('img').attr('src');
    var posLeft = ($(this).position().left) + "px";
    var posTop = ($(this).position().top) + "px";
    $('.img_show').css({
        "display": "block",
        "left": posLeft,
        "top": posTop
    });
    $('.img_show img').attr('src',imgsrc);

},
mouseleave: function() {
    $(".img_show").css({
        display: "none"
    });
    $('.img_show img').attr('src','');
   }
 });

使用javascript在mouseover上显示图片

2 个答案: