Download presentation
Presentation is loading. Please wait.
1
Image Maps
2
2 What it Does n Different parts of the image activate different hyperlinks
3
Image Maps3 Server-Side Image Maps n Image displayed by client n Program runs on server –Client browser sends program the (x,y) coordinates of the mouse click –Program refers to map file which corresponds regions to URLs and invokes appropriate one
4
Image Maps4 Server-Side Image Maps n Program runs on server –Disadvantages n Cannot test page without server running n Slow n When you move mouse over hyperlink, you don't see the URL since the web browser doesn't know it; you see URL of the map program itself and an (x,y) coordinate
5
Image Maps5 Client-Side Image Maps n No program which runs on server n All processing occurs in browser n Supported by very few browsers
6
Image Maps6 Creating Server-Side Image Maps n Map file –Statements n default URL n circle URL x,y radius (radius in pixels) n rect URL x,y x,y n poly URL x1,y1 x2,y2 … xn,yn n point URL x,y – –Upper lefthand corner is (0,0)
7
Image Maps7 Creating Server-Side Image Maps n Map file –If cursor not in region, than nearest point is used, if there are any –Can have overlapping regions n First statement in map file which covers point is used –If default is used, then you shouldn't have any points
8
Image Maps8 Creating Server-Side Image Maps n In your HTML page, include the following,
9
Image Maps9 Creating Server-Side Image Maps n If you don't have an image editor to get coordinates, create the following HTML page <html><head><title>Coordinates</title></head><body>
10
Image Maps10 Creating Client-Side Image Maps n All information is part of HTML document n … n … coordinates and links </map>
11
Image Maps11 Creating Client-Side Image Maps n -tag – – –<area shape="rect" coords="x1,y1,x2,y2" href="file.html"> –<area shape="circle" coords="x,y,radius" href="file.html">
12
Image Maps12 Creating Client-Side Image Maps n Can use target=window_name for frames </map>
13
Image Maps13 Creating Client-Side Image Maps n Can use both types of image maps\ </a> –Install myimage.map on server –Include … somewhere on page –Client-side tried first, else does server-side
Similar presentations
