Creating a clickable image map to refer to different asp pages based on area clicked on

Hi,

I am trying to create a map in HTML/ASP that will be representative of the layout of an engineering lab. There are different sections in the map (Represented by rectangles and circles) that refer to different sets/equipment in the lab. I want to design this map so that whenever my user clicks on one particular equipment in the lab, it shows him the status of that equipment. How can I create the map itself and how can I specify which area should lead to what status?

Hope the example below makes this question clearer

Map Layout is:

Rect A                                      RectB RectC


                   CircleD                              CircleE                          RectF

When the user clicks on RectA he should get the status for RectA. When he clicks on CircleD, it should show him the status for CircleD etc etc.

Please help.

arunatataAsked:
Who is Participating?
 
sprisonerConnect With a Mentor Commented:
Hi arunatata,

check this out:
   OBJECT data = "your image file"
    and make sure usemap = "value" is followed by # and this value is same as the name of MAP tag.
    should work. set the co-ordinates appropriate. That's hit n trial method. Else u can get softwares on net to help u check co-ordinates of a map.

<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
   <P>This is a navigation bar.
   </OBJECT>

<MAP name="map1">
 <AREA href="rectA.asp"
          alt="details of rectA"
          shape="rect"
          coords="0,0,118,28">
 <AREA href="rectB.asp"
          alt="details of rectB"
          shape="rect"
          coords="184,0,276,28">
 <AREA href="circleA.asp"
          alt="details of circleA"
          shape="circle"
          coords="184,200,60">
 <AREA href="top10.asp"
          alt="Top Ten"
          shape="poly"
          coords="276,0,276,28,100,200,50,50,276,0">
</MAP>

Regards,
Nash
0
 
mgfranzCommented:
Sounds like a simple javascript and an html image map...
0
All Courses

From novice to tech pro — start learning today.