SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member CodeOptimist's Avatar
    Join Date
    Jul 2004
    Location
    Texas, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Toggle images w/ OnClick -> IE problem

    I am creating a "Table-of-Contents"-type page which allows each element to be collapsed or expanded, much like the treeview in Windows Explorer:

    - Item 1
    - Item 2
    - Item 3

    Next to each item, I have a small GIF image representing either a plus or a minus icon. What I want is for the image to toggle when clicked. I've got this code set up:

    Code:
    <head>
    <script>
      // preload images
      if (document.images)
       {
         btn_plus= new Image(12,12);
         pic1on.src="images/btn_plus.gif";  
    
         btn_minus= new Image(12,12);
         pic1off.src="images/btn_minus.gif";
       }
    
    	function toggleImg(img,suff0,suff1)
    	{
    	    var src = img.src;
    	    img.src = src.indexOf(suff0) > -1
    	            ? src.replace(suff0,suff1)
    	            : src.replace(suff1,suff0);
    	}
    -->
    </script>
    </head>
    <body>
    <img src="images/btn_plus.jpg" border="0" width="12" height="12" onClick="toggleImg(this, '_plus', '_minus')">
    </body>
    This works fine in Firefox, but the image disappears in IE instead of toggling. It appears IE is not preloading the images correctly, but being a JavaScript newbie, I have no idea why.

    Any ideas?
    CO

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not a preload:
    Code:
    btn_plus= new Image(12,12);
         pic1on.src="images/btn_plus.gif";
    That second line should be:
    Code:
    btn_plus.src="images/btn_plus.gif";
    ...to start the download. Shouldn't stop the rollover, though - just delay it. Everything else looks OK (HTML/JS commenting-out ends with //--> though). Pop up some alert()s to see what's happening inside that function...
    ::: certified wild guess :::

  3. #3
    SitePoint Member CodeOptimist's Avatar
    Join Date
    Jul 2004
    Location
    Texas, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    Not a preload:
    Code:
    btn_plus= new Image(12,12);
         pic1on.src="images/btn_plus.gif";
    That second line should be:
    Code:
    btn_plus.src="images/btn_plus.gif";
    ...to start the download. Shouldn't stop the rollover, though - just delay it. Everything else looks OK (HTML/JS commenting-out ends with //--> though). Pop up some alert()s to see what's happening inside that function...
    Oops, duh! I completely missed that. Should be more careful when using existing examples in my code.

    Thanks!
    Nathanael Barbettini [aka CodeOptimist]
    Proud staff member of Wildfire Games!


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
  •