Mouse over regions

[Mark Denardo]

Ok here's my problem: I have a large number of pages that each contain a
large image that when a user mouses over a specific region of the image I
need that section of it to show a new image (essentially highlighting the
area with a border and some bold text). I have it working fine using
imagebuttons, but my problem is that in order to create the image buttons, I
have to crop the large image file into smaller regions in Photoshop to make
image buttons and then calculate where on the page each image goes, etc.
etc. A lot of work that I would like to avoid.

My ideal solution, if such a thing exists, is to just be able to create hot
spot regions on parts of the main image and when a user moves over the hot
spot region it will trigger some code (ideally on the client side) and have
the main image change to show the highlighted region (essentially
eliminating the necessity of say an image button).

I played around some with imagemaps, but it doesn't seem to contain any
onmouseover properties.

Any experts out there know a slicker way to handle what I want to do?

Mark

 

[Scott M.]

Image Maps are exactly what you want to do. Just add the onMouseOver
attribute and then your client-side code to the <AREA> tags.

 

[Mark Denardo]

I get an error when I try to add a property to RectangleHotSpot. Am I
spelling it correct (I cut and pasted the same code I used on the image
button and it worked fine there)

Parser Error Message: Type 'System.Web.UI.WebControls.RectangleHotSpot' does
not have a public property named 'onmouseover'.

Here's my markup code:
<asp:ImageMap ID="ImageMap1" runat="server" Style="left: 100px; position:
absolute; top: 200px"

ImageUrl="~/Images/maps/main.gif" onclick="ImageMap1_Clicked"
width="1073" height="635">

<asp:RectangleHotSpot

Left="0" Top="0" Bottom="334" Right="573"

hotspotmode="PostBack"

postbackvalue="NW"

onmouseover="this.src='../Images/maps/NW.gif'"

onmouseout="this.src='../Images/maps/main.gif'"

/>




</asp:ImageMap>

 

[Scott M.]

Do it in your code behind:

ImageMap1.attributes.add("onclick", "ImageMap1_Clicked")