SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2005
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS FireFox vs. IE incompatibility...code issue?

    the following code is supposed to change the SRC of an image based on wat page the user is on...this works in IE, but in FF it will load the active tab initially, but when you move your mouse over it and then away, it goes back to its unselected state...no idea why.

    CODE:

    Code:
    function PreLoadNav()
    {
      switch (uri.file){
    	case "index.html": 
    	  homepage.src = "tab_home_selected.jpg";
    	  homepage.onmouseover = "";
    	  homepage.onmouseout = "";
    	  break;
    	case "reserve.html": 
    	  reserve.src = "tab_reserve_active.gif";
    	  reserve.onmouseover = "";
    	  reserve.onmouseout = "";
    	  break;
    	default : alert("Error loading navigation bar.");
      }
    }
    the above is loaded by: <body onload="PreLoadNav();">

    as for the uri.file in the switch statement, dont worry about that since its just javascript that reads the URL and finds out what page you are on.

    then, the above will change the following piece of HTML:

    HTML Code:
    <a href="index.html"><img src="tab_home.gif" id="homepage" border="0" onmouseover="SwapPic(this, 'tab_home_selected.gif')" onmouseout="SwapPic(this, 'tab_home.gif')"></a>
    <a href="reserve.html"><img src="tab_reserve.gif" id="reserve" border="0" onmouseover="SwapPic(this, 'tab_reserve_selected.gif')" onmouseout="SwapPic(this, 'tab_reserve.gif')"></a>
    thanks for the help!

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    London, UK
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My only guess is how FF and IE chose to order the importance of onload and inline event attributes. Clearly there's a difference. Try something like this instead.
    PHP Code:
    function PreLoadNav()
    {
      switch (
    uri.file){
        case 
    "index.html"
          
    homepage.src "tab_home_selected.jpg";
          
    homepage.onmouseover "";
          
    homepage.onmouseout "";
              
    reserve.onmouseover="SwapPic(this, 'tab_reserve_selected.gif')"      
              
    reserve.onmouseout="SwapPic(this, 'tab_reserve.gif')"
          
    break;
        case 
    "reserve.html"
          
    reserve.src "tab_reserve_active.gif";
          
    reserve.onmouseover "";
          
    reserve.onmouseout "";
              
    homepage.onmouseover =...like above...
          break;
        default : 
    alert("Error loading navigation bar.");
      }

    Accompanied by:
    HTML Code:
    <a href="index.html"><img src="tab_home.gif" id="homepage" border="0" ></a> 
    <a href="reserve.html"><img src="tab_reserve.gif" id="reserve" border="0" ></a>

    In other words. Don't mix onload and <tag onmousesomething="...">

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2005
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the response...

    so im trying to do this now...but there is something wrong with my code...im not sure how u join strings in js...

    Code:
    function changeHover(navstate)
    {
    	var navtabs = new Array()
    	navtabs[0] = "homepage"
    	navtabs[1] = "reserve"
    
    	for (i = 0; i < navtabs.length; i++)
    	{
    		if(navtabs[i] == navstate)
    		{
    			//do nothing
    		} else {
    			navstate.onmouseover = "SwapPic(this, 'tab_'.navstate.'_selected.gif')";
    			navstate.onmouseout = "SwapPic(this, 'tab_'.navstate.'.gif')";
    		}
    	}
    is called by:

    Code:
    	case "index.html": 
    	  homepage.src = "tab_home_active.gif";
    	  changeHover(homepage);
    	  break;
    Last edited by AW82; Jul 12, 2006 at 11:52.


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
  •