Project 4 Creating an Image Map

Objectives Define terms relating to image mapping List the differences between server-side and client-side image maps Name the two components of an image map Describe the steps to implement an image map Distinguish between appropriate and inappropriate images for mapping

Objectives Sketch hotspots on an image Describe how x- and y- coordinates relate to vertical and horizontal alignment Open an image in Paint Use Paint to map the coordinates of an image Use the <MAP></MAP> tags to begin and end a map

Objectives Insert an image into a table and use the USEMAP attribute to define a map Use the <AREA> tag to indicate the shape, coordinates, and URL for a mapped area Change link colors Create a link list Insert a chart into a table on a Web page

Introduction Image maps allow developers to create multiple links on a single image Images can be divided into multiple clickable areas, or hotspots We will use Microsoft Paint to determine the coordinates for creating hotspots on image maps You will enter coordinates within the <AREA> tag to create hotspots

Introduction

Image Map Example

Image Map Caution Image downloading increases Web page loading time Users sometimes turn off images because of this issue To remedy this problem, all Web pages should have text links to the URLs reflected in the image map

Image Map Uses You can use one image (instead of multiple) to link to more than one Web site You can depict links in graphical format Create an image map button bar Divide a geographical map into hotspots

Image Map Uses image map button bar

Image Map Uses image map

Image Map Uses Image map Linked Web page

Image Map Uses Filter link Coffee pot link Base unit link

Image Map Uses image map

Image Map Uses image map

Server-Side versus Client-Side Image Maps Server-side image map The image is displayed by the browser (client) and implemented by a program running on the Web server Client-side image map The browser interprets the coordinates the user clicks and sends the user to the appropriate site

Image Map Components Image maps consist of two components: Map Definition Four steps to creating an image map: Select an image Sketch in the hotspots Map the image coordinates for each hotspot Code the image map

Selecting Images Appropriate images Obvious visual selections with divisions

Selecting Images Inappropriate images Does not have obvious visual selections

Sketching the Borders of Clickable Areas

Sketching the Borders of Clickable Areas

Sketching the Borders of Clickable Areas Link to Maui Web page Link to Huntington Beach Web page Link to Ft. Lauderdale Web page

Mapping Coordinates Find the x- and y- coordinates for the images, relative to the x-axis and y-axis In a coordinate pair, the first number is the x-coordinate and the second number is the y-coordinate Microsoft Paint may be used to find the coordinate pairs of images

x- and y- coordinates on the Status Bar Mapping Coordinates coordinate point (0,0) x- and y- coordinates on the Status Bar

Coding the Map Mapping tags <MAP> and </MAP> Creates a client-side image map <AREA> and </AREA> COORDS attribute

Mapping Image Coordinates Four shapes of map areas Rectangle Single Point Circle Polygon

Mapping Image Coordinates rectangle single point circle polygon

Mapping Image Coordinates Rectangles Retrieve coordinates of top-left and bottom-right corners Circles Retrieve coordinates of the center point and the radius in pixels Single Point Retrieve the coordinates of the point Polygon Retrieve the coordinates for each corner of the shape

Mapping Image Coordinates

Starting Paint Click the Start button on the taskbar Point to Programs on the Start menu, Point to Accessories on the Programs submenu, and then point to Paint on the Accessories submenu

Click Paint. Maximize the window, if necessary

The Paint Window Drawing Area Toolbox Menu bar Status bar Where the image displays Toolbox Displays tools you can use to edit or draw your image Menu bar Shows the Paint menu names Status bar Displays the coordinates of the center of the mouse pointer at its current position on the image

menu bar drawing area toolbox status bar

Opening an Image Insert the HTML Data Disk into drive A. In Paint, click File on the menu bar and then click Open. If necessary, click the Look In box arrow and then click 3½ Floppy (A:). If necessary, click the Files of type box arrow and select GIF files (*.gif). Click surfmap.gif on the list of files displayed. Click the Open button in the Open dialog box

Locating the X- and Y- Coordinates X- and y- coordinates begin with (0,0) in the top-left corner of the image We will first be finding the top-left corner of each rectangular clickable area, as well as the bottom-right corner

Locating the X- and Y- Coordinates top-left corners bottom-right corners

Locating the X- and Y- Coordinates

Coding the Image Map Using Tags and Attributes The <MAP> and </MAP> tags start and end each image map In the <AREA> tag, you insert the shape, coordinates, alternate text, and the URL for the link <AREA SHAPE=“ “ ALT=“ “ COORDS=“ “ HREF=“ “>

Image Map Tag Attributes

Start Notepad

Enter Initial HTML Tags

Creating the Home Page

Creating a Table Table attributes Two rows and two columns No border Left-aligned Change the vertical alignment of the contents of all cells in the table to be at the top of the cell

Creating a Table

