Log in

View Full Version : 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?


<!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:

window.setTimeout(function(){swapImage()},2000);

After your line:

swapImage()

I tested it here (http://www.theredplanet.org/examples/image_swap_delay_example.html) 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?


<!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>