How show rectangles in a asp.net ImageMap?

Discussion in 'ASP .Net Web Controls' started by b. hotting, Oct 27, 2009.

  1. b. hotting

    b. hotting Guest

    Hi All,

    How can I show drawn rectangles (the hotspots) in a asp.net ImageMap? (so
    the user knows where to click)
    i understand that its not possible to use java script in combination with
    the imageMap server control, correct?
    even better would be the MouseOver event to highlight the active rectangle
    where the mouse is on, but that's a bonus ;-)

    Is there another way to show rectangles? (and change (delete/add new ones)
    them as i change the image on the server side?

    if you can point me in the right direction, that would be great.
    A demo/tutorial website/etc...

    Thanks,
    B.
    b. hotting, Oct 27, 2009
    #1
    1. Advertising

  2. On Oct 27, 4:44 pm, "b. hotting" <> wrote:
    > Hi All,
    >
    > How can I show drawn rectangles (the hotspots) in a asp.net ImageMap? (so
    > the user knows where to click)
    > i understand that its not possible to use java script in combination with
    > the imageMap server control, correct?
    > even better would be the MouseOver event to highlight the active rectangle
    > where the mouse is on, but that's a bonus ;-)
    >
    > Is there another way to show rectangles? (and change (delete/add new ones)
    > them as i change the image on the server side?
    >
    > if you can point me in the right direction, that would be great.
    > A demo/tutorial website/etc...
    >
    > Thanks,
    > B.


    Do you really need to have a server control there? HTML Image Maps
    support onMouseOver event.

    here's an example on how you can integrate js with HTML image maps
    http://www.w3schools.com/JS/js_image_maps.asp
    Alexey Smirnov, Oct 27, 2009
    #2
    1. Advertising

  3. b. hotting

    b. hotting Guest

    Hi Alexy,

    thanks, but I do need the server control.

    to simplify the question:
    How can i show/hide a shape (rectangle in my case) (in an image) with a
    mouse over (or enter/leave) event?

    what is the 'normal' way to draw (rectangles)?
    i'm sure there must be an example out there where on the fly drawing occurs.



    "Alexey Smirnov" <> wrote in message
    news:...
    On Oct 27, 4:44 pm, "b. hotting" <> wrote:
    > Hi All,
    >
    > How can I show drawn rectangles (the hotspots) in a asp.net ImageMap? (so
    > the user knows where to click)
    > i understand that its not possible to use java script in combination with
    > the imageMap server control, correct?
    > even better would be the MouseOver event to highlight the active rectangle
    > where the mouse is on, but that's a bonus ;-)
    >
    > Is there another way to show rectangles? (and change (delete/add new ones)
    > them as i change the image on the server side?
    >
    > if you can point me in the right direction, that would be great.
    > A demo/tutorial website/etc...
    >
    > Thanks,
    > B.


    Do you really need to have a server control there? HTML Image Maps
    support onMouseOver event.

    here's an example on how you can integrate js with HTML image maps
    http://www.w3schools.com/JS/js_image_maps.asp
    b. hotting, Oct 28, 2009
    #3
  4. b. hotting wrote:
    > to simplify the question:
    > How can i show/hide a shape (rectangle in my case) (in an image) with
    > a mouse over (or enter/leave) event?
    >
    > what is the 'normal' way to draw (rectangles)?


    The normal way would be to cut the image up into rectangles, assemble them
    in a <table>, and swap them with Javascript or CSS. Or use Flash or perhaps
    Silverlight so that you can draw borders/rectangles over the image
    client-side.

    Maybe an imagemap is not what you need for the interactivity you want.

    Andrew
    Andrew Morton, Oct 28, 2009
    #4
  5. On Oct 28, 2:23 pm, "b. hotting" <> wrote:
    > Hi Alexy,
    >
    > thanks, but I do need the server control.
    >
    > to simplify the question:
    > How can i show/hide a shape (rectangle in my case) (in an image) with a
    > mouse over (or enter/leave) event?
    >
    > what is the 'normal' way to draw (rectangles)?
    > i'm sure there must be an example out there where on the fly drawing occurs.
    >


    Asp.net ImageMap does not support the mouseover effect, and you can
    either override RectangleHotSpot class to add this possibility, or you
    use a simple javascript trick like here

    <script type="text/javascript">
    var areas = document.getElementsByTagName("area");
    for (var i = 0; i < areas.length; i++) {
    var area = areas;
    area.setAttribute("onMouseOver", "alert('Hello World')");
    }
    </script>

    This script must be added after your ImageMap Control. You should see
    alert('Hello World') when mouse is over defined hot spot region.

    Now to get a rectangle or an image over the map you should do more
    complex script, like on the following link

    http://codingforums.com/showthread.php?t=95595
    Alexey Smirnov, Oct 28, 2009
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    492
  2. Ajay Patil
    Replies:
    0
    Views:
    426
    Ajay Patil
    Dec 10, 2003
  3. Chuck Dillon
    Replies:
    4
    Views:
    1,020
    Steve W. Jackson
    Feb 10, 2004
  4. Abs
    Replies:
    4
    Views:
    8,379
    Jesper Nordenberg
    May 14, 2004
  5. b. hotting
    Replies:
    4
    Views:
    3,340
    Alexey Smirnov
    Oct 28, 2009
Loading...

Share This Page