responsive image with maphilight.js

image github map imagemap imagemapster
Ludo picture Ludo · Nov 23, 2014 · Viewed 7k times · Source

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! ;)

Answer

Kıvanç Sahici picture Kıvanç Sahici · Nov 23, 2014

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

Related questions

Images not displaying in Github Pages?

I added a project site to my Github project. But some photos are not displaying in the site. Img code: <img src="img/screenshot2.PNG" class="img-responsive" alt=""> </div> folder structure (img is a folder): img …

Read More
Upload images to GitHub from the browser

I am using GitHub Pages, Jekyll, and Prose to manage a Website. Everything works fine, besides I cannot find a way to upload images. The Prose image uploader is not working probably as discussed in various tickets (for instance here). …

Read More
Zoomable image in markdown

I am embedding a large image on github wiki. But it turns to be unreadable due to its size. Is it possible to make an image zoomable in markdown language? Specifically, on github wiki? Thank you.

Read More