## Section 5 - imagemaps, elements #

Protocols
Relative/Absolute links
Paths
Absolute photo link

Anchors
Image Maps
Image map elements
Image map attributes
 page 53

URLs
• Uniform Resource Locator

http://www.cdc.gov/travel/index.html

File name
Directory
Domain name
Protocol

index.html
• default file name that the browser looks for to display when it is
give a directory on a server to go to
• proper form of websites: home page should always be called
index.html

Protocols
PROTOCOL DESCRIPTION
file:/// Accesses a file from a local hard drive
ftp:// Accesses a file from a File Transfer Protocol (FTP)
Server
http://
c:\
mailto: used with <a href> - sends link to email
 page 54

Relative/Absolute links
• Absolute = complete URL of objects location including protocol
(http://)
• Relative = location object based on file’s location
- eg. index.html

Paths
• no slash or dots = file/image inside same folder as referring
HTML file
• / = file/image inside folder one level down from referring file
• ../ = folder is one level up from referring file

Absolute photo link

• display a graphic from another web site
<p><img src="http://www.w3.org/Icons/valid-xhtml10" alt =
Valid XHTML 1.0 " height="31" width="88" /></p>

To link the image:

<p><a href="http://www.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt = Valid
XHTML 1.0 " height="31" width="88" /></a></p>
 page 55

Anchors
• for linking on same web page
• also referred to as bookmarks - eg: www.w3.org/MarkUp
• also, use "top of page" anchor when your are scrolled down into
a long document to take you back up to the top
• uses <id> - any id attribute can be the target of a link

<h2 id="sql">Summary of Qualifications</h2>

<p><a href="#sql">Read the Summary of Qualifications

</a></p>

• id replaces <name> from html -- use both for backward

compatibility

1) scroll down your page and decide where you want to insert a bookmark (link to)
2) Locate the element that will appear at the top of the browser window when the
link is clicked and the page jumps down.
3) The element will have a block-level element such as <p> or <h?>
Assign the "id" and "name" attributes. The attributes will contain, inside the
quotes, a short word or group of letters that will allow you to reference that name.
4) Go to the location on your page where you want to put a hyperlink
5) Insert the <a> tag and any text you want to appear as a link. The href attribute
will have the same name as you assigned below, BUT it is preceded by a # sign
open centralvalley.html
1) below title:
<p><a href="#am1">About the Market</a></p>
<p><a href="#ho1">Hours of operation</a></p>
<p><a href="#fvl1">Featured Vendor</a></p>
2) locate: About the Market Heading
<h2><a id="am1" name="am1">About the Market</a></p>
3) Repeat for other two sections
 page 56

Image Maps
• hot zones can be created on a large image
• a hot zone is associate with a link to a URL
(en.wikipedia.org/wiki/Image_map)
• based on pixel coordinates

Image map elements

• <img> = contains attributes: src, usemap, id and name
- src= name of image file
- usemap = value assigned to id and name of the <map>
• <map> = mapping coordinates
- id and name attributes are same values as in <img usemap>
• <area> = nested within <map>
- identifies coordinates that will be hot zones

Image map attributes

• usemap = client-side image map
• ismap = server-side image map
• usemap value is preceded by #

ATTRIBUTE DESCRIPTION
usemap names the full image to be used
coords coordinates of the shape in pixels (depends on shape
attribute)
href URL associated with area
nohref placeholder for areas not associated with URL
shape shape of defined area
alt alternate text for area
title important to indicate to the user that the image is mapped.
text instruction accompanying the image
 page 57

<img usemap="#map1" src="image.gif" alt="image" height="20"

width="100" />

• alt tag is required with <img> and <area>

• shape can be rectangle (rect), circle (circle), or polygon (poly)
- rectangle = x, y coordinates for 2 opposite corners
- circle = x,y is center, r is radius
- polygon = has as many x,y pairs as necessary

Vitruvian Man image map example

<p><img usemap="#vitruvian_man" src="davinci.jpg"
alt="Image of Leonardo da Vinci’s Vitruvian Man."
width="205" height="205" /></p>
<p><map id="vitruvian_man" name="vitruvian_man">
<area shape="rect" coords="0, 0, 78, 49" href="arms.html"
alt="Right arm" title="right arm" />
<area shape="rect" coords="128, 0, 205, 49" href="arms.html"
alt="Left arm" title="left arm" />
<area shape="rect" coords="76, 33,128, 55" href="chest.html"
alt="Chest" title="chest" />
<area shape="rect" coords="40, 100, 175, 205" href="legs.html"
alt="Legs" title="legs" />
</map></p>