SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Grahpic Toggle

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Grahpic Toggle

    Hello,

    What i need is to have a graphic with 2 onClicks. The first onClick to change the graphic to B and the other onClick to change it back to the original. Like a form check box.

    thanks

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this will do a mouseover effect

    PHP Code:

    <HTML>
    <
    HEAD>
    <
    TITLEOur First Mouseover </TITLE>
    <
    SCRIPT LANGUAGE="JavaScript">
    <!-- 
    Hide from older browsers

       
    function activate() {
          
    document.images["my1stMouseOver"].src "on.gif";
       }

       function 
    deactivate() {
          
    document.images["my1stMouseOver"].src "off.gif";
       }

    // End script hiding -->
    </SCRIPT>
    </HEAD>
    <BODY>
    <A HREF="javascript:void(0)" onMouseOver="activate()" onMouseOut="deactivate()"><IMG SRC="off.gif" WIDTH="70" HEIGHT="30" BORDER="0" NAME="my1stMouseOver"></A>
    </BODY>
    </HTML> 

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something like this:

    <img id="swap" src="a.gif" width="22" height="22" border="0" onClick="document.getElementById('swap').setAttribute('src', 'b.gif');" onDblClick="document.getElementById('swap').setAttribute('src', 'a.gif');" />

    but i need to restore the original with a second click rather than with an onDblClick.

    also is there any way to simplify that code? im sure i dont need to use getElementById('swap' from within the element i want to change?

    any suggestions?

  4. #4
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you've made it far more comlicated than it really is.

    PHP Code:
    <img id="swap" src="a.gif" width="22" height="22" border="0" onClick="this.src = 'b.gif';" onDblClick="this.src = 'a.gif';" /> 

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Andrew, I don't think you are quite getting what sambone is after.

    Both the swaps should happen on a single click.

    The double-click example was just to illustrate more clearly the transaction that needs to take place.

    toggle an image between two options.
    Toggle the images back and forth using only the onclick event.

    this might be useful with a little tweaking.

    and this
    Last edited by Bill Posters; Apr 16, 2002 at 02:48.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •