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.
- "Creating a Web Site: The Missing Manual"; Matthew MacDonald; 2008
- Photo Credit Thomas Northcut/Photodisc/Getty Images
What Is T-Mobile Hotspot?
T-Mobile Hotspot is a nationwide program that provides T-Mobile customers with the ability to access WiFi from their cell phones, computers and...
How to Create a Clickable Image Map With Dreamweaver
Image maps are pictures with clickable regions also known as "hotspots." When users click on one of the hotspots, they're directed to...
How to Calculate the Diagonal of a Rectangle
The Pythagorean theorem provides a means by which one can calculate the diagonal of a triangle (also known as the hypotenuse). It...
How to Make a Clickable Map for the Web
Most images can only link to a single web page. Creating an clickable image map allows a single image to link to...