1 / 5

Create Interactive Image Maps Using HTML <map> and <area> Tags

Learn how to enhance your website's user experience by creating interactive image maps using HTML. Image maps allow you to define clickable "hot spots" within an image, providing stylized navigation options. This tutorial introduces you to the essential components: the `<img>` and `<map>` tags. You'll discover how to create rectangular, circular, and polygonal clickable areas using specific coordinates. Implementing these maps can streamline navigation and improve user engagement. Follow our example to see how to integrate image maps seamlessly into your web projects.

cameo
Télécharger la présentation

Create Interactive Image Maps Using HTML <map> and <area> Tags

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. HOME CALENDAR ASSIGNMENTS LINKS GOOGLE Introduction to ImageMaps • Imagemaps allow you to create highly stylized links by placing them within an image. • Imagemaps specify “hot spots” within an image that are clickable. • Imagemaps have two components: the image, and the map specifying the hotspots. • We’ll use this example:

  2. The <img> and <map> tags • Images are tied to specific image maps using names in the tags. • The image requires a usemap parameter with the name of the map <img src="imap.jpg" width=200 height=292 usemap="#nav"> • The map describes a set of areas that are clickable • Rect: rectangular areas require x,y coordinates for the top left and bottom right coordinates. • Circ: circular areas require an x,y coordinate for the center, and a value for the radius. • Polygon: describes any polygon using s set of x,y coordinates. • The unit of measure is the pixel.

  3. The <map> tag • The map describes a set of areas that are clickable • Rect: rectangular areas require x,y coordinates for the top left and bottom right coordinates. • Circ: circular areas require an x,y coordinate for the center, and a value for the radius. • Polygon: describes any polygon using s set of x,y coordinates. • The unit of measure is the pixel, so you should • Create the image using a specific size in pixels, OR • Force the image size using the ‘height’ and ‘width’ parameters of the <img> tag. • The map tag receives a name matching the name called out in the <img> tag.

  4. Imagemap Example <img src="imap.jpg" width=200 height=292 usemap="#nav"> <map name="nav"> <area shape="rect" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175home.html" coords="0, 0, 200, 35" target="display"> <area shape="rect" coords="0, 36, 200, 70" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175calendar.html" target="display"> <area shape="rect" coords="0, 71, 200, 105" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175assignments.html" target="display"> <area shape="rect" coords="0, 106, 200, 140" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175links.html" target="display"> <area shape="circ" coords="100, 210, 70" href="http://www.google.com" target="display" • </map>

  5. Imagemap Example • http://www.cs.ucf.edu/courses/cgs3175/example/cgs3175imagemap.html

More Related