HTML Project 05

Creating an Image Map

Adding an Image to Use
as an Image Map
 Two <img> attributes are used when adding
an image to use as an image map:

 usemap Client-side image map

 ismap Server-side image map
Adding an Image to Use
as an Image Map

You will be using the usemap attribute which

tells the browser which client-side image map
will be used for that image
 
<img src=”image.gif” width=” “ height=” “
hspace =” “ usemap=”#map target
name” />
 
Creating an Image Map
The client-side image map is placed within the <map> tag and
defines the x-and y- coordinates of the areas on the image being
used for the image map.
 
<map name=”map name”>
 
<area shape=”rect” coords=” “ href=” URL “>
or
<area shape=”circle” coords=” “ href=” URL “>
or
<area shape=”poly” coords=” “ href=” URL “>
 
</map>
Creating an Image Map

 When an image is used as a link, the entire

image is a clickable element for a link
 With an image map, the entire image does
not have to be clickable—one or more
specific areas serve as the hotspots
 
Creating an Image Map
CLIENT-SIDE IMAGE MAP
 You have to include the coordinates AND the URL to which to link in the
HTML file.
  
Select the image to use
 
Sketch in the hotspots on the image
Map the image coordinates for each hotspot
 
Create the HTML code of the image map
 
HTML CODE / TAGS NEEDED
 
<map></map> and <area>
Creating an Image Map

 Do not use the height and width attributes in

image tags in Project 5.
 Do include alt attribute!
 The image size will change and be different
from the image displayed in Paint.
  This will cause the image map to be
incorrect.
Notes

 Do not use the height and width attributes in

image tags in Project 5.
  Do include alt attribute!
  The image size will change and be different
from the image displayed in Paint.
  This will cause the image map to be
incorrect.
Codes for Creating an Image Map

  When an image is used as a link, the entire image

is a clickable element for a link
 With an image map, the entire image does not
have to be clickable—one or more specific areas
serve as the hotspots
 Select the image to use (usually a GIF or JPG)
 Sketch in the hotspots on the image (mentally)
 Map the image coordinates for each hotspot (Use
PAINT to figure out coordinates)
 Create the HTML code of the image map
HTML CODE / TAGS NEEDED
  You will be using the usemap attribute in the Image Tag—which
tells the browser which client-side image map will be used for that
image.

Image Tag Attributes:

 
<img src="image.gif" width="54 " height="65 " hspace ="20 "
usemap="#map target name" />
 
 
The client-side image map is placed within the <map> tag and
defines the x-and y- coordinates of the areas on the image being
used for the image map:
HTML CODE / TAGS NEEDED
Server-Side versus Client-Side
Image Maps
Project 05 – Creating an Image Map
Server-Side versus Client-Side Image
Maps
  Two types of image maps exist: server-side and client-
side
 In a server-side image map, the image is displayed by
the client (browser) and implemented by a program
that runs on the Web server. When a Web page visitor
clicks a link on a server-side image map, the browser
sends the x- and y-coordinates of the mouse click to the
Web server, which interprets them and then links the
visitor to the correct Web page based on those
coordinates. Thus, with a server-side image map, the
Web server does all the work.
Server-Side versus Client-Side Image
Maps
 With a client-side image map, the browser
does all the work. It does not have to send
the x- and y-coordinates of the mouse click to
the Web server to be interpreted. Instead,
the coordinates are included in the HTML file
along with the URL to which to link. When a
visitor to a Web page clicks within a client-
side image map, the browser processes the
data without interaction with the Web server.
Server-Side versus Client-Side Image
Maps
ADVANTAGES? DISADVANTAGES?

 All browsers support  Some older browsers do

server-side image maps. not support client-side
 Client-side image maps image maps.
help to reduce the load on  Server-side image maps
the Web server and require additional software
download faster. on the Web server; image
maps must be registered
on the Web server which
takes additional time.
Apply Your Knowledge
Project 05 – Creating an Image Map
Apply Your Knowledge

Open file and make corrections:

 
<html>
<head>
<title>Apply5</title></head>
<body>
<h1 align="center"><font
face="garamond">Student Health
Foods</font></h1>
Apply Your Knowledge

The Student Health Foods store has been

opened for the past two semesters. The
store sells many types of health foods.
Store hours are 7:30 a.m. to 4:30 p.m. It is
located next door to the school library. Our
records setting sales can be found by
clicking on the coins above or the links
below.</p>
Apply Your Knowledge

<img src="coins.gif" />

 
<br /><a href="http://">Health Bars |
<a href="http://">Health Drinks</a> |
<a href="http://">Other</center>
Apply Your Knowledge

<map name="coins">
<area shape="rectangle" coords=""
href="http://">
<area shape="polygon" coords="1"
href="http://">
<area shape="circ" coords="" href="http://">
 
</map>
</body>
</html>
Apply Your Knowledge

<center> usemap="#coins"
 
</a>
 
</a>
 

add all coordinates & URLs

“poly”
AYK Image Tag
 Image Tag

<img src= “coins.gif” height width alt= “Coins”

usemap= “#coins”/>

<map name= “coins”>

<area shape = “rect” coords= “ ” href= http://www. >
<area shape = “poly” coords= “ ” href= http://www. >
<area shape = “circle” coords= “ ” href= http://www. >
</map>
AYK Image Tag

<img src= “imagemapimages.bmp” height width alt=

“Images”
usemap= “#imagemapimages” />
 
 <map name= “imagemapimages”>
<area shape = “rect” coords= “40,40,166,117” href=
http://www. >
<area shape = “poly” coords= “ 111,246,225,246 ” href=
http://www. >
<area shape = “circle” coords= “ 315,180,74” href= http://www.
>
</map>
Image map button bar A menu bar that uses graphical images
Server-side image map  Image is displayed by the client
(browser) and implemented by a
program that runs on the Web
server
Image Map types  Web server does all the work
Client-side image map  The browser processes the data
<map></map>and <area> without interaction with the Web
server
 The browser does all the work
After determining how to divide the image into areas, you must determine the
x- and y-coordinates coordinates
Based on a position relative to the x- and y- axes
x-axis Runs horizontally along the base of the image
Y-axis Runs vertically along the left of the image
The top-left and bottom right corners of an image (0,0,0,0) for a rectangular
map area
Coordinate pair
The center point and radius for a circular map area (0,0,0)
Every corner for a polygonal map area (0,0,0,0,0,0)
Rectangular Map Value = “rect”
Shape Attributes Circular Map Value = “circle”
Polygonal Map Value = “poly”
Tag Attributes Used to Create Image Maps

<img> usemap Indicates the

ismap URL of a client-
side image map
Indicates a
server-side
image map
 Tags and Tag Attributes Used to Create Image Maps
<map></map> Creates a client-side image map

name Defines the map’s name

<area> Defines clickable areas within a <map>

element, as well as links and anchors

shape Indicates the shape of the map area; possible

coords values are rect, poly, and circle
href Indicates the x- and y-coordinates of the
points bounding the map area
alt
Indicates the link (URL) used for a map area
Indicates the alternate text for the image