Problems using imagemaps with responsive images.

Events happening in the community are now at Drupal community events on www.drupal.org.

Posted by mrpauldriver on January 20, 2012 at 10:40am

I need to create an imagemap which will allows for various points of an image to be hyperlinked. No problem in itself; very basic html in fact.

For my images, I am using a simple method of specifying a 100% width and letting to browser do the resizing within Omega regions.

A problem does arise however with my responsive layouts when the images are sized down. The hyperlinks break because the coordinates in the imagemap (which are embedded in the html) do not change. The result is that the clickable regions move off to the right and in some case outside the image area altogether.

I guess that browsers should support such action, given that % width has been around a long time, but it seems they do not.

Have any other omega users had to deal with this problem and has anybody solved it?

Categories: imagemaps, omega, responsive images

Comments

I would suggest not using

Posted by jessebeach on January 20, 2012 at 3:39pm

jessebeach's picture

I would suggest not using image maps. Try using links placed absolutely to their parent container (which must be either position absolute or position relative).