chp10_final - Mastering the Internet XHTML and JavaScript...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Mastering the Internet, XHTML, and JavaScript Chapter 10 Images and Maps Outline Goals and Objectives Chapter Headlines Introduction Color Palettes and Lookup Tables Dithering Image formats Image and Map Software Image Operations Using Images Image Animation Image Maps Types of Image Maps Creating Image Maps Using Image Maps Summary Chapter 10 - Images and Maps 2 Goals and Objectives Goals Understand images and image maps, know their parameters, recognize the difference between the two, perform image operations effectively, and master their use in web pages Objectives Pixels and resolution Color palettes and lookup tables Browser safe colors and dithering Image format and software Image operations and use GIF89a animation Tiling a web page Image maps Chapter 10 - Images and Maps 3 Chapter Headlines 10.1 Introduction Images and maps enhance web pages 10.2 Color palettes and lookup tables Why should we worry about these 10.3 Dithering Browsers should be told to use browser-safe 216 colors 10.4 Image formats Use JPG for photographic images and GIF for simple ones 10.5 Image and map software Image based navigation is very useful 10.6 Image operations All you need to know about images Chapter 10 - Images and Maps 4 Chapter Headlines 10.7 Using images It is easy to use images 10.8 Image animation GIF allows you to create animation files easily 10.9 Image maps Maps are not only for roads and driving 10.10 Types of image maps Use Client-side image maps only 10.11 Creating image maps Follow a 4-step process to create image maps 10.12 Using image maps All you need are three tags to use image maps in web pages Chapter 10 - Images and Maps 5 Web authors can add icons, logos and high-impact images to their pages Images enhance the web page Two issues are of major concern Introduction Image complexity File size Use images to enhance page layout and content Keep image complexity simple Use thumbnail versions to reduce the downloading time Use icons and logos of organizations as images to distinguish the web page Chapter 10 - Images and Maps 6 General rules to be followed: Color Palettes and Lookup Tables Images use RGB color model Pixel values are converted into colors via the display monitor itself The graphics card saves all possible pixel values and their corresponding colors in a color lookup table All internet applications, including XHTML support the 24-bit RGB color model Browsers have predefined color tables Displaying an image involves use and mapping between three color tables Image color table Browser color table Monitor color table Chapter 10 - Images and Maps 7 Dithering Dithering is a method to interpolate to resolve missing colors Browsers perform dithering by combining color codes Dithering colors is not a good practice Dithering can be eliminated by having large color lookup tables Due to hardware limitations, browsers use a 256 color minimum color palette also known as browser safe color palette Web authors can have control over the color palette for the images they create Chapter 10 - Images and Maps 8 Image Formats Resolution and format are two important variables of an image Higher the resolution, larger the size of the image file The most common image formats are: BMP JPEG GIF PNG PCZ TIFF JPG, GIF, and PNG are supported by major internet tools GIF is used for simple drawings and JPG is used for high quality images Chapter 10 - Images and Maps 9 Image and Map Software Software may be used to create images and maps Some of the major software available are: Adobe photoshop Adobe illustrator Paint shop pro Windows paint Many software programs are 2-D pixel based programs The origin is in the top left corner Images can be cropped to save a part of the image Image viewers are also important software programs Image viewers load and open images faster than image editors Chapter 10 - Images and Maps 10 Image and Map Software Chapter 10 - Images and Maps 11 Image Operations Image operations include: Image creation Image editing Image capturing Image scaling Images can be created by using image programs such as MS paint Image editing involves changing the image by cropping, altering graphics and compressing and decompressing images to reduce file size Image capturing is to save images that surfers find on different web sites Image scaling involves changing the image size using XHTML tags or and image program Chapter 10 - Images and Maps 12 Using Images <img> tag has enough attributes to handle images in web pages Some important attributes are; src, alt, border, width and height, align, hspace and vspace, usemap, ismap Images can be used as hyperlinks To use images as hyperlinks we must replace the visible part of the tag by image tag <img> Example: <a href=""><img src="NUimage"></a> Chapter 10 - Images and Maps 13 Example 10.1: Using Images Use the tags for using images in a web page Using Images Chapter 10 - Images and Maps 14 Using Images Example 10.3: Images hyperlinks Use image to create a hyperlink Chapter 10 - Images and Maps 15 Image Animation Web authors use java, javascript, or GIF89a for creating web animations GIF89a allows us to create a set of image frames in a desired sequence and save them in one GIF file The three steps in creating an animated GIF file are: Create individual frames Create the GIF file Make the animated GIF loop GIF animation files must be optimized to reduce file size: Use fewer colors Reduce number of bits per pixel Save a local color palette with each frame Use incremental frames Chapter 10 - Images and Maps 16 Image Animation Chapter 10 - Images and Maps 17 Image Maps Image maps allows us to link different parts of an image to different web pages Image maps divide an image into regions and each such region can be hyperlinked Image maps are both client and server side based Image maps can be used innovatively and cleverly Examples of image maps are road maps, layouts, campuses, etc. Chapter 10 - Images and Maps 18 Image Maps Chapter 10 - Images and Maps 19 Types of Image Maps There are two types of image maps Server side image map Client side image map Server side image map needs the client/server communication twice In a client side image map the client resolves the click locally and then requests the web page Server side maps existed before the client side maps Web authors should use the client side image maps in their web pages Chapter 10 - Images and Maps 20 Image map application can be developed in the following 4 steps: Creating Image Maps Create the image Define the virtual shapes of the map Configure the image map Create the XHTML files (URLs) Rectangle Circle Polygon XHTML provides three virtual shapes: Each of the virtual shape can by defined by a set of points The image software can be used to find the co-ordinates of the points used to define the virtual shape Chapter 10 - Images and Maps 21 Creating Image Maps Chapter 10 - Images and Maps 22 Using Image Maps The image is defined by <img> tag The virtual shape is defined by <area> tag Use <map> tag to associate the coordinates of the virtual shapes and mouse clicks with the coordinate system of the map image Example: <img src="myimage" usemap="#mymap" /> <map name="mymap"> <area href="some_link" shape="rect" coords="x1,y1,x2,y2" /> <area ......./> <area ......./> </map> Chapter 10 - Images and Maps 23 Example 10.5: Use Image maps A web page that uses client side maps Using Image Maps Chapter 10 - Images and Maps 24 Summary Images and maps create more interactive web sites Browsers have predefined color tables Dithering colors is not a good practice JPG and GIF are most commonly supported image formats One must be familiar with image software Images can be created, edited, and scaled <img> tags allows us to use images in web pages GIF89a is an easy way to create animations for web pages Image maps enable us to convert images into regions Client-side image maps are more widely used Virtual shapes are used to create and use image maps Chapter 10 - Images and Maps 25 ...
View Full Document

This note was uploaded on 07/01/2011 for the course COMP 103 taught by Professor Mulhimaldoori during the Spring '11 term at American Dubai.

Ask a homework question - tutors are online