SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Rollover Error

    This is probably a common problem and an easy fix. My rollover effects are working perfectly fine in Firefox (of course), but neither IE or Safari. If someone can see any obvious errors or issues that I might be facing please let me know.

    Head:
    Code JavaScript:
    <script type="text/JavaScript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
     
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
     
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
     
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>

    Body:
    Code JavaScript:
    <body onLoad="MM_preloadImages('avi/images/Menu-Main.png','avi/images/Menu-Home.png','avi/images/Menu-Samples.png','avi/images/Menu-Pricing.png','avi/images/Menu-Testimonials.png','avi/images/Menu-Faqs.png','avi/images/Menu-Contact.png')">
     
    <map name="Map">
      <area shape="rect" coords="-1,10,197,155" href="avi/" target="_self" alt="Home" onMouseOver="MM_swapImage('Image1','','avi/images/Menu-Main.png',1)" onMouseOut="MM_swapImgRestore()">
      <area shape="circle" coords="274,82,62" href="avi/" target="_self" alt="Home" onMouseOver="MM_swapImage('Image1','','avi/images/Menu-Home.png',1)" onMouseOut="MM_swapImgRestore()">
      <area shape="circle" coords="407,85,62" href="avi/samples/" target="_self" alt="Samples" onMouseOver="MM_swapImage('Image1','','avi/images/Menu-Samples.png',1)" onMouseOut="MM_swapImgRestore()">
      <area shape="circle" coords="540,85,62" href="avi/pricing/" target="_self" alt="Pricing" onMouseOver="MM_swapImage('Image1','','avi/images/Menu-Pricing.png',1)" onMouseOut="MM_swapImgRestore()">
      <area shape="circle" coords="671,84,62" href="avi/testimonials/" target="_self" alt="Testimonials" onMouseOver="MM_swapImage('Image1','','avi/images/Menu-Testimonials.png',1)" onMouseOut="MM_swapImgRestore()">
      <area shape="circle" coords="805,84,62" href="avi/faqs/" target="_self" alt="FAQS" onMouseOver="MM_swapImage('Image1','','avi/images/Menu-Faqs.png',1)" onMouseOut="MM_swapImgRestore()"> 
      <area shape="circle" coords="937,83,62" href="avi/contact/" target="_self" alt="Contact" onMouseOver="MM_swapImage('Image1','','avi/images/Menu-Contact.png',1)" onMouseOut="MM_swapImgRestore()">
    </map>
     
    <img src="avi/images/Menu.png" alt="Menu" border="0" usemap="Map" id="Image1" onMouseOver="MM_swapImage('Image1','','avi/images/Menu.png',1)" onMouseOut="MM_swapImgRestore()">

  2. #2
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Before anyone mentions it. I understand that I can use CSS rollovers, but at this point it would just be easier to fix the JavaScript.

  3. #3
    SitePoint Member Ofer80's Avatar
    Join Date
    Dec 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have the same trouble... any solutions?

  4. #4
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I feel kind of ridiculous now. Here is the fix (for me anyways):

    Change the last part of the the Body example that I've shown from:
    Code JavaScript:
    <img src="avi/images/Menu.png" alt="Menu" border="0" usemap="Map" id="Image1" onMouseOver="MM_swapImage('Image1','','avi/images/Menu.png',1)" onMouseOut="MM_swapImgRestore()">

    to:
    Code JavaScript:
    <img src="avi/images/Menu.png" alt="Menu" border="0" usemap="#Map" id="Image1">

    As a side note, I prefer to code by hand most of the time, but when it comes to hotspots for rollover links it's next to impossible to free hand it so I use Dreamweaver. The problem with Dreamweaver is that it is indeed just an automated program and not a perfect science so if it has error's in the code and you don't detect it early on you'll have to get in there and find it yourself.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •