我有下面的代码,我的问题是如何在悬停时做一个图像映射(圆形映射),可以改变另一个DIV内容?
这里有一个例子,这个图像有5个圆圈,当我鼠标悬停在每个圆圈上时,我想在结果DIV上显示不同的文字。
$(document).ready(function () {
if($("#planet").find(".circle1:hover").length){
$('#result').html('Hoving purple');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<img src ="http://placehold.it/400x400" width="400" height="400" alt="Planets"
usemap="#planetmap">
<map name="planetmap" id="planet">
<area shape="circle" coords="107,93,60" class="circle1" alt="purple" title="purple">
<area shape="circle" coords="288,73,60" class="circle2" alt="red" title="red">
<area shape="circle" coords="86,272,60" class="circle3" alt="orange" title="orange">
<area shape="circle" coords="368,222,60" class="circle4" alt="green" title="green">
<area shape="circle" coords="240,348,60" class="circle5" alt="blue" title="blue">
</map>
<div id="result">not hover</div>
答案 0 :(得分:0)
$(document).ready(function () {
$(".circle1").hover(function(){
$('#result').html('This is purple');
});
$(".circle2").hover(function(){
$('#result').html('This is red');
});
$(".circle3").hover(function(){
$('#result').html('This is orange');
});
$(".circle4").hover(function(){
$('#result').html('This is green');
});
$(".circle5").hover(function(){
$('#result').html('This is blue');
});
});