SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image swap on toggle

    I've got the toggle part of this file down across multiple browsers, but now I'm hoping someone can help me with making each link an image swap onClick.
    Here's the code I've got so far:
    Code:
    <HTML>
     <HEAD>
     <TITLE>toggle foo</TITLE>
     <SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>
     <!-- // Hide script from older browsers
     function toggleMenu(currMenu) {
      if (document.getElementById) {
    	thisMenu = document.getElementById(currMenu).style; 
      } else if (document.all) {  
    	thisMenu = document.all[currMenu].style;
      } else {  
    	return true;
      }
       
      if (thisMenu.display == "block") {  
    	thisMenu.display = "none"
      } else {  
    	thisMenu.display = "block"
      }
       
      return false;
       }
     // End hiding script -->
     </SCRIPT>
     <STYLE TYPE="TEXT/CSS">
     #menu1 {display:none; margin-left:20px}
     #menu2 {display:none; margin-left:20px}
     </STYLE>
     </HEAD>
     <BODY BGCOLOR=WHITE>
     <A HREF="#" onClick="return toggleMenu('menu1')"><img src="image1.gif" height="5" width="5"></A><br>
     <SPAN ID="menu1">
     heres my text to display <BR>
     heres my text to display<BR>
     heres my text to display<BR>
     heres my text to display
     </SPAN>
     <A HREF="#" onClick="return toggleMenu('menu2')"><img src="image1.gif" height="5" width="5"></A><br>
     <SPAN ID="menu2">
     heres my text to display2 <BR>
     heres my text to display2<BR>
     heres my text to display2<BR>
     heres my text to displa2y
     </SPAN>
     </BODY>
     </HTML>
    I'd like to be able to swap "image1.gif" with "mage2.gif" at the click but I don't know where to begin with the existing javascript function on the anchor tag. any pointers would be most appreciated.
    thanks,
    bingy

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need something like this, but part of my code must be wrong: DEMO

    I'll debug it when I get a chance if someone hasn't beaten me to it.


    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Member nicora's Avatar
    Join Date
    Jun 2003
    Location
    wa
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should just be able to do this.

    http://www.seemecreate.com/archive/toggle.htm

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought that's pretty much what I'd done except in less lines of code, but yours works and mine doesn't so I guess that's problem solved
    From the English nation to a US location.

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I posted the question and will therefore decide which one works and which one doesn't ;-)
    No really. thanks. I've been buried in work since I posted and haven't been able to review...I'll get to it though.

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks nicora. perfect. just what I needed...

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I've added a link as well as an image toggle the menu and I get an error :

    Line: 41
    Char: 5
    Error: 'document[...]' is null or not an object.

    Here's the code:

    Code:
    <HTML>
     <HEAD>
     <TITLE>toggle foo</TITLE>
     <SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>
     <!-- // Hide script from older browsers
      var flag = 0;
    
     function init()
     {
      over_image = new Image();
      over_image.src = "../images/help_up.gif";
      out_image = new Image();
      out_image.src = "../images/help.gif";
      flag = 1;
     }
    
     function toggleMenu(currMenu,doc,img)
     {
      if (document.getElementById)
      {
       thisMenu = document.getElementById(currMenu).style;
      }
      else if (document.all)
      {
       thisMenu = document.all[currMenu].style;
      }
      else
      {
       return true;
      }
      if (thisMenu.display == "block")
      {
       thisMenu.display = "none"
       if (flag)
    	document[doc].src=eval("out_image" + ".src");
      }
      else
      {
       thisMenu.display = "block"
       if (flag)
    	document[doc].src=eval("over_image" + ".src");
      }
      return false;
     }
     // End hiding script -->
     </SCRIPT>
     <STYLE TYPE="TEXT/CSS">
     #menu1 {display:none; margin-left:20px}
     #menu2 {display:none; margin-left:20px}
     </STYLE>
     </HEAD>
     <BODY ONLOAD="init();" BGCOLOR=WHITE>
     <a href="#" onClick="return toggleMenu('menu1')">click it</a>
     <A HREF="#" onClick="return toggleMenu('menu1','img01')"><img name="img01" src="../images/help.gif" height="15" width="15" border="0"></A><br>
     <SPAN ID="menu1">
     heres my text to display <BR>
     heres my text to display<BR>
     heres my text to display<BR>
     heres my text to display
     </SPAN>
     <A HREF="#" onClick="return toggleMenu('menu2','img02')"><img name="img02" src="../images/help.gif" height="15" width="15" border="0"></A><br>
     <SPAN ID="menu2">
     heres my text to display2 <BR>
     heres my text to display2<BR>
     heres my text to display2<BR>
     heres my text to displa2y
     </SPAN>
     </BODY>
     </HTML>
    apologies for flogging a dead horse but my javascript is so bad I shouldn't even be fooling with it. I think what I need is a link variable but I'm not sure how to write it in.
    The link is casuing the error is
    Code:
     <a href="#" onClick="return toggleMenu('menu1')">click it</a>
    any help would be appreciated


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
  •