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.
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!