Question

132

Dynamically resizing Image-maps and images

rated 0 times [ 138] [ 6] / answers: 1 / hits: 99861 / 12 Years ago, sat, november 10, 2012, 12:00:00

I'm currently trying to make an Image-Map on my site that will resize depending on the size of the window... I was wondering if there was anyway to do this with HTML or will I have to do this with Javascript or another language.

<div style=text-align:center; width:1920px; margin-left:auto; margin-right:auto;>

<img id=Image-Maps_5201211070133251 src=Site.png usemap=#Image-Maps_5201211070133251 border=0 width=1920 height=1080 alt= />

<map id=_Image-Maps_5201211070133251 name=Image-Maps_5201211070133251>

<area shape=poly coords=737,116,1149,118,944,473, href=http://essper.bandcamp.com alt=Bandcamp title=Bandcamp   />

<area shape=poly coords=1006,589,1418,590,1211,945, href=http://soundcloud.com/essper alt=Soundcloud title=Soundcloud   />

<area shape=poly coords=502,590,910,591,708,944, href=http://facebook.com/the.essper alt=Facebook title=Facebook   />

</map>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

loganl

Add To Favorites

Follow

Total Points: 424

Total Questions: 86

Total Answers: 112

Location: Zimbabwe

Member since Thu, Jul 21, 2022

2 Years ago

loganl questions

1 Is there an easier way to display live time and date in HTML using bootstrap?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 Angular View Component Data Loss during Reload Refresh using BehaviorSubject

Tue, Mar 24, 20, 00:00, 4 Years ago

1 What is the best way to use async/await inside onAuthStateChanged() of Firebase?

Thu, Jun 13, 19, 00:00, 5 Years ago

1 'Symbol' is undefined in IE 11

Sun, Apr 14, 19, 00:00, 5 Years ago

1 CSS: Add border with animation left to right | right to left

Thu, Feb 21, 19, 00:00, 5 Years ago

View All

answered 12 Years ago ibrahimr · Accepted Answer

If you end up to do the task with JavaScript, here is a cross-browser codesnippet to resize all areas in MAP element.

window.onload = function () {

    var ImageMap = function (map) {

            var n,

                areas = map.getElementsByTagName('area'),

                len = areas.length,

                coords = [],

                previousWidth = 1920;

            for (n = 0; n < len; n++) {

                coords[n] = areas[n].coords.split(',');

            }

            this.resize = function () {

                var n, m, clen,

                    x = document.body.clientWidth / previousWidth;

                for (n = 0; n < len; n++) {

                    clen = coords[n].length;

                    for (m = 0; m < clen; m++) {

                        coords[n][m] *= x;

                    }

                    areas[n].coords = coords[n].join(',');

                }

                previousWidth = document.body.clientWidth;

                return true;

            };

            window.onresize = this.resize;

        },

        imageMap = new ImageMap(document.getElementById('map_ID'));

    imageMap.resize();

}

previousWidth must be equal to the width of the original image. You also need to use some relative units in HTML:

<div style=width:100%;>

<img id=Image-Maps_5201211070133251 src=Site.png usemap=#Image-Maps_5201211070133251 border=0 width=100% alt= />

Working demo at jsFiddle. If you open the fiddle in IE, you can actually see AREAs when clicking them.