2

My images stop being responsive after I enable maphilight.

First I made the imagemaps responsive with rwdImageMaps.js, works fine. But after I enable maphilight the images themselves stop being responsive. (The imagemaps stay responsive though.)

From chrome inspect: without maphilight, With maphilight.

You can see that maphilight.js changes the image with from 100%, responsive to a div with a fixed with and height. How can I make the image / div responsive again? (I also tried ImageMapster but that resulted in the same issue.)

Can somebody help me solve this? Thanks in advance! ;)

Ludo
  • 115
  • 4
  • 14
  • The scaling is working fine now, exept the maphilights. Using the jQuery-maphilight.js from andensolutions not even the default behavior shows. Even though I put a data-maphilight in the area with a fillcolor. – Ludo Nov 24 '14 at 08:26

2 Answers2

3

Please check this link. Responsive image maps with roll-overs

Please also note that you might need to reduce the opacity of your image if it's not transparent, for the solution to work properly

Kıvanç Sahici
  • 300
  • 2
  • 8
  • Sweet it works! Thanks But what would be the best order of the scripts, map_rollover.js as last since that uses both img[usemap]maphilight and rwdImageMaps. Or their written div_offset script block ? – Ludo Nov 24 '14 at 07:55
  • First rwdImageMaps.js, second maphilight.js and finally map_rollover.js would be the correct order – Kıvanç Sahici Nov 24 '14 at 11:33
  • @EtienneMartin I checked http://emartin.ca/mapify/ as it is said that it is responsive but I checked this in iphone 6 plus, the image map is not shrinking to fit to the window – Sukhjinder Singh Aug 10 '16 at 16:07
  • @sukhjinder-singh This is to demonstrate the scrolling effect with the popovers. Simply remove the min-width from the css to change that. – Etienne Martin Aug 11 '16 at 14:06
0

Have you tried to use the library jquerymobile 2.1.1 ? I had the same problem and this worked for me

Jolan
  • 1