Я хочу показать разные divs, когда на карте изображений накладываются разные области. Я попытался создать еще один тег Map, но это не сработало.Можно ли показывать разные div на разных участках карты изображений?

Вот мой код до сих пор,

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style> 
      #pipelines { 
       margin-left: auto; 
       margin-right: auto; 
       margin-top: auto; 
       margin-bottom: auto; 
       float: left; 
      } 
      #content { 
       font-family: Helvetica Neue; 
       color: #000; 
       border: solid; 
       padding-left: 10px; 
       padding-right: 10px; 
       border-radius: 2px; 
       background-color: white; 
       position: relative; 
       width: 20%; 
       height: 0; 
       overflow: hidden; 
       padding-bottom: 20%; 
       display: none; 
       float: left; 
      } 

      hr { 
       background-color: #000; 
      } 

      #members { 
       float: right; 
       position: relative; 
       font-family: Helvetica Neue; 
       color: #000; 
       border: solid; 
       border-width: 1px; 
       width: 20%; 
       text-align: center; 
       padding-left: 10px; 
       padding-right: 10px; 
       padding-bottom: 10px; 
      } 

     </style> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Pipeline</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

    </head> 

    <body> 
     <div id="pipelines"> 
      <img src="2D_Pipeline.jpg" usemap="#Map" border="0"/> 
      <map name="Map" id="Map"> 
       <area shape="rect" coords="29,77,143,105" href="#" alt="Writers" /> 
       <area shape="rect" coords="199,77,312,105" href="#" alt="Design" /> 
      </map> 

     </div> 

     <div id="content"> 
      <h4></h4> 
      <hr /> 
      John Howard 
      [email protected] 
      <br /> 
      (123) 456 - 7890 
      <br /> 
      <button type="button" id="john"> 
       Add 
      </button> 
      <hr /> 
      Leslie Holmes 
      [email protected] 
      <br /> 
      (133) 336 - 7890 
      <br /> 
      <button type="button" id="leslie"> 
       Add 
      </button> 
     </div> 

     <div id="members"> 
      <h5>Team Members</h5> 
      <hr /> 

     </div> 
     <script> 

      $("#john").click(function() { 
       $("#members").append("John Howard"); 
      }); 

      $("#leslie").click(function() { 
       $("#members").append("<br/>Leslie Holmes"); 
      }); 

      $("#Map").on('mouseenter', function(e) { 

       $("#content").stop().show(); 
       //$("#content").css("visibility", "show"); 
       $("#content").offset({ 
        left : e.pageX, 
        top : e.pageY 
       }); 
       var alt_script = $("area").attr("alt"); 
       $("#content h4").html(alt_script); 
      }); 

      $("#content").on('mouseenter', function(e) { 

       $("#content").stop().show(); 
       //$("#content").css("visibility", "show"); 

      }); 

      $("#Map").on('mouseleave', function(e) { 
       $("#content").stop().hide(); 
      }); 

      $("#content").on('mouseleave', function(e) { 
       $("#content").stop().hide(); 
      }); 

     </script> 
    </body> 
</html>

А вот изображение в коде: http://imgur.com/eJK42SZ

Как у меня есть «Содержимое» ДИВ для одного изображения карты области & Я хотел бы использовать другой div для другой области, например, «Content1». Как я могу это сделать?

источник

2013-06-20 Mathew Elis

Update Ответ

Вы имеете в виду что-то вроде этого, DEMO http://jsfiddle.net/yeyene/Pgqh3/3/

Я создал 2 дивы для сценария и Workbook, Мышелов зависании и видеть.

Если вы хотите, чтобы пересекаться друг с другом, используйте z-index

<div id="map"> 
    <div id="content1">Script</div> 
    <div id="content2">Workbook</div> 
</div> 

#map { 
    float:left; 
    width:946px; 
    height:653px; 
    background: url(http://i.imgur.com/eJK42SZ.jpg) no-repeat left top; 
} 
#content1 { 
    position:absolute; 
    top:110px; 
    left:170px; 
    width:120px; 
    height:30px; 
    text-align:center; 
    background:#dfdfdf; 
    border:1px solid #000; 
    font-weight:bold; 
} 
#content1:hover { 
    background:red; 
} 
#content2 { 
    position:absolute; 
    top:240px; 
    left:170px; 
    width:120px; 
    height:30px; 
    text-align:center; 
    background:#dfdfdf; 
    border:1px solid #000; 
    font-weight:bold; 
} 
#content2:hover { 
    background:yellow; 
}

источник

2013-06-20 10:38:22 yeyene

Так можно ли использовать div в изображениях? –

Да, ничего, вставьте изображение или установите фоновое изображение css. как хотите. – yeyene

Настройте основное изображение как фоновое изображение div. Затем вы можете добавить DIV. – yeyene

Вы можете добавить другой класс для каждой области в карте, а затем использовать этот класс в JQuery при подключении MouseEnter и MouseLeave методы, так они активируются только на одной точной области. И я полагаю, вам лучше использовать функцию .hover :)

источник

2013-06-20 10:41:06

Можно ли показывать разные div на разных участках карты изображений?

ответ

Update Ответ

Смежные вопросы