SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    South Africa
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Rollover Problems - Netscape 4.76

    Here's the scenario: I re-did a image map today from being messy and chunky in tables to nice and clean (both code and appearance) in CSS using absolute positioning and nested DIVs. I haven't touched the rollover code but now when I try to run the code in Netscape 4.76, it either crashes or the image map won't work at all. It works beautifully in IE 6.0.

    Here's the rollover code:

    Code:
     
    <script language="JavaScript">
    <!--
    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_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_findObj(n, d) { //v4.0
    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 && document.getElementById) x=document.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>
    ... and here's the HTML & CSS.

    HTML Code:
    <!-- ---- BEGIN: Top Animated Image-based Navigation Menu ------------------- -->
    		<!-- ---------- ------------------------------------------------------------- -->
    		<!-- ---- NOTE: This image map was previously implemented using tables. ---- -->
    		<!-- ---------- It is now implemented using nested DIV tags and absolute --- -->
    		<!-- ---------- positioning.			--- -->
    		<!-- ------------------------------------------------------------------------ -->
     
    		<!-- EXPL: This is the main container that holds the assembled image map. -->
    		<div id="momenu" style="position:absolute;top:0px;left:70px;">
     
    		 <!-- NOTE: Each section of the image map is held in a separate div and -->
    	 <!-- ----- contains JavaScript code to handle the image swapping		 -->
     
    		 <div id="top" style="position:absolute;top:200px;left:250px;">
    	 <a href="fundraising/fundraising.html" 
    		 onMouseOut="MM_swapImgRestore()" 
    		 onMouseOver="MM_swapImage('top','','images/index/banner/origSlices/top.jpg',
    					'top','','images/index/banner/moSlices/top.jpg',1)"> 
    		 <img name="top" src="images/index/banner/origSlices/top.jpg" border="0"> 
    	 </a>
    	 </div>
     
    	 <div id="middle" style="position:absolute;top:235px;left:250px;"> 
    		 <a href="research/research.html" 
    			onMouseOut="MM_swapImgRestore()" 
    			onMouseOver="MM_swapImage('middle','','images/index/banner/moSlices/middle.jpg',1)"> 
    		<img name="middle" src="images/index/banner/origSlices/middle.jpg" border="0"></a> 
    	 </div>
     
    	 <div id="bl" style="position:absolute;top:252px;left:250px;; width: 457px; height: 54px"> 
    	 <a href="programmes/shortcourses.html" 
    			onMouseOut="MM_swapImgRestore()" 
    			onMouseOver="MM_swapImage('bl','','images/index/banner/moSlices/bottomleft.jpg',1)"> 
    		<img name="bl" src="images/index/banner/origSlices/bottomleft.jpg" border="0"></a> 
    	 </div>
     
    	 <div id="br" style="position:absolute;top:252px;left:372px;"> 
    	 <a href="news/news.html" 
    			onMouseOut="MM_swapImgRestore()" 
    			onMouseOver="MM_swapImage('br','','images/index/banner/origSlices/bottomright.jpg',
    					 'br','','images/index/banner/moSlices/bottomright.jpg',1)"> 
    		<img name="br" src="images/index/banner/origSlices/bottomright.jpg" border="0"> 
    	 </a>
    	 </div>
     
    		</div>
    	 <!-- ---- END: Top Animated Image-based Navigation Menu ------------------- -->
    Any ideas?

    Mina.
    Last edited by minademian; Jul 29, 2004 at 01:21.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mina,

    One tip: NN4 doesn't like "inline" styles.

    Maybe later I'll have more time to look a little deeper

    Also...

    try using the ID attribute instead of the NAME attribute on the img elements (or use both).

  3. #3
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there any specific reason you are trying to support NN4? It is an obsolete browser that has severe issues with CSS and almost nobody still uses it. Unless there is a really good reason to support it, I'd recommend not worrying about NN4 and spend that effort on projects that would be of a greater benifit to your site.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    South Africa
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for replying.

    Unfortunately, I can't escape NN4 because it is the standard browser at the university I work for. They do have IE, but people still use NN4. No comment.

    MikeFoster, I'd like to ask.. will using ID instead of NAME help to fix the problem?

  5. #5
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you can lobby the university to change from NN4 to Mozilla Firefox, which is the latest evolution of the Netscape line.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the two suggestions I made above.

    1) no inline styles

    2) use both id and name attributes and give them both the same value - but this depends on MM_findObj (does it actually work in NN4?)


    BTW, KLB has a good suggestion


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
  •