M
M
massef2014-02-19 16:48:55
Opera
massef, 2014-02-19 16:48:55

How to defeat map area bug in Chrome/Opera?

Greetings.
I make a floor-by-floor selection on the building, through the map area tags, using the maphilight
plugin The problem is that the selection does not always work, the bug occurs in Chrome and Opera browsers
Googled the solution, found only an option with adding map id and name to the tag with the same value, but it didn't work.
Who faced similar how to force the specified browsers to work?

<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>

$(function() {
      $(".map").maphilight();
});

<img class="map" alt="img/1470.jpg" src="http://s018.radikal.ru/i501/1402/07/2debaecf5527.jpg" usemap="#myMap" width="1470" height="827" />

  <map name="myMap" id="myMap">
    <area shape="poly" coords="177,164,359,147,591,156,852,193,852,259,591,240,358,237,177,244" class="class6 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id6" target="_self" title="title6"/>
    <area shape="poly" coords="177,244,359,237,591,240,852,259,853,313,591,309,358,309,178,310" class="class5 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id5" target="_self" title="title5"/>
    <area shape="poly" coords="177,310,357,309,591,310,853,314,853,368,592,378,359,380,178,374" class="class4 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id4" target="_self" title="title4"/>
    <area shape="poly" coords="178,374,359,381,592,379,853,368,853,422,591,446,359,451,178,438" class="class3 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id3" target="_self" title="title3"/>
    <area shape="poly" coords="178,438,359,451,591,445,853,421,853,476,592,514,358,525,177,508" class="class2 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id2" target="_self" title="title2"/>
    <area shape="poly" coords="177,508,358,525,591,514,824,480,823,534,593,584,359,596,176,571" class="class1 {fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:false}" id="id1" target="_self" title="title1"/>
  </map>

PS If there is detailed documentation (in Russian) about the creation of this kind of map, I will be happy to provide a link. I tried to do it with Raphael, but I didn't understand the documentation.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question