HTML and CSS Reference
In-Depth Information
Working with Images
(and Links)
12.1 Introduction to Images
A picture is worth a thousand words. Whether it's a slide show, banner, movie, or photo
album, the Web contains a huge collection of images. Any time you buy something
online, there is usually an image associated with the item, maybe a small image, and then
a bigger image if you want more detail. Whatever it is, a book, a house, a pair of shoes,
or a toy, we like to see it before we put it in our virtual shopping cart and pay the money.
Although the focus of this chapter is on JavaScript and images, hypertext links are so
closely intertwined with images and navigation, they are also discussed here.
Images can be links, clickable image maps, banners, marquees, billboards, or roll-
overs—you name it. With HTML, the images you load are static, and just sit on the page.
They cannot be changed without loading a brand new page, and loading a lot of images
takes time. JavaScript brings a new dimension to working with images. Instead of view-
ing a static image on the page, you can create dynamic images that can be changed on
the fly, adding animation and drama to your Web page. For example, you can create
effects such rollovers, slide shows, cycling banners, dynamic menus, and more. Just as
with forms, JavaScript has access to every image on you page. Before getting into the fun
of images, we will look at how JavaScript accesses them. In Chapter 13, “Handling
Events,” and Chapter 15, “The W3C DOM and JavaScript,” you utilize what you learn
here to see the full potential of image manipulation with JavaScript.
Search WWH ::

Custom Search