Search code examples
jqueryhtmlmobilescaleimagemap

Scale Image Maps with Jquery


So I've this problem. I'm new to programming, keep that in mind.

What I'm trying to do: Scale some value in an image map using JQUERY.

What I thought: Image was wrapped at a width that it's its full. That would imply that it's the 100%. So if I take that number and then take the width the viewer is using, I could multiply the values on coord to always be on the track.

Some notes (#mapa is the imagemap I'm using, #content is the general container I'm using as div to have everything together. 515 is the value of the natural width of the image.) What I've done and it's not working:

var width = $('#content').width();
var exp = width * 515;
var mul = exp / 100; //I would do all in one line, but I'm always afraid I mess up.

$("area").each(function() {
var pairs = $(this).attr("coords").split(', ');
for (var i=0; i < pairs.length; i++) {
    pairs[i] = pairs[i] * mul;
    }
$(this).html('coords', pairs.join);
});

So...How any suggestion/advice/plugin? Thanks in advance.


Solution

  • $(this).html('coords', pairs.join);
    

    should be

    $(this).attr('coords', pairs.join(','));