动态调整图像映射的大小？

Question

希望你能帮我解决这个问题，我一直试图坚持下去。

我发现http://home.comcast.net/~urbanjost/semaphore.html上的示例非常棒，可以完美地满足我的需求。

唯一的问题是我希望首先根据窗口大小动态改变坐标。它目前的工作方式是它加载默认的coords（适用于1920x1080的分辨率但在1024x768上非常不对齐）然后会在窗口调整大小时调整大小..我希望它能够检测浏览器窗口的大小首先对于较小的屏幕，然后相应地显示代码。

这是我的javascript：

<script type="text/javascript" >
//|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||    |||||||||||||||||||||||||||||||||||||||||
 GLOBAL_AREAS= new Array();
 GLOBAL_SUFFIX= "g";
 GLOBAL_WIDTH=-1;
 GLOBAL_HEIGHT=-1;
 GLOBAL_NEW_AREAS= new Array();

//---------------------------------------------------------------------------
 function setglobal(){
    // place original AREA coordinate strings into a global array, called first time setXY is called
    var arrayAreas = document.body.getElementsByTagName("AREA" );
    GLOBAL_WIDTH= document.getElementById("tclteam_s1" ).width; // get original width
    GLOBAL_HEIGHT= document.getElementById("tclteam_s1" ).height; // get original height
    for(var i = 0; i < arrayAreas.length; i++) {
       GLOBAL_AREAS[i]= arrayAreas[i].coords;
    }
    document.body.onresize=setXY('tclteam_s1',XSIZE(),YSIZE());
    // alert("GLOBAL_AREAS" + GLOBAL_AREAS );
 }
//---------------------------------------------------------------------------

 function setXY(elementid,newwidth,newheight){
    if (GLOBAL_WIDTH == -1 ){
       setglobal();
    }
    document.getElementById(elementid).width=newwidth;
    document.getElementById(elementid).height=newheight;
    scaleArea();
 }
//---------------------------------------------------------------------------

 function XSIZE(){ // get browser window.innerWidth , dealing with ie
    var myWidth = 1;
    if( typeof( window.innerWidth ) == 'number' ) {
       //Non-IE
       myWidth = window.innerWidth;
    } else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
       //IE 6+ in 'standards compliant mode'
       myWidth = document.documentElement.clientWidth;
    } else if( document.body && ( document.body.clientWidth ) ) {
       //IE 4 compatible
       myWidth = document.body.clientWidth;
    }
    return myWidth;
 }
//---------------------------------------------------------------------------

 function YSIZE(){ // get browser window.innerHeight, dealing with ie
    var myHeight = 1;
    if( typeof( window.innerHeight ) == 'number' ) {
       //Non-IE
       myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientHeight ) ) {
       //IE 6+ in 'standards compliant mode'
       myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientHeight ) ) {
       //IE 4 compatible
       myHeight = document.body.clientHeight;
    }
    return myHeight;
 }

//---------------------------------------------------------------------------
 function scaleArea() { // using values stored at load, recalculate new values for the     current size
    var arrayAreas = document.body.getElementsByTagName("AREA" );
    message = " "
    for(var i = 0; i < arrayAreas.length; i++) {
       ii=i+1;
       rescaleX= document.getElementById("tclteam_s1" ).width/GLOBAL_WIDTH ;
       rescaleY= document.getElementById("tclteam_s1" ).height/GLOBAL_HEIGHT ;
       sarray=GLOBAL_AREAS[i].split("," ); // convert coordinates to a numeric array assuming comma-delimited values
       var rarray =new Array();
       for(var j = 0; j < sarray.length; j += 2) {
          rarray[j]=parseInt(sarray[j])*rescaleX; // rescale the values
          rarray[j]=Math.round(rarray[j]);
          rarray[j+1]=parseInt(sarray[j+1])*rescaleY; // rescale the values
          rarray[j+1]=Math.round(rarray[j+1]);
       }
       message = message + rarray.join("," ) + '\n';
       arrayAreas[i].coords=rarray.join("," ); // put the values back into a string
       GLOBAL_NEW_AREAS[i]= arrayAreas[i].coords;
    }
    // alert(rescaleX + " " + rescaleY + "\n" + GLOBAL_WIDTH + " " + GLOBAL_HEIGHT + "\n" + " GLOBAL_AREAS" + GLOBAL_AREAS + "\nSCALED AREAS" + message);
 }
//||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</script>

此处的以下脚本会检测浏览器窗口大小。所以我希望在上面包含这个，所以图像映射将首先从浏览器窗口大小动态调整大小：

<script type="text/javascript">
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
</script>

有没有办法对此进行编码，以便首先读取浏览器窗口大小（使用上面的代码），然后相应地加载图像映射？