5 - creating an image map
TRANSCRIPT
-
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