Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.03.2011, 17:13
Аспирант
Отправить личное сообщение для Reflexion Посмотреть профиль Найти все сообщения от Reflexion
 
Регистрация: 25.10.2009
Сообщений: 51

использование maphilight
Хочу сделать подсветку определенной области на картинке и при наведении на эту область ещё сильнее сделать подстветку. Нарыл кодик с maphilight пытался задать подсветку изначально скажем 20% а при наведении чтобы вызывалась функция и подсветка становилась 40%, но видимо что-то не то делаю и вообще все перестает выделяться. Сделал так, через опу, работает, но требует 2 области что не есть хорошо. Вы не могли подсказать как правильно вызвать функцию по смене прозрачности?
<head>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
        <script type="text/javascript" src="maphilight.js"></script>           
        <script>
        
        $(function() {
        $('.map').maphilight();
        $('#starlink2').click(function(e) {
            e.preventDefault();
            var data = $('#star').data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            $('#star').data('maphilight', data).trigger('alwaysOn.maphilight');
        });
        });
        </script>

    </head>
<body>
<img src="img.gif" width="300" height="300" class="map" usemap="#features">

<map name="features">

<area shape="poly" alt="" id="starlink2" 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="#" onclick="result();" >

<area shape="poly" id="star" alt="" onfocus="this.blur();" class="{alwaysOn:true,stroke:false,fillColor:'ffc000',fillOpacity:0.1}" coords="58,117,49,141,48,153,61,159,67,151,68,142,66,128,61,132,61,124,65,119" href="#" onclick="result();" >
</map>
</body>

Последний раз редактировалось Reflexion, 17.03.2011 в 17:15.
Ответить с цитированием
  #2 (permalink)  
Старый 17.03.2011, 18:53
Аспирант
Отправить личное сообщение для Reflexion Посмотреть профиль Найти все сообщения от Reflexion
 
Регистрация: 25.10.2009
Сообщений: 51

Может стоит выложить подключаемую библиотеку maphilight.js чтобы стало понятнее?
Ответить с цитированием
  #3 (permalink)  
Старый 17.03.2011, 23:28
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от Reflexion
Хочу сделать подсветку определенной области на картинке и при наведении на эту область ещё сильнее сделать подстветку.
почему не сделать изображение изначально таким как нужно, а потом подсвеичвать область еще сильнее?
Ответить с цитированием
  #4 (permalink)  
Старый 18.03.2011, 16:47
Аспирант
Отправить личное сообщение для Reflexion Посмотреть профиль Найти все сообщения от Reflexion
 
Регистрация: 25.10.2009
Сообщений: 51

Области рендомно меняются, картинка 900х500 и областей именно на этой картинке 150шт, таких картинок будет 25шт. Размер файла, колличество картинок и нужных областей слишком велико чтобы делать для каждой области новую картинку. Нужно изначально задать подсветку области на 20%, а потом при наведении изменить на 40%. Корректно сделать не получается, а накладывать 2 карты изображения тоже не хочется(
Ответить с цитированием
  #5 (permalink)  
Старый 18.03.2011, 20:46
Аспирант
Отправить личное сообщение для Reflexion Посмотреть профиль Найти все сообщения от Reflexion
 
Регистрация: 25.10.2009
Сообщений: 51

Разобрался. Ноипоявилась другая проблема. Теперь код выглядит так
<head>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>   

         <script type="text/javascript" src="maphilight.js"></script>             

         <script>  
            

         $(function() {  

         $('.map').maphilight();  

         $('#star').click(function(e) {  

             e.preventDefault();  

             var data = $('#star').data('maphilight') || {};  

             data.fillOpacity = 0.4  

             $('#star').data('maphilight', data).trigger('alwaysOn.maphilight');  

         });  

         });  

         </script>  

</head>  

<body>  

<img src="img.gif" width="300" height="300" class="map" usemap="#features">  
   

<map name="features">  

<area shape="poly" id="star" alt="" onfocus="this.blur();" class="{alwaysOn:true,stroke:false,fillColor:'ffc000',fillOpacity:0.1}" coords="58,117,49,141,48,153,61,159,67,151,68,142,66,128,61,132,61,124,65,119" href="#" onclick="result();" >  

<area shape="poly" id="star2" alt="" onfocus="this.blur();" class="{alwaysOn:true,stroke:false,fillColor:'ffc000',fillOpacity:0.1}" coords="1,1,44,44,55,55,66,66,11,11" href="#" onclick="result();" >  


</map>  

</body>


Так работает для 1го элемента. Для второго можно продублировать функцию, но опять же примитивно.

если сделать вот так
var='star';
         $(function() {  

         $('.map').maphilight();  

         $('#''+ a +').click(function(e) {  

             e.preventDefault();  

             var data = $('#'+ a +'').data('maphilight') || {};  

             data.fillOpacity = 0.4  

             $('#'+ a +'').data('maphilight', data).trigger('alwaysOn.maphilight');  

         });  

         }); 
<area shape="poly" id="star2" onmouseover='a="star2";' alt="" onfocus="this.blur();" class="{alwaysOn:true,stroke:false,fillColor:'ffc000',fillOpacity:0.1}" coords="1,1,44,44,55,55,66,66,11,11" href="#" onclick="result();" >


Но так ничего не происходит, похоже на то что один раз функция проинициализировалась с исходной переменной а, и при замене переменной, это действие никакого влияение на функцию не оказывает. Тут крутятся мысли что каким-то образом надо вызвать ту функция и вместо $('#'+ a +'') поставить $(this)... Но как реализовать вызов функции не знаю, и будет ли так работать? Гуру яваскрипта помогите пжл

Последний раз редактировалось Reflexion, 18.03.2011 в 21:02.
Ответить с цитированием
  #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. было бы намного проще, если бы твой код можно было запустить прямо на сайте. Как видишь, для этого есть все возможности. Получил бы быстрее ответ или просто больше людей участвовало бы в обсуждении
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery.history.js Правильное использование warobushek jQuery 0 10.02.2011 07:42
jQuery Использование textIndent при анимации slim-v Opera, Safari и др. 26 19.12.2010 18:16
Использование load, динамически созданные объекты и добавление плагинов к ним. Alexander Majesty jQuery 2 11.12.2009 01:12
Использование нестандартных атрибутов. VJiK Общие вопросы Javascript 3 04.12.2009 02:03
Использование таймера Strimer Events/DOM/Window 7 07.09.2008 01:22