CODEWITHSUNDEEP
jquerycssmapsresolution
Hepburn3D
Hepburn3D

Reputation: 188

Image Area Map at multiple resolutions i.e. hotspots in x y coordinates

I'm using an Area Map over my image to allow users to select points which perform various JavaScript functions.

The coordinates of the shapes are hard coded into the html page as this allows my script to work on various pages. Unfortunately I now need to have the page work at various resolutions, which also requires that the picture scale as a percentage of the parent Div (no work around on this, customer requirement).

As area maps uses coordinates and percentages aren't yet supported I was wondering what the best approach to this should be?

The only options I can think of are:

  1. Create Div's for each point based on the html and % place them
  2. Pass the coordinates into the JavaScript and work out their % based on the current screen size, then convert them back into coordinates.
  3. Ask the inter webs and pray somebody has encountered this and found a genius solution :)

Upvotes: 1

Views: 1660

Answers (1)

Florian Haider
Florian Haider

Reputation: 1912

You could do some coordinate recalculations in javascript on page load and on window.resize. With jQuerys width() and height() functions you can get the current image size, divide it by the width and height of the parent div and apply these factors to your image map coordinates.

I think that's basically what this jQuery plugin does (not tested!): http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Another solution would be to use CSS transforms (if you don't care for legacy browser support ;-)). You could check for the current document.width() and document.height() values and then apply a scale value to the img and the map tag.

Upvotes: 2

Related Questions