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

时间:2015-02-16 05:02:40

标签: jquery html

使用此脚本,当我将鼠标悬停在链接上时,它将突出显示我在<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设置,而不为每个新链接和图像位置添加新脚本?

1 个答案:

答案 0 :(得分:0)

你需要为你的所有链接提供一个公共类名或者其他东西,然后编写一个迭代它们的函数,并在每个链接上使用$(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(); });
    });

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