1 / 13

Image Maps

Image Maps. What it Does. Different parts of the image activate different hyperlinks. Server-Side Image Maps. Image displayed by client Program runs on server Client browser sends program the (x,y) coordinates of the mouse click

irisa
Download Presentation

Image Maps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Image Maps

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

  3. Server-Side Image Maps • Image displayed by client • 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 Image Maps

  4. Server-Side Image Maps • Program runs on server • Disadvantages • Cannot test page without server running • Slow • 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 Image Maps

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

  6. Creating Server-Side Image Maps • Map file • Statements • default URL • circle URL x,y radius (radius in pixels) • rect URL x,y x,y • poly URL x1,y1 x2,y2 … xn,yn • point URL x,y • Upper lefthand corner is (0,0) Image Maps

  7. Creating Server-Side Image Maps • Map file • If cursor not in region, than nearest point is used, if there are any • Can have overlapping regions • First statement in map file which covers point is used • If default is used, then you shouldn't have any points Image Maps

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

  9. Creating Server-Side Image Maps • 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

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

  11. Creating Client-Side Image Maps • <area>-tag • <area shape="poly" coords="x1,y1,…,xn,yn" href="file.html"> • <area shape="rect" coords="x1,y1,x2,y2" href="file.html"> • <area shape="circle" coords="x,y,radius" href="file.html"> Image Maps

  12. Creating Client-Side Image Maps • Can use target=window_name for frames <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

  13. Creating Client-Side Image Maps • 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

More Related