Responsive images with srcset

mprofitlich commented 5 years ago

Issue #41 was similar and got closed but I could not find a solution yet, although the closing comment states a PR had a fix.

I understand the script expects the image to be at the image map's size. If that's not the case the scale calculated factor is wrong. I accept to loose some automation and I added data attributes to the image map that give the original size.

// Image Map in HTML with data attributes
<map name="map-name" data-map-width="950" data-map-height="690">

// var scalingFactor
width  : image.width  / mapOriginalWidth,
height : image.height / mapOriginalHeight

// function setup
mapOriginalHeight     = map.getAttribute("data-map-height");
mapOriginalWidth      = map.getAttribute("data-map-width");

// var
mapOriginalHeight = null,
mapOriginalWidth = null;

davidjbradshaw commented 5 years ago

Those data attributed are not supported, why not just resize the image in PhotoShop? Or calculate the map coordinates from the actual size of the image?

mprofitlich commented 5 years ago

On which image the script bases its calculation when using srcset? Here's a usecase:

<img src="/slir/w100/bilder/imagename.jpg"
    usemap="#image-map"
    srcset="
        /slir/w400/bilder/imagename.jpg 400w,
        /slir/w600/bilder/imagename.jpg 600w,
        /slir/w1000/bilder/imagename.jpg 1000w,
        /slir/w1500/bilder/imagename.jpg 1500w,
        /slir/w2000/bilder/imagename.jpg 2000w,
        /slir/w3000/bilder/imagename.jpg 3000w,
        /slir/w4000/bilder/imagename.jpg 4000w,
        /slir/w5000/bilder/imagename.jpg 5000w,
        /slir/w5500/bilder/imagename.jpg 5500w,
        "
    sizes="100vw"
>

The images are calculated by an image resizer automatically. Does the script use the src chosen by the browser or the normal src tag? If it uses the normal src then I redraw my issue. It would then be helpful to add this information to the documentation, for example:

Responsive Images (srcset) The script calculates the imagemap based on the dimensions of the image given by the normal src attribute. This image needs to have the same dimensions as used for the creation of the imagemap.

davidjbradshaw / image-map-resizer

Responsive images with srcset #77