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

**AshleyQuick** · 09-18-2007, 02:05 AM

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>

**TimFA** · 09-19-2007, 12:15 AM

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

**rdutton** · 09-19-2007, 02:05 AM

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.

**AshleyQuick** · 09-19-2007, 09:56 AM

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>

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions