Mouse events on Transparent Element

Recently I am working on a project named 2011.

I am working on a Document Manager Workflow Module, in that project i need to render a div element on a image element to draw some annotation. So what I wanted is to draw a div on image with transparent background and then catch a mouse click event on that div.

I were trying to achieve that since last 3 days but I couldn't. If I am setting background color or background image than I were able to trap that mouse event in IE but if I am setting transparent background than I weren't able to trap any mouse event.

After that googling but not get any solution or might be I were not able to search it properly.

So finally I were make some changes in my code logically, and at the end I got succedd.

What I have done is set transparent background then set a transparent image as a background of that div.

How it is working?

I need transparent background so I set transparent background using style attributes and then I overlap transparent image on that so that transparent image is able to trap mouse event

or simple way

I need transparent background so I set background with transparent image so that transparent image is able to trap mouse event

Here is the faulty code

<img src="yourimagepath" alt='' />

<div style="position:absolute;top:0px;left:0px;padding:10px;width:128px;height:128px;background-color:Transparent;" onclick="alert('you clicked me');">

</div>

Here you will not be able to trap onclick event of the div

Here is the final and working code

<img src="yourimagepath" alt='' />

<div style="position:absolute;top:0px;left:0px;padding:10px;width:128px;height:128px;background-image:url(yourtransparentimagepath);" onclick="alert('you clicked me');">

</div>

Here you will be able to trap onclick event of the div

* Note change image source with your image file path.

What Next

• Stumble it
• Digg this
• Save to Delicious
• Tweet it
• Subscribe

Related Posts