使用此脚本,当我将鼠标悬停在链接上时,它将突出显示我在<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设置,而不为每个新链接和图像位置添加新脚本?
答案 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(); });
});
您正在使用自定义属性与其他项目配对。解决了问题。