Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Beginner
Jan 11, 2000

Swap Images With JavaScript

A nice touch to a Web page is a button that changes appearance when clicked. All you need is two GIFs and a little JavaScript. The following code initially displays the Microsoft logo. When you click the image the onclick event calls the swapImage() function. The function determines the image that is currently showing and switches the SRC attribute to the alternate image. In this case, the alternate image is the MSDN logo.

 
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
intImage = 2;
function swapImage() {
switch (intImage) {
 case 1:
   IMG1.src = "http://www.microsoft.com/library/toolbar/images/mslogo.gif"
   intImage = 2
   return(false);
case 2:
   IMG1.src = "http://msdn.microsoft.com/msdn-online/start/images/msdn-logo.gif"
   intImage = 1
   return(false);
 }
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="IMG1" name="IMG1" src="http://www.microsoft.com/library/toolbar/images/mslogo.gif" 
 onclick="swapImage();">
</BODY>
</HTML>
Ken Cox
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap