使用javascript在鼠标上方显示图片_Javascript_Css

使用javascript在鼠标上方显示图片

javascript css

使用javascript在鼠标上方显示图片,javascript,css,Javascript,Css,我使用此代码通过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.visibil

我使用此代码通过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>


#风格{
位置：绝对位置；
可见性：隐藏；
边框：实心1px#CCC；
填充物：5px；
}

但如何添加多个文本链接，使其识别不同的图像

试试这个：

您只需在参数中添加图像url，并在某处定义样式id div一次

函数ShowPicture（id、show、img）{
如果（显示=“1”）{
document.getElementById（id）.style.visibility=“可见”
document.getElementById（id）.childNodes[1].src=img；
}
否则如果（显示=“0”）{
document.getElementById（id）.style.visibility=“隐藏”
}
}

.imageBox{
位置：绝对位置；
可见性：隐藏；
边框：实心1px#CCC；
填充物：5px；
}

在jQuery中试试这个。
.img_集装箱{
宽度：200px；
高度：200px；
背景色：白色；
边缘底部：10px；
边框：1px纯绿色；
位置：相对位置；
}
.img_集装箱img{
宽度：100%；
高度：自动；
显示：无；
}
.img_show{
宽度：100px；
高度：100px；
边框：1px纯黑；
显示：无；
位置：绝对位置；
}
.main_包装{
位置：相对位置；
宽度：1000px；
保证金：0自动；
}


$（“.img_容器”）。在({
mouseenter:function（）{
var imgsrc=$（this.find（'img'）.attr（'src'）；
var posLeft=（$（this.position（）.left）+“px”；
var posTop=（$（this.position（）.top）+“px”；
$（'.img_show'）.css({
“显示”：“块”，
“左”：左，
“顶部”：后期
});
$（'.img_show img'）.attr（'src'，imgsrc）；
},
mouseleave:function（）{
$（“.img_show”）.css({
显示：“无”
});
$（'.img_show img'）.attr（'src'，''）；
}
});

和第一次一样。只需确保您使用唯一的ID（如果您的ID上面是'Style'）

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','');
   }
 });