| This chapter describes how to use JavaScript to manipulate graphics. It begins by explaining traditional JavaScript techniques for visual effects such as image rollovers (in which one static image is replaced by another when the mouse pointer moves over it). It then moves on to describe how to use JavaScript to draw your own graphics. Combining JavaScript with CSS allows you to draw horizontal and vertical lines and rectangles, which is sufficient for many kinds of "boxes and arrows" drawings, as well more complex graphics such as bar charts. Next, the chapter covers vector-graphics technologies, which provide a far more powerful client-side drawing capability. The ability to dynamically generate sophisticated graphics on the client-side is important for several reasons: The code used to produce graphics on the client side is typically much smaller than the images themselves, creating a substantial bandwidth savings. Dynamically generating graphics from real-time data uses a lot of CPU cycles. Offloading this task to the client (which usually has CPU power to spare) reduces the load on the server, potentially saving on hardware costs. Generating graphics on the client is consistent with the Ajax application architecture in which servers provide data and clients manage the presentation of that data.
This chapter includes examples of five vector-graphics technologies that can be harnessed with client-side JavaScript: Scalable Vector Graphics, or SVG, is a W3C standard XML-based language for describing drawings. SVG is supported natively by Firefox 1.5 and is available in other browsers via plug-ins. Because SVG drawings are XML documents, they can be dynamically created in JavaScript. Vector Markup Language, or VML, is a Microsoft-only SVG alternative. It is not well known but has been available since Internet Explorer 5.5. Like SVG, VML is XML-based, and VML drawings can be dynamically created on the client. The HTML <canvas> tag provides an explicit JavaScript-based drawing API. It was introduced in Safari 1.3 and adopted by Firefox 1.5 and Opera 9. The Flash player is available as a plug-in in a large majority of web browsers. Flash 6 introduced a drawing API, and Flash 8 makes it very easy to use that API from client-side JavaScript. Finally, Java supports a powerful drawing API and is available in many web browsers through a plug-in from Sun Microsystems. As described in Chapters 12 and 23, JavaScript code can invoke methods of Java applets and, in Mozilla-based browsers, can even call Java methods in the absence of an applet. This ability to script Java allows client-side JavaScript code to use Java's sophisticated vector drawing API.
Before tackling these advanced drawing techniques, however, let's begin with the basics. |
