www.webdeveloper.com
Results 1 to 2 of 2

Thread: An Image Link that switches when clicked

  1. #1
    Join Date
    Dec 2002
    Posts
    168

    Question An Image Link that switches when clicked

    Hi there,

    I'm using the following code on a website that hides a section of the page when you visit it - the section is revealed by either clicking on an image (of a plus sign) or the text next to it.

    The code is as follows...

    <script type="text/javascript">
    function hideshow(which){
    if (!document.getElementById)
    return
    if (which.style.display=="block")
    which.style.display="none"
    else
    which.style.display="block"
    }
    </script>

    ...to work with...

    <a href="javascript:hideshow(document.getElementById('Hidden1'))"><img src="images/plus.png" width="18" height="18" alt="View Hidden Section 1" /></a>

    <a href="javascript:hideshow(document.getElementById('Hidden1'))"> - View Hidden Section 1</a>

    <div id="Hidden1" style="display: none;">
    Hidden Info
    </div>

    Could someone please tell me how this code can be modified so that when the section expands to reveal the hidden section, the plus sign switches to a minus sign?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440

    Lightbulb

    See if this is closer to your needs.
    Note the differences between this and your code.
    Code:
    <html>
    <body>
    
    <a href="#" onclick="hideshow(document.getElementById('Hidden1'));return false">
    <img id="p_m_img" src="" width="18" height="18" alt="View Hidden Section 1" />
     - View Hidden Section 1</a>
    
    <div id="Hidden1" style="display: none;">Hidden Info</div> 
    
    <script type="text/javascript">
    
    var imgPics = [
      "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSbFXaAxBLBvzn6Dc2yIIsWDm6Jg_8aK6AHf-vzXDj3MN1BfDAJ",
      "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQmN1dIbW-DjGMUZOJzTQcwyF-pMnT58i7P1WrBsArN_hnNBEiN"
    ];
    
    function hideshow(which){
      if (!document.getElementById) return;
      if (which.style.display=="block") {
        which.style.display="none"
        document.getElementById('p_m_img').src = imgPics[0];
      } else {
        which.style.display="block"
        document.getElementById('p_m_img').src = imgPics[1];
      }
    }
    window.onload = function() {
      document.getElementById('p_m_img').src = imgPics[0];
    }
    </script>
    
    </body>
    </html>
    Or alternatively with a few typing short-cuts...
    Code:
    <html>
    <body>
    
    <a href="#" onclick="hideshow('Hidden1');return false">
    <img id="p_m_img" src="" width="18" height="18" alt="View Hidden Section 1" /> - View Hidden Section 1</a>
    
    <div id="Hidden1" style="display: none;">Hidden Info</div> 
    
    <script type="text/javascript">
    var imgPics = [
      "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSbFXaAxBLBvzn6Dc2yIIsWDm6Jg_8aK6AHf-vzXDj3MN1BfDAJ",
      "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQmN1dIbW-DjGMUZOJzTQcwyF-pMnT58i7P1WrBsArN_hnNBEiN"
    ];
    function $_(IDS) { return document.getElementById(IDS); }
    function hideshow(which){
      if (!$_(which)) return;
      if ($_(which).style.display=="block") {
        $_(which).style.display="none";
        $_('p_m_img').src = imgPics[0];
      } else {
        $_(which).style.display="block";
        $_('p_m_img').src = imgPics[1];
      }
    }
    window.onload = function() {
      $_('p_m_img').src = imgPics[0];
    }
    </script>
    
    </body>
    </html>
    Last edited by JMRKER; 02-04-2013 at 04:02 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles