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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

scrathcyboyCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mark BradyPrincipal Data EngineerAuthor Commented:
Hmmm do you have a small example using javascript? That might work.
0
manjunathubCommented:
U can use eventListner to prevent these this for example

ucan refer this link to better understanding of eventListners..
http://www.howtocreate.co.uk/tutorials/javascript/domevents
<html>
	<head>
		<script language="javascript" type="text/javascript">
			function addEventSimple(obj,evt,fn) { // asign eventHandlers
	        if (obj.addEventListener)
		        obj.addEventListener(evt,fn,false);
	        else if (obj.attachEvent)
		        obj.attachEvent('on'+evt,fn);
			}
			function removeEventSimple(obj,evt,fn) {//remove eventHandlers
	            if (obj.removeEventListener)
		            obj.removeEventListener(evt,fn,false);
	            else if (obj.detachEvent)
		            obj.detachEvent('on'+evt,fn);
			}
			
			function perventEventFlow(event){
			
				if( typeof event.target != "undefined"){
					event.stopPropagation();
					event.preventDefault();
					alert(event.target.id)
					
				}
				else if(typeof event.srcElement != "undefined"){
					event.cancelBubble = true;
					event.returnValue = false;
					alert(event.srcElement.id)
				}
				
			}
			window.onload=function(){
				document.getElementById("div1").onclick = function(){alert(this.id)}
				document.getElementById("div2").onclick = function(){alert(this.id)}
				addEventSimple(document.getElementById("div3"), "click", perventEventFlow);
				addEventSimple(document.getElementById("div3"), "click", perventEventFlow);
			}
		</script>
	</head>
	<body>
		Div with no eventlistner 
		<br/>
		<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>
		<br/><br/><br/>
		
		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>
		</div>
	</body>
</html>

Open in new window

0
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.
0
scrathcyboyCommented:
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 !!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Applications

From novice to tech pro — start learning today.