如何将 anchor 标记与图像映射相关联?
假设,我将鼠标悬停在 anchor 标记上,它应该选择图像上的映射区域。
像这样的东西 http://myffi.biz/ .这是在 flash 中,但这可以使用图像映射来完成吗?您将鼠标悬停在链接上,它应该会选择图像上的映射区域。
这可能吗?我希望我清楚
最佳答案
是的,它可以在没有 Flash 的情况下完成,但您根本不需要图像映射。只需将悬停事件淡入 map 上正确的图像中,使用 jQuery 即可轻松实现。这样的事情可能会起作用:
<ul class="region">
<li><a href="#" id="europe">Europe</a></li>
<li><a href="#" id="asia">Asia</a></li>
<li><a href="#" id="africa">Africa</a></li>
<li><a href="#" id="australia">Australia</a></li>
</ul>
<div id="region-map">
<div id="region-overlay"></div>
</div>
并且在 CSS 中,您将 region-map
定义为具有未选择区域的背景,而 region-overlay
选择了不同的区域。
#region-map, #region-overlay {
width: 640px;
height: 320px;
}
#region-map {
background: url(map-base.jpg) 0 0 no-repeat;
}
#region-overlay.europe {
background: url(map-europe.jpg) 0 0 no-repeat;
}
#region-overlay.asia {
background: url(map-asia.jpg) 0 0 no-repeat;
}
#region-overlay.africa {
background: url(map-africa.jpg) 0 0 no-repeat;
}
#region-overlay.australia {
background: url(map-australia.jpg) 0 0 no-repeat;
}
以及所需的 jQuery 代码:
$(function() {
$('ul.region a').hover(function() {
// Get the current region
var region = $(this).attr('id');
// Hide the current overlay, change it's map and change it back.
$('#region-overlay').fadeOut(200, function() {
$(this).attr('class', region).fadeIn(200);
});
}, function() {
// Hide the overlay
$('#region-overlay').fadeOut(200);
});
});
这并不完美,但应该可以帮助您入门。
可以在以下位置找到工作示例:
关于javascript - anchor 标签和图像映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2018628/