SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    Now with customized title Jump's Avatar
    Join Date
    Sep 2002
    Location
    The Restaurant at The End of The Universe
    Posts
    1,423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make a link image change when clicked?

    I am working on a explorer like tree in a php script. I have the standard + - in a box pics. How to I have the + pic change to the - pic when clicked. Also, how do I get it to change back when another + pic is chosen?

  2. #2
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a link to a script that is similar to what you want. Perhaps if you studiy the code you can see how to do yours. Good luck.
    http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

  3. #3
    Now with customized title Jump's Avatar
    Join Date
    Sep 2002
    Location
    The Restaurant at The End of The Universe
    Posts
    1,423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I already have a tree functioning. Because it is dynamic using php variables in loops as data in the javascript, I left out the main topics to speed it up. I have them in another frame to the left. I just wanted to find some seperate code to change the images on those links that open the list tree's. Just to make it look good and match up visually.

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is just a regular image src swap. Am I missing what's complicated about this?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    Now with customized title Jump's Avatar
    Join Date
    Sep 2002
    Location
    The Restaurant at The End of The Universe
    Posts
    1,423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, it's complicated to me since I really know nothing of javascript.

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're a javascript newbie and trying to make a tree menu? For the practice?

    * confused *
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    Now with customized title Jump's Avatar
    Join Date
    Sep 2002
    Location
    The Restaurant at The End of The Universe
    Posts
    1,423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I am just trying to change an image when clicked on. Why the hard time?

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not giving you a hard time, am I? I just don't understand how you would undertake a whole tree menu system when you don't know how to do a simple image swap.

    Anyhow, w/o seeing your code, I can offer this
    Code:
    function swapImage( id, newSrc )
    {
    	document.getElementById( id ).src = newSrc;
    }
    However, that's very basic -- it's likely you'll need something more specific. However, it should be apparent from the script above that you only need three things

    1) a reference to the image element (whether by id or other)
    2) access it's src property
    3) Set it to a new image path

    But how it's implemented would entirely depend on how you are coding your tree menu.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    Now with customized title Jump's Avatar
    Join Date
    Sep 2002
    Location
    The Restaurant at The End of The Universe
    Posts
    1,423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I just can't explain it good since I don't even know what terms to referance inmy explanation. I already have a php class that does my tree's for me. It uses a javascript file. In another frame to the left of the tree display I have links that choose which tree to display in the right frame. I don't need to implement any type of tree here. they are just links. I just want to be able to change the image for the active link. This would make the links have a similar appearance to the actual Tree Frame. It's just an aesthetic thing. If it can't be done it's no big deal.

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, it can certainly be done. But, how are the link and the image related? Are they sibling nodes? Is the image an LI bullet? Is the image a styled background? Is there no direct relation?

    A small snippet of source showing a link and one of the images that needs to change would help. A link to the whole menu would be better.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    Now with customized title Jump's Avatar
    Join Date
    Sep 2002
    Location
    The Restaurant at The End of The Universe
    Posts
    1,423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well here is the link with the image.


    PHP Code:
    <?php
    <td><a href="javascript:loadFrames('makes', 'makes_tree_test.php?item=<?php echo $name_item; ?>', 'stuff.stuff1', 'stuff.php?item=<?php echo $name_item; ?>', 'stuff.stuff2', 'stuff2.php')"><img
          src
    ="<?php echo $tree_img; ?>"
          
    width="22"
          
    height="30"
          
    border="0" /></a></td>
    ?>

  12. #12
    Now with customized title Jump's Avatar
    Join Date
    Sep 2002
    Location
    The Restaurant at The End of The Universe
    Posts
    1,423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And the link is here. Just click on the "What's It Make?" Link.

  13. #13
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In my menu tree script I use the innerHTML property to change the + and = signs...like so:

    if (obj.style.display == "none") {
    closeall();
    obj.style.display = "block";
    opener.innerHTML = "-";
    }
    else {
    obj.style.display = "none";
    opener.innerHTML = "+";
    }

    But to change images, it's really a simple matter of changing the code above like so:

    if (obj.style.display == "none") {
    closeall();
    obj.style.display = "block";
    window.document.image1.src = "minus.gif";
    }
    else {
    obj.style.display = "none";
    window.document.image1.src = "plus.gif";
    }

    Does that help?

  14. #14
    Now with customized title Jump's Avatar
    Join Date
    Sep 2002
    Location
    The Restaurant at The End of The Universe
    Posts
    1,423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where would I put something like that and what would I put in the link?

  15. #15
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well here's my entire menu tree script:

    Code:
    <script language="JavaScript">
    function open(theobj) {
      
      var obj = document.getElementById(theobj);
      var opener = document.getElementById("i" + theobj);
      if (obj.style.display == "none") {
    	closeall();
    	obj.style.display = "block";
    	opener.innerHTML = "-";
      }
      else {
    	obj.style.display = "none";
     opener.innerHTML = "+";
      }
    }
    function openall() {
      var objarray = document.getElementsByTagName("span");
      for (var i=0; i < objarray.length; i++) {
    	objarray[i].style.display = "block";
     document.getElementById("i" + objarray[i].id).innerHTML = "-";
      }
    }
    
    function closeall() {
      var objarray = document.getElementsByTagName("span");
      for (var i=0; i < objarray.length; i++) {
    	objarray[i].style.display = "none";
     document.getElementById("i" + objarray[i].id).innerHTML = "+";
      }
    }
    </script>
    
    <style>
    a.sign {
      text-decoration:none;
      font-size:18px;
      font-family:arial;
      color:blue;
    }
    a.link {
      text-decoration:none;
      font-size:15px;
      font-family:arial;
      margin-left:15px;
      color:blue;
    }
    a.openclose {
      text-decoration:none;
      color:blue;
      font-size:15px;
      font-family:arial;
    }
    </style>
    <BODY bgcolor="#cccccc" onload="resizeWin();">
    <H3 align="center">HTML4ME.COM</H3>
    <A href="javascript:open('scripts');" id="iscripts" class="sign">+</A>
    Scripts<BR>
    <span id="scripts" style="display:none;">
      <A href="Your_URL_here" class="link">
    	JavaScript Scripts
      </A><BR>
      <A href="Your_URL_here" class="link">
    	Dynamic HTML Scripts
      </A><BR>
      <A href="Your_URL_here" class="link">
    	Other Scripts
      </A><BR>
    </span>
    
    <A href="javascript:open('tutorials');" id="itutorials" class="sign">+</A>
    Tutorials<BR>
    <span id="tutorials" style="display:none;">
      <A href="Your_URL_here" class="link">
    	HTML Tutorials
      </A><BR>
      <A href="Your_URL_here" class="link">
    	CSS Tutorials
      </A><BR>
      <A href="Your_URL_here" class="link">
    	JavaScript Tutorials
      </A><BR>
      <A href="Your_URL_here" class="link">
    	Dynamic HTML Tutorials
      </A><BR>
      <A href="Your_URL_her " class="link">
    	Other Tutorials
      </A><BR>
    </span>
    
    <A href="javascript:open('support');" id="isupport" class="sign">+</A>
    Support<BR>
    
    <span id="support" style="display:none;">
      <A href="Your_URL_here" class="link">
    	FAQs
      </A><BR>
      <A href="Your_URL_here" class="link">
    	Forums
      </A><BR>
      <A href="Your_URL_here" class="link">
    	Scripting Support
      </A><BR>
      <A href="Your_URL_here" class="link">
    	Technical Help
      </A><BR>
    </span>
    
    <A href="javascript:open('contact');" id="icontact" class="sign">+</A>
    Contact us<BR>
    <span id="contact" style="display:none;">
      <A href="Your_URL_here" class="link">
    	Email Us
      </A><BR>
      <A href="Your_URL_here " class="link">
    	Phone and Address
      </A><BR>
      <A href="Your_URL_here " class="link">
    	Forums
      </A><BR>
    </span>
    <BR>
    <A href="javascript:openall();" class="openclose">Open all</A> |
    <A href="javascript:closeall();" class="openclose">Close all</A>
    </BODY>
    </html>
    I'm not sure how I would alter your script (I didn't check yours out) but hopefully my script will give you a good idea of what you would need to do.

  16. #16
    Now with customized title Jump's Avatar
    Join Date
    Sep 2002
    Location
    The Restaurant at The End of The Universe
    Posts
    1,423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I can't believe I would need all that just to have the active link have a different picture. There must be something simple out there. *whishes*

  17. #17
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From what I saw, your tree thingy already does that. The first click doesn't, but then the menu also doesn't expand - so it shouldn't.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •