Image Maps resized using jQuery

embalse · 6 Sep 2013 at 17:15

I am building a site using HTML5/jQuery

Part of the site I am using this Plugin jQuery RWD Image Maps
https://github.com/stowball/jQuery-rwdImageMaps

It creates responsive Image Maps that allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize.

Example
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

It works exactly how I need it to. The only problem is it makes the text and image sit to the left and the rest of my site is centred.

If I fix the problem and centre the text/image. All is good until I try and resize the page whereupon all the maps become out of line with the image.

Any pointers appreciated.

GravyMonster · 6 Sep 2013 at 17:21

Is there a reason you're using an image map? Is there no better method you can use?

embalse · 6 Sep 2013 at 17:44

At the moment I have 16 individual images in 4 columns that link to other pages..

This works, but when I re-size horizontally, instead of getting smaller the images move to create less columns until there is a single long column.

My solution was to create a singe image then...
Put the image/text on a re-sizable page. On the image put Map/Area tags that when clicked on link to other pages.

If you can suggest a better way please do as I am sure there are.

hellodave · 6 Sep 2013 at 18:31

In the example you link to, the area maps are pretty complex, are yours?
If they are just rectangles then maybe you could use normal links absolutely positioned over the image.
Just set the margins and width as percentages and they should resize with the image.
They will also need display block and background-color transparent.

embalse · 6 Sep 2013 at 18:48

hellodave said:
In the example you link to, the area maps are pretty complex, are yours?
If they are just rectangles then maybe you could use normal links absolutely positioned over the image.
Just set the margins and width as percentages and they should resize with the image.
They will also need display block and background-color transparent.

Thanks for the reply.
Yes they are simple rectangles.

.

hellodave · 6 Sep 2013 at 19:05

Thought I'd give it a go, see if it works, not sure if this is exactly what you want, but it might give you a few ideas -

http://jsfiddle.net/hellodave/dFByp/

embalse · 6 Sep 2013 at 19:11

hellodave said:
Thought I'd give it a go, see if it works, not sure if this is exactly what you want, but it might give you a few ideas -

http://jsfiddle.net/hellodave/dFByp/

Hey! Thanks a bunch.

That's what I was looking for.

.

hellodave · 6 Sep 2013 at 19:30

Glad to help