Image Maps What it Does n Image Maps

  • Slides: 13
Download presentation
Image Maps

Image Maps

What it Does n Image Maps Different parts of the image activate different hyperlinks

What it Does n Image Maps Different parts of the image activate different hyperlinks 2

Server-Side Image Maps Image displayed by client n Program runs on server n –

Server-Side Image Maps Image displayed by client n Program runs on server n – 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 Image Maps 3

Server-Side Image Maps n Program runs on server – Disadvantages Cannot test page without

Server-Side Image Maps n Program runs on server – Disadvantages 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 n Image Maps 4

Client-Side Image Maps No program which runs on server n All processing occurs in

Client-Side Image Maps No program which runs on server n All processing occurs in browser n Supported by very few browsers n Image Maps 5

Creating Server-Side Image Maps n Map file – Statements default URL n circle URL

Creating Server-Side Image Maps n Map file – Statements default URL n circle URL x, y radius (radius in pixels) n rect URL x, y n poly URL x 1, y 1 x 2, y 2 … xn, yn n point URL x, y n – Upper lefthand corner is (0, 0) Image Maps 6

Creating Server-Side Image Maps n Map file – If cursor not in region, than

Creating Server-Side Image Maps n Map file – If cursor not in region, than nearest point is used, if there 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 Image Maps 7

Creating Server-Side Image Maps n In your HTML page, include the following, <a href="/cgi.

Creating Server-Side Image Maps n In your HTML page, include the following, <a href="/cgi. bin/imagemap/ ~xyz/myimage. map"> <img src="image. gif" ismap></a> Image Maps 8

Creating Server-Side Image Maps n If you don't have an image editor to get

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> <a href="nowhere"><img src="image. gif" ismap> Image Maps 9

Creating Client-Side Image Maps All information is document n <map>…</map> n part of HTML

Creating Client-Side Image Maps All information is document n <map>…</map> n part of HTML <map name="mapname"> coordinates and links </map> Image Maps 10

Creating Client-Side Image Maps n <area>-tag – <area shape="poly" coords="x 1, y 1, …,

Creating Client-Side Image Maps n <area>-tag – <area shape="poly" coords="x 1, y 1, …, xn, yn" href="file. html"> – <area shape="rect" coords="x 1, y 1, x 2, y 2" href="file. html"> – <area shape="circle" coords="x, y, radius" href="file. html"> Image Maps 11

Creating Client-Side Image Maps n Can use frames target=window_name for <map name="books"> <area shape="poly"

Creating Client-Side Image Maps n Can use frames target=window_name for <map name="books"> <area shape="poly" coords="70, 0, 0, 37, 0, 183, 27, 192, 27, 48, 103, 9" href="file. html"> </map> <img src="image. gif" usemap="#books"> Image Maps 12

Creating Client-Side Image Maps n Can use both types of image maps <a href="cgi.

Creating Client-Side Image Maps n Can use both types of image maps <a href="cgi. bin/imagemap/~xyz/myimage. map"> <img src="image. gif" usemap="#books" ismap> </a> – Install myimage. map on server – Include <map name="books">…</map> somewhere on page – Client-side tried first, else does server-side Image Maps 13