Image Map Using JavaScript and Css

[sagarlotiya]

Hi
I have made one javascript which allows me to add note on image using css and javascript. Every thing works fine.
But following problme occurs.
I want to display allthe notes on image when we mouse over the image and hide the notes when we mouse out the image.
I am also displaying boxes on image which contains the note area.
Now the problem is that i am on image and when i tried to move mouse over the box which is one layer above the image the onmouseout fires which should not happen.
can any one help?
Following is the code
<img src="image.jpg" alt=" " id="imagenote" onmouseover="displayNote(event)" onmouseout="hideNotes(event);" />
There are certain boxes which is made up of div and which is above the image. now when i mouseover the boxes which is above the image the onmouseout fires which should not happen.
what should be the solution.

[acoder]

Moved from the Articles section.

[acoder]

You will need to learn about event bubbling/capturing and the order of events. See link.

[sagarlotiya]

hi acoder,

I have tried to used event capturing and bubbling but it also didn't help me. I want certain specific idea. Can u tell me in some detail or with any example.
Thank you

[acoder]

See the section "Turning it Off". The function, doSomething, contains both cancelBubble = true and e.stopPropagation():

if (!e) var e = window.event
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

[sagarlotiya]

Hi
acoder
Thanks for your response.
I till don't find it the proper way
I have take reference of following script
http://www.dustyd.net/projects/PhotoNotes/
if u can help me then see the script given in this site. in that i want to display the note when user mouseover the images and hide notes when user mouse out the images.

[sagarlotiya]

hi,
acoder
do u have any idea in the above post regarding
http://www.dustyd.net/projects/PhotoNotes/ how to implement onmouseover and onmouseout in the above script then please help me.