Say you have an image that you'd like to scale up or down when the user clicks on it. This type of interaction is common in thumbnail galleries where images are displayed in thumbnails so that the web page can display many images at once. When the user clicks on an image that they find interesting, it enlarges so they can see the full size.
We'll do this for one image, but I'm sure that once you're done with the chapter, you can figure out how to apply it to multiple images on a web page (if you wish).
Let's grab an image to use for the example. You can download an image from one of my Flickr sets of a blue flower and save on your local machine as
blueflower.jpg:
<body> <img id="image" src="blueflower.jpg" width="500" height="301" alt="blue flower" /> </body>
First, we'll declare a bunch of variables for helping us easily reference them.
// Create variable for easier referencing var image = $('image'); // Get the current width, height,...