How to Create Image Hot Spots

My WYSIWYG editor does not have an easy way to handle image maps; that is, creating hyperlinks in different areas of an image on a web page. For example, you display a map of the United States and you want visitors to your site to click on their state to find a store in that state.

Map of the United States

In order to make such a “hot spot” you have to know the coordinates of that spot, but how do you determine those? Some HTML editors, such as Dreamweaver and Frontpage make this easy by allowing you to draw the hot spots right on the image and take care of the code, but if you don’t have that option, what do you do?

Fortunately, there is a trick where your browser will tell you the coordinates. I found out about this at http://www.elated.com/articles/creating-image-maps/.  That site explains the procedure quite well, so I won’t go into the details here. But, to summarize, this is how it works.

1.    Prepare the page with the image in it.

2.    Place “dummy” HTML tags around the image.

3.    Upload the page to your website.

4.    Load the uploaded page into your browser.

5.    Move your mouse to the top left-hand corner of the rectangle where you want the hot spot.

6.    The x and y coordinates of that point show up in the status bar at the bottom of the browser window.

7.    Write down the coordinate values.

8.    Repeat steps 5 to 7 for the bottom right-hand corner of the rectangle.

9.    Incorporate these 4 coordinates into your HTML code, as explained in the article.

Instead of rectangular hot spot areas you can also have circles and polygons using the same method. The article also explains how to do that.

I tested it and it works like a charm.

To your success!

About these ads

About peterstechtalk

I have a background in Electronic Engineering and many years of experience in computer hardware and software. I am also an accomplished Technical Writer. I am eager to assist business owners improve their bottom line through the creative use of Internet technologies. More information at www.sbpgo.com.
This entry was posted in HTML. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s