悬停时图像映射更改另一个DIV内容

时间:2016-12-20 00:57:47

标签: jquery image hover

我有下面的代码,我的问题是如何在悬停时做一个图像映射(圆形映射),可以改变另一个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>

https://jsfiddle.net/wx1q8rfu/

1 个答案:

答案 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');


   });







});