JavaScript - How To Solve This...

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:

 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:

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:

<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:

<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.

This is very basic yet i can find the answer. How do you stop a countdown function?

Please Check the webpage to see what I am trying to do. I am told It cant be done in HTML. That I will have to use Java Script. Can someone Please help me out here. Go to:

http://www.capthelm.net

If You can assist me please use the email link on my site.
Thanks.

The Captain

The following code is needed for the prettyphoto javascript popup. It works fine in Firefox and Safari, but not in any version of IE. Can anyone suggest why?

<script>
jQuery.noConflict();
$(document).ready(function(){
jQuery("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

I have a form and the Js validation wont work on it. Here is the html




PHP Code:
    <form name="frm" action="index.php" method="POST" onsubmit="return validateForm();">
                            <table width="100%" border="0" cellspacing="2" cellpadding="3"  class="mainForm">
                                <tr>
                                <td class="normalText" align="left" style="padding:0px 0px 0px 33px">
                                    <table border="0" cellspacing="3" cellpadding="2">
                                        <tr>
                                            <td class="normalHeading" colspan="2" style="padding-bottom:6px">
                                    
                                                <div id="error_msg" class="txtErrorMsg" align="center"></div>
                                        <!--        <?php echo "<p id=\"error_msg\">".$message."</p>"?> -->
                                            </td>
                                        </tr>
                                        <tr >
                                            <td class="normalText" width="30%">First Name</td>
                                            <td><input type="text" name="firstName" id="firstName"  class="input1" style="width:195px" maxlength="10"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Last Name</td>
                                            <td><input type="text" name="lastName" id="lastName" class="input1" style="width:195px" maxlength="10"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Mobile</td>
                                            <td><input type="text" name="mobile"  id="mobile" class="input1"  style="width:195px" maxlength="10" onkeypress="return fnIsIntNumber(event,this);"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Email</td>
                                            <td><input type="text" name="email" id="email" class="input1"  style="width:195px" onblur="IsEmail(this.vlaue)"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Comments</td>
                                            <td>
                                                <textarea name="comments" id="comment" cols="22" rows="3" ></textarea>    
                                            </td>
                                        </tr>
                                        
                                        <tr>
                                            <td class="normalText">&nbsp;</td>
                                            <td valign="middle"><input class="send" type="image" value='submit' src="images/submit.gif" name="submit" /></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        </form>

and here is the JS

PHP Code:
var $j = jQuery.noConflict();
    function isValidEmail(str) {
       return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
    }
    function validateForm(){
            var firstName;
            var lastName;
            var email;
            var mobile;
            var comment;
            var error;
            
            firstName = $j('#firstName').val();
            lastName = $j('#lastName').val();
            email = $j('#email').val();
            mobile = $j('#mobile').val();
            comment = $j('#comment').val();
            if(firstName=='' || firstName.length < 3){
                error = 'Please Enter Your First Name';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            if(lastName=='' || lastName.length < 3){
                error = 'Please Enter Your Second Name';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            if(email=='' || !isValidEmail(email)){
                error = 'Please Enter Your Correct Email';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            //mob
            //$jmob_pattern = '^\d{10}$j';
            if(mobile.length != 10 || isNaN(mobile)){
                error = 'Please Enter Your Correct Mobile Number';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            
            
            if(comment.length < 10){
                error = 'Please Enter A Comment More Than 10 Characters';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            return true;
    } 


Can anybody tell me what the problem is