Question

使用此脚本，当我将鼠标悬停在链接上时，它将突出显示我在<area>:

中指定的图像坐标

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.maphilight.min.js"></script>


<script type="text/javascript">$(function() {
    $('.map').maphilight();
    $('.squidheadlink').mouseover(function(e) {
        $('#squidhead').mouseover();
    }).mouseout(function(e) {
        $('#squidhead').mouseout();
    }).click(function(e) { e.preventDefault(); });
});</script>

<p>This is just a simple <a class="squidheadlink" href="#" >example</a>of how the maps look.</p>

<area id="squidhead" href="#" shape="circle" coords="50,71,10" alt="Octoface" data-maphilight='{"stroke":false,"fillColor":"ff0000","fillOpacity":0.6}' title="Metadata'd up a bit">

现在我的问题是，当我需要添加多个链接时，脚本对我来说太长了，我相信你应该是一种简化它的方法。目前我正在做的是为每个新增加这个指出新的立场。

  $('.squidheadlink2').mouseover(function(e) {
            $('#squidhead2').mouseover();
        }).mouseout(function(e) {
            $('#squidhead2').mouseout();
        }).click(function(e) { e.preventDefault(); });
    });

函数是一样的，所以如何使它对于不同的（link1），（link2）共享相同的图像（位置1）和（link3），（link4）共享相同的图像（位置2）可以按类或ID设置，而不为每个新链接和图像位置添加新脚本？

Answer 1

你需要为你的所有链接提供一个公共类名或者其他东西，然后编写一个迭代它们的函数，并在每个链接上使用$（this）来获取和分配东西。如果您需要代码，请告诉我。

最简单的方法是在这样的链接上使用自定义属性..

<a href="" pairwith="squidhead1">link</a>
<a href="" pairwith="squidhead2">link</a>
<a href="" pairwith="squidhead3">link</a>

则...

 $('[pairwith]').mouseover(function(e) {
            $('#'+ $(this).attr('pairwith')).mouseover();
        }).mouseout(function(e) {
            $('#'+ $(this).attr('pairwith')).mouseout();
        }).click(function(e) { e.preventDefault(); });
    });

您正在使用自定义属性与其他项目配对。解决了问题。

jquery鼠标悬停链接，将突出显示图像位置

1 个答案: