How to Create Web Image Hotspots

Save

One of the basic functions necessary on a Website is the ability to navigate from one page to another. This is frequently accomplished with hyperlink assigned to a section of text. Clicking on the section of text activates the link and the user's browser is directed to the associated page. Associating an image or section of an image with a hyperlink to a new page or piece of content requires a few more lines of code.

  • Select a Web-ready graphic file.

  • Create an image map using the HTML <map> tag. For example: <map id="ThisPicture" name="ThisPicture"> </map>. This is necessary to define an area in which the hyperlink will be active.

  • Define the size and shape of the hotspot and the link. For a rectangular hotspot: <area href="LinkedPage.htm" shape="rect" coords="5,5,25,50" alt="Rectangular Hotspot" />. This defines the area 20 pixels wide starting 5 pixels from the left side of the image and 45 pixels tall starting 5 pixels from the top of the image. This area provides an active link to a page named LinkedPage.htm.

  • Link the two sections of code together with "usemap" following this example: <img src="ThisPicture.jpg" usemap="#ThisPicture" alt="Rectangular Hotspot" />. This piece of code identifies the image and links it to the map and coordinates that should be used as the hotspot. The "alt" tag displays text that will be shown if the browser is not capable of displaying graphic images.

Tips & Warnings

  • It is also possible to create polygonal and circular hotspots as well as rectangles. Several hotspots may also be defined for a single image. Image coordinates are measure on an x,y axis with the x as the horizontal measurement beginning at zero on the left side of the image and the vertical y measurement beginning at zero at the top of the image.

References

  • "Creating a Web Site: The Missing Manual"; Matthew MacDonald; 2008
  • Photo Credit Thomas Northcut/Photodisc/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!