1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
|
<HTML>
<HEAD>
<SCRIPT>
// Thanks to http://snipplr.com/view/36398/ for the basis of this function
function area_resize(areaId, baseWidth, baseHeight, baseCoords, newWidth, newHeight)
{
var newCoords = "";
var baseCoordsArray = baseCoords.split(",");
for (var i = 0; i < baseCoordsArray.length; i+=2)
{
newCoords += (newWidth * parseFloat(baseCoordsArray[i])) / baseWidth;
newCoords += ",";
newCoords += (newHeight * parseFloat(baseCoordsArray[i+1])) / baseHeight;
newCoords += ",";
}
document.getElementById(areaId).coords = newCoords;
}
// recompute top-left, top-right, bottom-left and bottom-right maps for the specified picture
// mapping association : (0,0)-(1,1) <-> (0,0)-(width,height)
function resizemaps(img)
{
var w = document.getElementById(img).width;
var h = document.getElementById(img).height;
area_resize('tl', 1.0, 1.0, "0,0,0.5,0.5", w, h);
area_resize('tr', 1.0, 1.0, "0.5,0,1,0.5", w, h);
area_resize('bl', 1.0, 1.0, "0,0.5,0.5,1", w, h);
area_resize('br', 1.0, 1.0, "0.5,0.5,1,1", w, h);
}
</SCRIPT>
</HEAD>
<BODY onLoad="resizemaps('myimg')" onResize="resizemaps('myimg')" >
<DIV id="mydiv" >
<map name="mymap">
<area id="tl" shape="rect" coords="0,0,30,30" href="topleft.html" alt="TopLeft" target="tl" >
<area id="tr" shape="rect" coords="30,0,60,30" href="topright.html" alt="TopRight" target="tr" >
<area id="bl" shape="rect" coords="0,30,30,60" href="bottomleft.html" alt="BottomLeft" target="bl" >
<area id="br" shape="rect" coords="30,30,60,60" href="bottomright.html" alt="BottomRight" target="br" >
</map>
<img src="rainbow.gif" usemap="#mymap" width="100%" height="100%" id="myimg" >
</DIV>
</BODY>
</HTML> |
Partager