Results 1 to 4 of 4

Thread: Adding a delay after onclick...then revert back to original image

  1. #1
    Join Date
    Aug 2005
    Posts
    54
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Adding a delay after onclick...then revert back to original image

    Hi!

    Any way to modify this so that when you click on the existing image, it changes to the second but then automatically reverts back to the existing image after a few seconds?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    div {
        text-align:center;
     }
    #pic{
        border:none;
     }
    </style>
    
    <script type="text/javascript">
       var c=0;
    window.onload=function() {
    document.getElementById('pic').onclick=function() {
       swapImage();
      }
     }
    function swapImage() {
    obj=document.getElementById('pic');
    if(c==1) {
       obj.src='/art/logo_paypal_buy.gif';
       c=0;
     }
    else {
       obj.src='/art/logo.gif';
       c=1;
     }
    }
    </script>
    
    </head>
    <body>
    
    <div>
    <img id="pic" src="/art/logo_paypal_buy.gif" alt="PayPal"/>
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Mar 2007
    Location
    Tarboro, NC
    Posts
    290
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Default

    I'm not good with JavaScript but thetesting site, or some other guy could do it. Its easy I'm sure. Good luck.

  3. #3
    Join Date
    Aug 2007
    Posts
    17
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Just add the following line:
    Code:
    window.setTimeout(function(){swapImage()},2000);
    After your line:
    Code:
    swapImage()
    I tested it here if you want to see it working.

  4. #4
    Join Date
    Aug 2005
    Posts
    54
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I messed up, sorry! Can the timeout also work with this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    input.send {
    	background-color: #FFFFFF;
    	border: 1px solid #a2a2a2;
    	color: #a43151;
    	font-family: Tahoma;
    	font-weight: bold;
    }
    
    .disabledDemo {
     	background-color: #ffe69b;
    	border: 1px solid #f5a642;
    	color: #5a5a5a;
    	font-weight: bold;
     }
    </style>
    
    <script type="text/javascript">
    window.onload=function() {
    document.forms[0].demo.onclick=function(){
       DisableButton(this);
      }
     }
    function DisableButton(b) {
       b.disabled=true;
       b.value=' Disabled for Demo ';
       b.className='disabledDemo'
     }
    </script>
    
    </head>
    <body>
    
    <form>
    
    <input class="send" type="Reset" name="demo" value="Add Addresses">
    
    </form>
    
    </body>
    </html>
    Last edited by AshleyQuick; 09-19-2007 at 10:22 AM.

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
  •