• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Swapping Images

Sometimes you might want to trigger the Swap Image behavior when the user interacts with one image, but actually change to a different image. You can do this more complicated swap with the Swap Image behavior. You will create a Web page that displays an image. When the user clicks on areas of the image, a different image will be swapped.

How does an image swap work? The actual image object isn’t being swapped; the src (source) attribute, which contains the URL of the image source file, changes. When you place an image object on the page, you can swap the src attribute as many times as you please. All other attributes of the image, such as width, height, alt, border, h (horizontal) space, and so on, will stay the same. Because all the other attributes of the image stay the same, it’s important to swap only images that are the same size; otherwise, the browser will stretch or shrink the image to be the size of the original image.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint