How show rectangles in a asp.net ImageMap?

  • Thread starter Thread starter b. hotting
  • Start date Start date
B

b. hotting

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.
 
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.
Click to expand...

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



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.
Click to expand...

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 said:
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)?
Click to expand...

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
 
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.
Click to expand...

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
 
Back
Top