Problems using imagemaps with responsive images.

Events happening in the community are now at Drupal community events on www.drupal.org.
mrpauldriver's picture

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?

Comments

I would suggest not using

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).

That's not a technique I'm

mrpauldriver's picture

That's not a technique I'm familiar with. Time to get reading!

Thank you

@MrPaulDriver

This is quite a clever

samwillc's picture

This is quite a clever technique:

http://www.cssplay.co.uk/articles/imagemap/

Sam.

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: