Updating an image within a page

jQuery allows the developer to dynamically change images on a web page. This recipe will show you how to do this and also show you how to use a timestamp in order to prevent the browser from using a cached image, which can often be a problem when swapping images dynamically in this way.

Getting ready

For this recipe, you are going to need four different images. Ensure that you have four small images named black.png, red.png, blue.png, and green.png available.

How to do it…

To understand how jQuery can be used to change an image, complete each of the following steps:

  1. Create a file named recipe-8.html within an easily accessible directory, and add the following HTML code to this file:
    <!DOCTYPE html> <html> <head> <title>Change ...

Get jQuery 2.0 Development Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.