Показать сообщение отдельно
  #6 (permalink)  
Старый 19.03.2011, 05:55
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

чтобы не дублировать area, их можно скопировать с помощью javascript
<!DOCTYPE HTML>
<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script type="text/javascript" src="http://davidlynch.org/js/maphilight/docs/jquery.metadata.min.js"></script>
    <script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('.map').map( imgToMap ).find('area')
          .each( duplicateArea )
        $('.map').maphilight();
      });
      
      function duplicateArea(){
        var alwaysOnArea = $(this).clone();
        alwaysOnArea.metadata().fillOpacity -= 0.1;
        alwaysOnArea.metadata().alwaysOn = true;
        alwaysOnArea.get(0).id = null;
        alwaysOnArea.insertAfter(this);
      }
      
      function imgToMap(){
        var mapName = this.getAttribute('usemap').substr(1);
        return $('map[name='+mapName+']').get(0);
      }
    </script>
  </head>
  <body>

    <img src="http://davidlynch.org/js/maphilight/docs/demo_simple.png" width="420" height="300" class="map" usemap="#features">
      
    <map name="features">
      <area shape="poly" onfocus="this.blur();" class="{alwaysOn:false,stroke:false,fillColor:'000000',fillOpacity:0.2}" coords="58,117,49,141,48,153,61,159,67,151,68,142,66,128,61,132,61,124,65,119" href="#"> 
      <area shape="poly" onfocus="this.blur();" class="{alwaysOn:false,stroke:false,fillColor:'000000',fillOpacity:0.2}" coords="1,1,44,44,55,55,66,66,11,0" href="#">
    </map>


  </body>
</html>


твой последний вариант - совсем не тру

если расскажешь подробнее, что это за изображение, и что там за области, и как оно работает - помогу с дублированием областей

p.s. было бы намного проще, если бы твой код можно было запустить прямо на сайте. Как видишь, для этого есть все возможности. Получил бы быстрее ответ или просто больше людей участвовало бы в обсуждении
Ответить с цитированием