»
home
» contact
» terms of use
FREE SCRIPTS
»
new
» text
» image
» utility
» background
» animation
» date/time
FREE ONLINE TOOLS
» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test
FREE BASIC SNIPLETS
» alert box
» image: multi-rollover
» pop-up: centering
»
more
FREE'N'CRAZY
» realtime death counter
» eyeQ
» fun ticker
RECOMMENDED LINKS
» www.dynamicdrive.com
» www.hotscripts.com
Image toggle onClick between two images
Click on the little yellow rectangle again and again in order to toggle between the two images.
Configuration:
Step 1:
Paste the following HTML-code anywhere between the
<body>
and
</body>
section of your webpage:
<a href="javascript:toggle()"><img name="togglepicture" src="yellow.gif" border="0"></a>
This is the HTML-code for the image and the link that calls the toggle-function. IMPORTANT: Do not change the name 'togglepicture'. This name is required for the script.
Step 2:
Paste the following script-code between the
<head>
and
</head>
section of your webpage:
<script> // insert the URL of your two toggle-images var toggleimage=new Array("red.gif","yellow.gif") //do not edit the variables below var preload_image_1=new Image() var preload_image_2=new Image() preload_image_1.src=toggleimage[0] preload_image_2.src=toggleimage[1] var i_image=0 function testloading() { isloaded=true } function toggle() { if (isloaded) { document.togglepicture.src=toggleimage[i_image] } i_image++ if (i_image>1) {i_image=0} } onload=testloading </script>
Step 3:
Go to the top-line of the script and add the URLs of your two images.
