Site Development Foundations © 2004 ProsoftTraining All rights reserved

Lesson 8: Image Techniques

Objectives Create client-side image maps Create client-side image maps Define rectangle, circle and polygon areas as hot spots in an image Define rectangle, circle and polygon areas as hot spots in an image Link defined areas to URLs Link defined areas to URLs Define image transparency Define image transparency Distinguish between GIF 87a and 89a formats Distinguish between GIF 87a and 89a formats Define image interlacing Define image interlacing Identify animated GIF and PNG image formats Identify animated GIF and PNG image formats

Graphic Types Vector Vector Graphics that use mathematical coordinates with lines, curves, shapes to create desired images and specify colorsGraphics that use mathematical coordinates with lines, curves, shapes to create desired images and specify colors Bitmap Bitmap Graphics that use small dots (usually thousands) to create an image and specify colorGraphics that use small dots (usually thousands) to create an image and specify color Also known as raster graphicsAlso known as raster graphics

Image Maps An image that contains hyperlinked, clickable regions, sometimes called “hot spots” An image that contains hyperlinked, clickable regions, sometimes called “hot spots” Each hot spot is defined by a set of coordinates (indicating its position on the image) and a URL reference Each hot spot is defined by a set of coordinates (indicating its position on the image) and a URL reference Two types of image maps: Two types of image maps: Client-side (the most common)Client-side (the most common) Server-side (rarely used)Server-side (rarely used)

Defining a Client-Side Image Map Define a map, assign it a name, and provide hot-spot coordinates Define a map, assign it a name, and provide hot-spot coordinates Coordinates can be determined using an image- editing application such as Paint Shop Pro Coordinates can be determined using an image- editing application such as Paint Shop Pro Refer to the image map by map name: Refer to the image map by map name: </map> Associate the image file with the map: Associate the image file with the map:

XHTML and the id Attribute In XHTML, the id attribute is required in the tag In XHTML, the id attribute is required in the tag Serves same purpose as the name attribute Serves same purpose as the name attribute If the id attribute is omitted, code will not validate If the id attribute is omitted, code will not validate

Defining Hot Spots Three shapes for hot spots: Three shapes for hot spots: RectangleRectangle CircleCircle PolygonPolygon

Rectangle Hot Spot Any two points can define a rectangle Any two points can define a rectangle Each point is represented by a horizontal (x) coordinate and a vertical (y) coordinate Each point is represented by a horizontal (x) coordinate and a vertical (y) coordinate Rectangles are defined by four coordinates representing the upper-left and bottom-right corners of the rectangle Rectangles are defined by four coordinates representing the upper-left and bottom-right corners of the rectangle Code:Code:

Circle Hot Spot Circles are defined by two coordinates and a radius Circles are defined by two coordinates and a radius Code:Code: The pair of coordinates specifies the circle's center The pair of coordinates specifies the circle's center A third number specifies the desired radius, or half-width, of the circle A third number specifies the desired radius, or half-width, of the circle

Polygon Defines an irregular area (neither a circle nor a rectangle) Defines an irregular area (neither a circle nor a rectangle) Specify coordinates for each point that defines the polygon, from three to 100 pairs of coordinates Specify coordinates for each point that defines the polygon, from three to 100 pairs of coordinates Code:Code:

Image Transparency Provides the visual effect of blending in to the background of the Web page Provides the visual effect of blending in to the background of the Web page Most developers use image transparency to remove the blank image background so it appears to float on the page Most developers use image transparency to remove the blank image background so it appears to float on the page Web-ready formats that support transparency: Web-ready formats that support transparency: GIF 89aGIF 89a PNGPNG

Image with No Transparency

Transparent PNG Image

Image Interlacing Allows an image to progressively display in a browser while downloading Allows an image to progressively display in a browser while downloading The image appears in stages during download (from top to bottom) The image appears in stages during download (from top to bottom) The top of a non-interlaced image will appear after the browser has read 50 percent of the image The top of a non-interlaced image will appear after the browser has read 50 percent of the image

Image Interlacing (cont’d)

Animation Several images in a sequence, rendered in rapid succession to simulate motion Several images in a sequence, rendered in rapid succession to simulate motion Made possible in several ways: Made possible in several ways: Animated GIFs and PNGsAnimated GIFs and PNGs The animated image is actually a group of separate, sequenced images The animated image is actually a group of separate, sequenced images FlashFlash Scripts, called macros, that manipulate vector images Scripts, called macros, that manipulate vector images Popular, but proprietary technology (Macromedia) Popular, but proprietary technology (Macromedia) Requires a browser plug-in to view Requires a browser plug-in to view

Animation (cont’d) Java Java The user agent must have Java plug-in installedThe user agent must have Java plug-in installed May not appear as quickly as FlashMay not appear as quickly as Flash Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG) Developed by various vendors, including Adobe, Macromedia, Microsoft and SunDeveloped by various vendors, including Adobe, Macromedia, Microsoft and Sun An open standard adopted by the W3CAn open standard adopted by the W3C Supports:Supports: Animation Animation Compression Compression Searchable text Searchable text Zooming Zooming Requires a plug-in to viewRequires a plug-in to view

Animation (cont’d) Identifying animation techniques Identifying animation techniques Right-click on the animation in the browser and identify its propertiesRight-click on the animation in the browser and identify its properties View the Web page source codeView the Web page source code Issues with animation Issues with animation Frequently overusedFrequently overused Can limit accessibilityCan limit accessibility Often proprietary, requiring a browser plug- inOften proprietary, requiring a browser plug- in Using non-standard images Using non-standard images