hey guys, I'm not the quickest running in the race, but I'm slowly learning JavaScript.

I'm attempting to use the jQuery iviewer to control the viewing of images. I'm essentially making my own slideshow.

In any event, I'm trying to tag a map along with the image. The only way I know of doing this is with standard markup doing usemap="#map_name".

so here's my JavaScript code, and the HTML to follow.

Code:
Code:
 var $ = jQuery;
            $(document).ready(function(){
                  $("#viewer").iviewer(
                       {
                       src: "images/page11.jpg", 
                       update_on_resize: false,
                       initCallback: function ()
                       {
                           var object = this;
                           $("#in").click(function(){ object.zoom_by(1);}); 
                           $("#out").click(function(){ object.zoom_by(-1);}); 
                           $("#fit").click(function(){ object.fit();}); 
                           $("#orig").click(function(){  object.set_zoom(100); }); 
                           $("#update").click(function(){ object.update_container_info();});
                       },
                       onMouseMove: function(object, coords) { },
                       onStartDrag: function(object, coords) { return false; },
                       onDrag: function(object, coords) { } 
                  });

                  $("#viewer2").iviewer(
		      {
		      src: "images/page11.jpg",
		      update_on_resize:false,
		      initCallBack: function ()
		      {
		      document.images[0].useMap = "#map1";
		      }
		 });
            });
And the 'scaler'

Code:
Code:
function scalecoordimages(elImage, amount){
        var elMap = getMap(elImage)
        elImage.width *= amount;
        elImage.height *= amount;
        if (null != elMap){
           for (var intLoop = 0; intLoop < elMap.areas.length;
                   intLoop++)  {
               var elArea = elMap.areas[intLoop];
               var coords = elArea.coords.split(",");
               var scaledCoords = "";
               for (coords in coords) {
                    scaledCoords += (coords[coord] * amount) + ",";
               }

                elArea.coords = scaledCoords;
             }
        }
    }
and now the HTML where this is all delivered.

Code:
Code:
<div class="wrapper">
      <div id="viewer2" class="viewer" style="margin: 50px auto;"></div>
</div>
the 'wrapper' is because in Safari the overflow doesn't hold properly and breaks.

the Map is just rectangles...it's below >

Code:
Code:
<map name="map1" id="map1">
                        <area class="hotspot" shape="rect" coords="105, 1110, 371, 1125" href="" onMouseOver="tooltip.show('<ul>Northeast States:<br /><li>Connecticut</li><li>Maine</li> <li>Massachusetts</li><li>New Hampshire</li><li>Rhode Island</li><li>Vermont</li><li>New Jersey</li><li>New York</li><li>Pennsylvania</li></ul>');" onMouseOut="tooltip.hide();" >	
                        
                        <area class="hotspot" shape="rect" coords="105, 1135, 371, 1150" href="" onMouseOver="tooltip.show('<ul>Midwest States:<br /><li>Indiana</li><li>Illinois</li><li>Michigan</li><li>Ohio</li><li>Wisconsin</li><li>Iowa</li><li>Kansas</li><li>Minnesota</li><li>Missouri</li><li>Nebraska</li><li>North Dakota</li><li>South Dakota</li></ul>');" onMouseOut="tooltip.hide();"></area>
                        
                        <area class="hotspot" shape="rect" coords="105, 1160, 371, 1175" href="" onMouseOver="tooltip.show('<ul>Southern States:<br /><li>Delaware</li><li>Florida</li><li>Georgia</li><li>Maryland</li><li>North Carolina</li><li>South Carolina</li><li>Virginia</li><li>West Virginia</li><li>Alabama</li><li>Kentucky</li><li>Mississippi</li><li>Tennessee</li><li>Arkansas</li><li>Louisiana</li><li>Oklahoma</li><li>Texas</li></ul>');" onMouseOut="tooltip.hide();"></area>
                         
                        <area class="hotspot" shape="rect" coords="105, 1185, 371, 1200" href="" onMouseOver="tooltip.show('<ul>Western States:<br /><li>Arizona</li><li>Colorado</li><li>Idaho</li><li>New Mexico</li><li>Montana</li><li>Utah</li><li>Nevada</li><li>Wyoming</li><li>Alaska</li><li>Californai</li><li>Hawaii</li><li>Oregon</li><li>Washington</li></ul>')" onMouseOut="tooltip.hide();"></area>                    
                    </map>
Any help is appreciated. Thank you.