How can I swap images when the user clicks on a link, without reloading the whole page?

Jorge Jordão

Just set the src attribute of the image to the new value.

<HTML>
  <HEAD>
    <SCRIPT LANGUAGE="JavaScript">    
      function setImageSrc(image,newSrc) {
        image.src = newSrc;
      }
    </SCRIPT>
  </HEAD>
  <BODY>
    <IMG SRC="image1.gif">
    <A HREF="javascript:setImageSrc(document.images[0],'image2.gif')">
      Swap image</A>
  </BODY>        	
</HTML>

Notice that on Netscape the new image you specify is displayed in the area defined for the original image (so you better use images of the same size). On Internet Explorer, the page layout automatically adapts to the new image size.

Comment and Contribute

 

 

 

 

 


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

 

 

About | Sitemap | Contact