Click here to Skip to main content
15,867,835 members
Articles / Web Development / ASP.NET
Article

Image Map / Hot Spot _ Point Plotting

Rate me:
Please Sign up or sign in to vote.
1.86/5 (3 votes)
11 Jan 20073 min read 27.2K   365   12  
A tool for collecting hot spot coordinates.

Introduction to Project

While using image maps you may find it frustrating to gather the points you need to declare the hot spots for your image maps. You can now use my simple tool to plot the points on an image and simply copy and past the point list into your image map control.

You will need some way to run ASP.NET websites on your local machine. If you don’t already have a method to do this then my recommendation is to get Web Developer Express from Microsoft who provides this excellent development environment free of charge. This program has only been tested in IE 6.

Using the Point Plotting Tool

Overview of Page Layout

You will find on each page a navigation menu in the top left corner, options for the page in the lower left and the main content on the right side of the pages. Below is a picture of the navigation control that stays constant across all three pages.

Sample screenshot

Main Page

The options for the main page include a text box where the points are displayed, clear point list button, draw point list button and a way to name and save your point lists.

Sample screenshot

The main content area displays the current active image and the lines corresponding to the active point list. If the lines do not appear click the draw point list button and the main content are will refresh with the points drawn on the active image. To create more points all you need to do is click on the picture where you want a point to be plotted.

Sample screenshot

Manage Images

The options for the manage images page include a browse button which allows you to search you computer and load in the image map picture. When you load in a picture it is copied to this program and will not be deleted from its original location. After you select an image with the browse button click the add image file button to add your selected image to the program. Next select the image you want from the drop down list and click the make image active button to have the image display on the main page.

Sample screenshot

The main content area has a data grid listing the images that have been added and under the data grid is a image gallery that is not shown here. You can remove images from the program by pushing the delete button on the data grid however the program will not allow you to remove the currently active image. Also this does not delete the original image only a copy that has been created by the program.

Sample screenshot

Manage Point Lists

The options for the manage point lists page includes a drop down box for selecting previously created point lists and the button make point list active. After you select a point list from the drop down click the button and when you return to the main page your list will be in the point list text box. You will need to push the draw lines button on the main page to see the points drawn out for the current active point list.

Sample screenshot

The main content area has a data grid listing the saved point lists that have been added. You can remove point list by clicking the delete button next to the list you wish to remove however the program will not let you remove the currently active list. Also you can click on the list file name to see the point list in a new window.

Sample screenshot

Credits

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --