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

Posted on 2004-10-28
Last Modified: 2008-03-10

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.

Question by:arunatata
    LVL 18

    Expert Comment

    Sounds like a simple javascript and an html image map...
    LVL 4

    Accepted Solution

    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.

    <MAP name="map1">
     <AREA href="rectA.asp"
              alt="details of rectA"
     <AREA href="rectB.asp"
              alt="details of rectB"
     <AREA href="circleA.asp"
              alt="details of circleA"
     <AREA href="top10.asp"
              alt="Top Ten"


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: MongoDB Object-Document Mapper for NodeJS

    NodeJS (JavaScript on the server) is awesome, but some developers get confused about NoSQL when it comes to working in Node with MongoDB (NoSQL database). Do you need a better explanation of how to use Node.js with MongoDB? The most popular choice is the Mongoose library.

    Suggested Solutions

    I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
    Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
    With the advent of Windows 10, Microsoft is pushing a Get Windows 10 icon into the notification area (system tray) of qualifying computers. There are many reasons for wanting to remove this icon. This two-part Experts Exchange video Micro Tutorial s…
    Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

    846 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now