Inserting an Image Use the surfmap.gif image on the HTML Data Disk The BORDER=0 attribute will display a borderless image The HSPACE=10 attribute will add 10 pixels of space between the text and image The USEMAP attribute of the image tag will indicate the URL of a client-side image map

Inserting an Image

Inserting a Heading font size font face font color heading

Inserting a Paragraph The table on the Surf’s Up home page contains three paragraphs in the right-hand column of the first row Always include an e-mail address on the home page for visitor contact

Inserting a Paragraph Enter the following HTML starting on line 14

Inserting a Paragraph paragraphs of text e-mail URL

Creating Text Links Enter the following HTML starting on line 26

Creating Text Links text links

Creating an Image Map The <AREA> tag has three attributes – SHAPE, COORDS, and HREF SHAPE attribute RECT, CIRCLE, POINT, POLY COORDS attribute Coordinates of points that define image map HREF attribute The URL of the hotspot’s linked page

Creating an Image Map Enter the following HTML starting on line 34

Creating an Image Map map start target name coordinates and links map end

Changing Link Colors Text link colors vary as the status of the link changes LINK ALINK VLINK Colors of the links should match the color of the heading Change the link attributes in the <BODY> tag

Changing Link Colors link color changes

Save and Print the HTML File Insert the HTML Data Disk into drive A Select Save As from the File menu Type surfhome.htm in the File name text box, then click the Save button Select Print from the File menu

Save and Print the HTML File

Viewing the Web Page Start your browser Type a:\surfhome.htm in the Address text box and press the ENTER key

Viewing the Web Page images

Printing the Web Page Click the Print button on the Standard Buttons toolbar

Creating a Second Web Page This section shows you how to create the Huntington Beach Web site

Copying a Table to a New File Click the Surf’s Up Home Page button on the taskbar to minimize the browser Click immediately to the left of the < in the <HTML> tag on line 1. Drag through the end of the <BODY> tag on line 5 Press CTRL+C to copy the selected lines Select New from the File menu Press CTRL+V to paste the contents from the Clipboard into a new file

Copying a Table to a New File pasted tags and text

Changing the Title Highlight the words, Home Page, between the <TITLE> and </TITLE> tags on line 3. Type Huntington Beach as the text Click immediately to the right of the </TABLE> tag on line 5. Press the ENTER key twice Type the closing </BODY> and </HTML> tags

Changing the Title change to title

Inserting an Image Create a table with two rows and two columns Insert the image in the first column of the first row This image is stored on the HTML Data Disk

Inserting an Image Enter the following HTML starting on line 7

Inserting an Image table and image tags

Inserting the Heading and Paragraph Enter the following HTML starting on line 14

Inserting the Heading and Paragraph heading and paragraph code

Creating a Link List It is important to include text links on every page with an image map for users who have images turned off Create this link list in the left hand column of the second row

Creating a Link List Enter the following HTML starting on line 26

Creating a Link List link list

Inserting a Chart Charts provide an excellent way to display sales information Insert this chart in the second column of the second row The chart is stored on the HTML Data Disk

Inserting a Chart Enter the following HTML starting on line 34

HTML to display chart image Inserting a Chart HTML to display chart image

Creating an E-Mail Link Enter the following HTML starting on line 40 to display the E-Mail link

Creating an E-Mail Link

Save and Print the HTML File Insert the HTML Data Disk into drive A Select Save As from the File menu Type hnbch.htm in the File name text box, then click the Save button Select Print from the File menu

Save and Print the HTML File

Close Notepad Click the Close button on the right-hand side of the title bar

Viewing the Web Page Click the Surf’s Up Home Page button on the taskbar to maximize your browser Click the Huntington Beach link from the image map on the Surf’s Up home page

Viewing the Web Page images

Printing the Web Page Click the Print button on the Standard Buttons toolbar

Testing the Links Click the Home link on the Huntington Beach Web page Click the Ft. Lauderdale link on the home page Click the Huntington Beach link on the Ft. Lauderdale Web page Click the Maui link on the Huntington Beach Web page If the links fail, edit the HTML code and retest the links

Close your Browser Click the Close button on the right-hand side of the title bar

Image Mapping Software Several image mapping software tools generate the x- and y- coordinates based on the clickable areas that you select on the image

Summary Define terms relating to image mapping List the differences between server-side and client-side image maps Name the two components of an image map Describe the steps to implement an image map Distinguish between appropriate and inappropriate images for mapping

Summary Sketch hotspots on an image Describe how x- and y- coordinates relate to vertical and horizontal alignment Open an image in Paint Use Paint to map the coordinates of an image Use the <MAP></MAP> tags to begin and end a map

Summary Insert an image into a table and use the USEMAP attribute to define a map Use the <AREA> tag to indicate the shape, coordinates, and URL for a mapped area Change link colors Create a link list Insert a chart into a table on a Web page

What You Should Know

Project 4 Complete