Problem using multiple images using SRCSET and dedicated USEMAP's for responsive design

[PdW]

Hi there!

 

I have made 4 images for the mobile version of my website’s Homepage. Each image is optimized for a certain size of mobile device. I do not want to use a single image and have it resized automatically, as I want to make optimal use of the space available. Each image consists of different areas, linking to different internal or external webpages (an image map). So the idea was to simply connect a USEMAP to each specific IMAGE as you can see below. However when I implemented this, all 4 images use the coordinates of the first USEMAP resulting in wrong linking. Can anybody please help me to link each picture to the right USEMAP?

 

<IMG SRC="images/picture1.jpg" USEMAP="#picture1_Map"

srcset="images/picture2.jpg 320w" USEMAP="#picture2_Map"

srcset="images/picture3.jpg 375w" USEMAP="#picture3_Map"

srcset="images/picture4.jpg 414w" USEMAP="#picture4_Map">

[dsonesuk]

IF i remember right all the different images with their size required for that image are stored in one single attribute value of srcset, and you are going to use image map, i should look for plugin/jquery, which I'm sure I've seen, that adjusts to responsive image size.

[PdW]

Hi dsonesuk,

 

Can you be more specific what to look for, right now I have no clue to be honest

[dsonesuk]

The problem with 'srcset' i found early this year was that it is not fully supported for desktop browsers or mobile browsers, so you cannot guarantee the look would be consistent within these browser, so you would probably have to come up with a work around that would not be beneficial involving 'srcset' and another involving probably a jquery/@media query solution, then you would have to update these when finally the srcset attribute become supported. So it was felt it would be better to use decent quality image that would be controlled by @media queries that would adjust image to requirements, whether it be full width screen image, or shrunk down to 50% width on the odd occasion.

 

You set the sizes using

 

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"> (from https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/)

 

The image map problem ,where you require the coordinates used for image map to react responsively to image shrinkage and enlargement , was fixed by using a jquery plug-in, (name escapes me, sorry! just google).