I'm trying to resize an image map on window resize event. The closest I've gotten is to use a mouseclick event, but it needs to be window resize for what I'm doing. I'm using Firefox 3.5.5
I'm using jquery somewhat. Here's my example - the area button I want to resize on window resize is in the top left (click on it to resize map and area button):
http://www.whitebrickstudios.com/foghornstour/imagemap3.html
Any help would be appreciated! Thank you, Rich
I wrote some simple function to rebuild all map points on every event. Try this
function mapRebuild(scaleValue) {
var map = $("#imgmap"); // select your map or for all map you can choose $("map").each(function() { map = $(this);.....})
map.find("area").each(function() { // select all areas
var coords = $(this).attr("coords"); // extract coords
coords = coords.split(","); // split to array
var scaledCoords = "";
for (var coord in coords) { // rebuild all coords with scaleValue
scaledCoords += Math.floor(coords[coord] * scaleValue) + ",";
}
scaledCoords = scaledCoords.slice(0, -1); // last coma delete
$(this).attr("coords", scaledCoords); // set new coords
});
}
scaleValue can be calculated as oldWindowWidth/newWindowWidth. Of course you need to keep the value of oldWindowWidth on window resize. Maybe my solution not on time, but i hope this is useful to someone
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With