Overlapping divs and mouse clicks

[Stark]

I have a large image contained in a div, with javascript functionality that triggers when you click on different locations on the image.

I also have a number of smaller divs that are placed as markers on top of this image. Kind of like how google maps places place markers over a map.

My problem though, is that my javascript that should trigger when clicking on the image behind, doesn't work when you try to click over one of the markers. Is there any way I can make the marker divs be ignored so that when you click on them, it actually triggers a mouse click on the div underneath?

Does the question even make sense properly? I figured it was really an html/css type question rather than a javascript one. If it turns out I'm wrong, sorry for posting in the wrong place!

[jonte]

What if you trigger the same action on the placemarks as on the main image?

[londrum]

i'm sure there are easier ways of doing it than this, but couldn't you just put a big blank gif over the whole thing (on top of both the image and markers) and click on that instead?

[Stark]

Thanks for those that took the time to answer, the problem got rather more complicated and needed a better solution in the end, so I never found a way of doing what I wanted.

[jshanman]

I came across a similar problem while creating my timeline api.

Basicly, I had to program the script so that when adding markers, they must be child elements of the element that you want to receive the event, then once an event is fired, have the parent contain the only listener for that event, and if something is supposed to be done to the marker, that can be triggered from the parent elements event handeling function.

here is an example of my code:

...
getEvent: function (e, el) {
if (!e) {
if (el) {
e = el.document.parentWindow.event;
} else {
e = window.event;
}
}
if (!e.srcElement) {
var el = e.target;
while (el!= null && el.nodeType!= 1) {
el = el.parentNode;
}
e.srcElement = el;
}
if (typeof e.offsetX == "undefined") {
e.offsetX = e.layerX;
e.offsetY = e.layerY;
}
return e;
},
onmousedown: function (e) {
e = Timeline.eHandlers.getEvent(e, this);
if (e.srcElement.bubble) {
this.timeline.mouseDown = true;
var xPos = e.screenX - this.offsetLeft;
this.timeline.lastX = xPos;
this.timeline.lastClickX = xPos;
this.timeline.Target.Eonmousedown(e);
}
},
...

- Some of thise code was used from another API (the getEvent from "slider webfx").
- the srcElement.bubble property is a custom property that tells whether to process the event from the child.
- This is a JavaScript issue (not html/browser)

- JS

[edited by: tedster at 1:24 am (utc) on May 18, 2006]