Making a rollover

Making a rollover - code

<head>

<script language="javascript">

function toggleImage(){

var pic = document.pic

//Get a reference to the image    
					
		 		
					if(pic.img == "on"){ //Is the current image the on picture  
					
				 
					/*
						Change the image's src property to the off picture    
					*/
				 
					pic.src = 	"images/buttonoff.gif" 
					
	
					pic.img = "off"  //Change the image's img property to "off"    
							
					
					}else{ The current image is the off picture
					
					 
								<!--
									  Change the image's src property to the on picture 	  
								-->
							 	
					pic.src = 	"images/buttonon.gif" 	
					

					pic.img = "on" //	Change the image's img property to "on" 	   
					
					}


		</script>

</head>

<!--

 Define an image in the body of the document,
												
rap it in a hyperlink, register the mouse over and mouse out events 
												
of the hyperlink and force them to call  
												
toggleImage function that will toggle the image's source property on and off

--> <body>

<a
			

			 
					<!--
						  disable the hyperlink	  
					-->
				 
			href="javascrpt:void(0)"
			

			 
					<!--
						   Make the onmouseover and onmouseout events 
						

						call toggleImage   
					-->
				 
			onmouseover="toggleImage()"
			

			onmouseout="toggleImage()">
				
			 
					<!--
						
  Define the image	
  
					-->
				 
			<img
				

				 
						<!--
							  Give the picture a name so it can reference with ease	  
						-->
					 
				name="pic" 
				

				 
						<!--
							 Give the picture an initial source  
						-->
					 
				src="images/buttonoff.gif"
			>
			

		</a>


	</body><!--  Close the body element	-->




Close