How to maintain onclick event for div beneath another div

I have a div which has an onclick event assigned and that works. I placed another div after the first one (on top of it) so as to hide some of the first div. Like a skin if you like. The 2nd or top div has transparent sections (this is a .png file). So when I try to click on the image underneath (the bottom div) it won't trigger my javascript function.

I thought that transparent images let you click on items beneath them? How would I go about solving this issue. I need the outer or top div to hide some of the lower div as it is a skin or frame (for a carousel). Is this possible?
LVL 20
Mark BradyPrincipal Data EngineerAsked:
Who is Participating?
scrathcyboyConnect With a Mentor Commented:
The problem is not necessarily the images, but the DIVs.  When one DIV is on top of another, the bottom one is out of focus -- so no onClick functions in it will work.  

Have you tried getting the 2nd image out of a DIV and simply use javascript to place it over the other image?
"I thought that transparent images let you click on items beneath them?"  
If true, this should work.
Mark BradyPrincipal Data EngineerAuthor Commented:
Hmmm do you have a small example using javascript? That might work.
U can use eventListner to prevent these this for example

ucan refer this link to better understanding of eventListners..
		<script language="javascript" type="text/javascript">
			function addEventSimple(obj,evt,fn) { // asign eventHandlers
	        if (obj.addEventListener)
	        else if (obj.attachEvent)
			function removeEventSimple(obj,evt,fn) {//remove eventHandlers
	            if (obj.removeEventListener)
	            else if (obj.detachEvent)
			function perventEventFlow(event){
				if( typeof != "undefined"){
				else if(typeof event.srcElement != "undefined"){
					event.cancelBubble = true;
					event.returnValue = false;
				document.getElementById("div1").onclick = function(){alert(}
				document.getElementById("div2").onclick = function(){alert(}
				addEventSimple(document.getElementById("div3"), "click", perventEventFlow);
				addEventSimple(document.getElementById("div3"), "click", perventEventFlow);
		Div with no eventlistner 
		<div id="div1" style="border:1px solid black; padding:5px;width:200px;height:200px;" >
			<div id="div2" style="border:1px solid black; padding:5px;width:100px;height:100px;"></div>
		Div with no eventlistner 
		<div id="div3" style="border:1px solid black; padding:5px;width:200px;height:200px;" >
			<div id="div4" style="border:1px solid black; padding:5px;width:100px;height:100px;"></div>

Open in new window

Mark BradyPrincipal Data EngineerAuthor Commented:
Thanks for the idea and sample code. You were absolutely correct in saying that the bottom div can not receive focus and/or accept an onlick event. In this case, I solved it by cutting up the image and placing all the pieces into separate divs that did NOT overlap the underlying div image so I am able to run onclick events now. Thanks for the heads up.
glad you solved it.  A piecemeal overlay is probably the best solution to this.  I thought of that, but did not want to suggest it, because of complexity.  Glad you took the bull by the horns !!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.