-
8/6/2019 5 - Creating an Image Map
1/19
-
8/6/2019 5 - Creating an Image Map
2/19
Image MapsImage Maps
Image maps are used frequently for WebImage maps are used
frequently for Web
site navigation.site navigation.
-
8/6/2019 5 - Creating an Image Map
3/19
-
8/6/2019 5 - Creating an Image Map
4/19
Image maps uses:Image maps uses:
EE--commerce sitecommerce site
Geographical mapGeographical map
Real EstateReal Estate
Corporate web pageCorporate web page
Links to products and servicesLinks to products and services
-
8/6/2019 5 - Creating an Image Map
5/19
ServerServer--side Image mapsside Image maps
In a serverIn a server--side image maps, the imageside image
maps, the image
is displayed by the client andis displayed by the client and
implemented by a program that runs on aimplemented by a program
that runs on aweb server. The browser send the x andweb server. The
browser send the x and
y coordinate to the web server. The weby coordinate to the web
server. The web
server interprets the information andserver interprets the
information anddirect the visitor to the correct page.direct the
visitor to the correct page.
Web server does all the work.Web server does all the work.
-
8/6/2019 5 - Creating an Image Map
6/19
ClientClient--side Image mapsside Image maps
The coordinates are included in theThe coordinates are included
in the
HTML file along with the URL to whichHTML file along with the
URL to which
the image should link.the image should link.
The browser does all the workThe browser does all the work
In this course, we will discuss the clientIn this course, we
will discuss the client--
side image mapping.side image mapping.
-
8/6/2019 5 - Creating an Image Map
7/19
4 step process in creating4 step process in creating
an image mapan image map1.1. Select an image to use as an
imageSelect an image to use as an image
mapmap
2.2. Sketch in the hotspots on the imageSketch in the hotspots
on the image
3.3. Map the image coordinates for eachMap the image coordinates
for each
hotspothotspot
4.4. Create the HTML code for the imageCreate the HTML code for
the image
mapmap
-
8/6/2019 5 - Creating an Image Map
8/19
Map areas using 3 shapesMap areas using 3 shapes
RectangleRectangle
CircleCircle
PolygonPolygon
-
8/6/2019 5 - Creating an Image Map
9/19
-
8/6/2019 5 - Creating an Image Map
10/19
CircleCircle
Forcircle, use the center point and theForcircle, use the center
point and the
radius as the coordinatesradius as the coordinates
-
8/6/2019 5 - Creating an Image Map
11/19
-
8/6/2019 5 - Creating an Image Map
12/19
Coding the MapCoding the Map
The x and y coordinates are inserted inThe x and y coordinates
are inserted in
the tag with thethe tag with the coordscoords
attribute,attribute,
within quotation marks and separated bywithin quotation marks
and separated by
commas.commas.
-
8/6/2019 5 - Creating an Image Map
13/19
NOTE:NOTE:
It is very important to add the tag usemapIt is very important
to add the tag usemap
for the image that will be used.for the image that will be
used.
-
8/6/2019 5 - Creating an Image Map
14/19
Tag Attributes for Tag Attributes for
--Indicates the URL of the clientIndicates the URL of the
client--side imageside image
mapmap
--indicates a server side image mapindicates a server side image
map
-
8/6/2019 5 - Creating an Image Map
15/19
--creates a clientcreates a client--side image mapside image
map
Attribute:Attribute:
namename
..
..
-
8/6/2019 5 - Creating an Image Map
16/19
-
8/6/2019 5 - Creating an Image Map
17/19
attributes attributes
shapeshape
--indicates the shape of the map area (rect, poly,indicates the
shape of the map area (rect, poly,circle)circle)
coordscoords
--indicates the x and y coordinates of the pointsindicates the x
and y coordinates of the pointsbounding the map areabounding the
map area
hrefhref
--indicates the link (URL) used for a map areaindicates the link
(URL) used for a map areaaltalt
--indicates the alternative text for the imageindicates the
alternative text for the image
-
8/6/2019 5 - Creating an Image Map
18/19
ExampleExample
-
8/6/2019 5 - Creating an Image Map
19/19
