imagemap - Multiple "coordinate rings" for HTML image maps -


currently, develop html image maps several regions , wonder if possible create single area tag multiple coordinate rings @ once (for example if 1 region contains islands).

as use mouseover js-highlighting effects, these multiple rings must seperatly, want them highlight @ same time when hovering mouse without highlighting regions between these rings (sounds complicated, therefore see this image). , of course should same hyperlink.

i hope, described problem understandible enough. in advance!

my current code (three islands , 3 area tags => i'd 1 area tag):

<html>   <head>     <meta charset="utf-8">     <title>jquery maphilight documentation</title>     <script type="text/javascript" src="jquery-3.1.0.min.js"></script>     <script type="text/javascript" src="jquery.maphilight.min.js"></script>     <script type="text/javascript">         $(function () {         $('.map').maphilight();         });     </script>   </head>   <body>     <img src="full_sliced.png" "width="auto" height="auto" alt="karte" usemap="#simple" class="map">     <map name="simple">     <area href="#" shape="poly" alt="link" data-maphilight='{"strokecolor":"ffdead","strokewidth":0.1,"fillcolor":"eb9947","fillopacity":1}' title="test contour"     coords ="21,226,22,225,24,225,25,226,26,226,27,227,27,231,25,233,25,235,23,237,22,237,22,240,21,241,21,243,19,245,18,245,15,242,15,241,14,241,13,240,11,240,10,239,7,239,6,238,6,233,7,232,8,232,9,231,11,233,13,233,14,232,15,232,17,230,17,229,20,226,">     <area href="#" shape="poly" alt="link" data-maphilight='{"strokecolor":"ffdead","strokewidth":0.1,"fillcolor":"eb9947","fillopacity":1}' title="test contour"     coords ="307,150,308,149,309,149,314,154,314,171,312,173,312,178,313,179,312,180,312,183,311,184,311,185,310,186,310,188,309,189,310,190,308,192,308,193,305,196,303,196,302,197,301,197,300,198,295,198,294,199,292,199,291,200,290,200,289,201,286,201,286,202,283,205,283,206,281,208,280,208,280,210,279,211,274,211,273,210,271,210,270,209,269,209,268,208,267,208,266,209,265,209,264,208,264,206,266,204,271,204,272,203,273,203,274,202,276,202,278,200,279,200,284,195,284,193,285,192,285,186,288,183,288,179,289,178,289,177,293,173,293,171,295,169,295,167,296,166,296,165,297,164,297,161,298,160,298,159,299,158,299,157,298,156,298,155,302,151,304,151,305,150,">     <area href="#" shape="poly" alt="link" data-maphilight='{"strokecolor":"ffdead","strokewidth":0.1,"fillcolor":"eb9947","fillopacity":1}' title="test contour"     coords ="199,198,200,197,201,197,202,198,202,210,203,210,204,211,204,216,205,217,205,220,204,221,204,226,203,227,203,228,199,232,197,232,196,233,195,233,194,234,191,234,190,235,188,235,187,236,184,236,183,235,182,235,181,234,180,234,172,226,172,224,170,222,170,214,172,212,172,211,173,210,175,210,178,207,178,206,179,205,179,201,180,200,180,199,181,198,182,198,183,199,185,199,186,200,195,200,196,201,197,201,199,199,">   </body> </html>


Comments

Post a Comment

Popular posts from this blog

php - How to add and update images or image url in Volusion using Volusion API -

actually have store importing products store product data insert , update image or image url not insert , update. this xml code name datapro.txt. <products_joined> <productcode>3710_012t</productcode> <vendor_partno>eah5450silent/di/1gd3(lp)</vendor_partno> <productname>test product ta</productname> <hideproduct>n</hideproduct> <stockstatus>20</stockstatus> <lastmodified>1/5/2016 10:25:00 am</lastmodified> <lastmodby>2</lastmodby> <productweight>0.9</productweight> <productprice>100</productprice> <productmanufacturer>asus tek</productmanufacturer> <vendor_price>32.69</vendor_price> <numproductssharingstock>0</numproductssharingstock> <categoryids>107</categoryids> <producturl>http://tebkq.mvlce.servertrust.com/productdetails.asp?productcode=3710_012t</producturl>
Read more

javascript - IE9 error '$'is not defined -

Image
<!--[if lte ie 9]><html class="lte9"><![endif]--><!--[if gt ie 9]><html><![endif]--> <!--[if !ie]><!--> <html> <!--<![endif]--> blah blah <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="{{ asset('js/mypage.js') }}" type="text/javascript"></script> </body> </html> when load page, ie9 brings error '$' not defined . how can solve error? +++ mypage.js $(function(){ //when load page, //ie9 tag not moving. $(window).load(function() { $('div.mask').hide(); }); // when click , willshow show. //for not ie 9 if (!$('html').hasclass('lte9')) { var = $('ul.about > li > span.activebtn');
Read more