1 / 6

Image Map

Image Map. You can define a region on your image as clickable. Add usemap=“mapname” parameter to your image. Add a <map> tag to your html where name of map tag is “mapname”. Three kinds Rect angle Circle Poly gon. Image Map. <map name=“mymap”>

coreyv
Download Presentation

Image Map

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 Map • You can define a region on your image as clickable. • Add usemap=“mapname” parameter to your image. • Add a <map> tag to your html where name of map tag is “mapname”. • Three kinds • Rectangle • Circle • Polygon

  2. Image Map <map name=“mymap”> <area shape=rect coords=“...” alt=“...” href=“...”> </map> • Parameters of map: • Name: name of image map. • Parameters of area: • Shape: shape of area: rect, circle, poly • Coords: coordinates (next slide) • Alt: Alternative text. • Href: link.

  3. Shape Coordinates X • Shape types and coordinates: • shape=rect coords="left-x, top-y, right-x, bottom-y" • shape=circle coords="center-x, center-y, radius" • shape=poly coords="x1,y1, x2,y2, x3,y3, ..." Y

  4. Add an image map to your html http://www.bilkent.edu.tr/~ussakli/images/logos.gif • Add above image to the top of your page and display it. • Add a map tag to somewhere in body of your html, with a name “logosmap”. <map name=“logosmap”> </map> • Add a parameter to your image to use this map: usemap=“#logosmap"

  5. Add an image map to your html • Add a rectangle with coordinates “3, 3, 96, 74” with alternative text “Adidas Web Site”, with a link http://www.adidas.com and target to Sports window. • See if it works. • Do the same thing to get the following result. <img src=logos.gif usemap=#logosmap> <map name=“logosmap” > <area shape="rect" coords="3,3,96,74" href="http://www.adidas.com" target="sports" alt="Adidas Web Site" /> <area shape="circle" coords="149,42,40" href="http://www.nike.com" target="sports" alt="Nike Web Site" /> <area shape="rect" coords="3,128,97,175" href="http://www.bbc.com" target="news" alt="BBC Web Site" /> <area shape="poly" coords="104,143,115,125,180,127,188,140,188,177,105,177" href="http://www.cnn.com" target="news" alt="CNN Web Site" /> </map>

More Related