Question

我有一张图像，我使用图像映射为超链接创建了热点。现在我需要在鼠标上放大/缩放图像。到目前为止我有这个

<script type="text/javascript">
$(document).ready(function () {
$('.mapping').mouseover(function() {

 $(this).animate({
    width: "110%",
    height: "50%"
  }, 'slow');

});
});
</script>
</head>

<body>
<p>
<map id="ImgMap0" name="ImgMap0">
 <area alt="" coords="4, 14, 67, 34" id="a" class="mapping" 
 href="#" shape="rect" />
<area alt="" coords="5, 55, 70, 74" id="b" class="mapping" 
href="# shape="rect" />
....
<img alt="" class="auto-style1" height="529" src="Tools.jpg" 
width="800" usemap="#ImgMap0" /></p>

</p></body>

但是animate（）不起作用。正在调用警报，所以我知道mouseover（）正在运行。有关扩大图像地图区域的想法吗？

JS小提琴链接 https://jsfiddle.net/z2Lkf8p0/

Answer 1

您无法以任何方式放大图片的地图。

你可以用另一种方式做到这一点。我为它创造了一个小提琴。

http://jsfiddle.net/ebilgin/141bkx84/

HTML

<div class="container">
    <img src="http://dummyimage.com/600x400/000/fff" alt="" />
    <div class="map1 map"></div>
    <div class="map2 map"></div>
</div>

CSS

.container {

    position: relative;
    width: 600px;

}

.container img {

    position: absolute;
    z-index: 1;

}

.map {

    position: absolute;
    background: #F0F;
    z-index: 2;

}

.map1 {

    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;

}

.map2 {

    right: 10px;
    top: 10px;
    width: 100px;
    height: 100px;

}

JS

$(".map").on("mouseenter", function () {

    $(this).animate({

        width: "200px",
        height: "200px"

    });

});

CSS转换区域

如果所有区域类型都是矩形，则很容易。 N1，N2，N3，N4

n1：开头 n2：x开头 n3：结束 n4：x结尾

你可以转换它。

left:   n2;
top:    n1;
width:  n3 - n1;
height: n4 - n2;

Answer 2

试试这个，

<script type="text/javascript">
$(document).ready(function () {
$('.mapping').hover(function() {
       alert('Mouse Hovered');
       //some statements   
 });

});
</script>

祝你好运.. [＆＃39;}

jQuery在鼠标上放大图像映射

2 个答案: