Why Is the onclick Event Not Working For The Table Cell Or Pictures Being Clicked

I have written a simple web page and a very simple html file for my site. I have gotten images to line up using a couple of CSS classes in my HTML. (I am a beginner at CSS classes and HTML, and I do not have a lot of experience developing the web pages.) I have tried to add an onclick event to the images in my page, and they are not working. The onmouseover event does work without any issue. However, none of the other events work. Could someone let me know what I am missing or what I have left out that would be causing this issue? Any help would be greatly appreciated. (I have attached a screenshot of my code working, the image files, and the code I am using for my sample site.)  
<html>

<style type="text/css">
.image{
position: relative;
width:500px;
}

h2{
position: absolute;
top: 20px;
left: 0px;
width: 500px;
}
</style>

<style type="text/css">
.under { position:absolute; left:520px; top:15px; z-index:-1; }
.over { position:absolute; left:517px; top:25px; z-index:-1; }
</style>

<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td>

                      <table cellspacing="0" cellpadding="0">
                        <tr>
                        	<td>
                        	<img src="WarningLeftBG.gif" height="50px" width = "10px"/>
                        	</td>
                        	<td>
                        
				<div class="image">

				<img src="WarningCenterBG.gif" height="50px" width = "500px" onmouseover 

="javascript:alert('Hello World')"/> 
				<h2>Move the Warning Center Image</h2>

				</div>


  
                        	</td>
                        	<td onmouseclick="javascript:alert('Top')"/>
                        	<div>
				<img src="WarningRightBG.gif" height="50px" width = "14px" class = "under" 

onmouseover ="javascript:alert('Bottom')"/>
				<img src="WarningCloseButton.gif" class ="over" onmouseover 

="javascript:alert('Closed')"/>
			</div>
                        </td> 
                </tr>
                      </table>
</table>
</body>
</html>

Open in new window

CurrentSiteView CenterMsg CloseBtn LeftMsg RightMsg
thenthorn1010Asked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
The name of the event is wrong
it is not onmouseclick=
it is onclick=
and you would be better to put it on the image instead of the table cell.


Cd&
0
 
nap0leonConnect With a Mentor Commented:
Thought you were going to move those images to be background images?
The click event should be on the "close" image, not the table cell.
0
 
COBOLdinosaurCommented:
Hmmm.... an echo




Cd&
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
sunu340Connect With a Mentor Commented:
1. set onclick in place of onmouseclick
2. Another thing is : U have set z-index:-1 in both .under & .over
.under { position:absolute; left:520px; top:15px; z-index:-1; }
.over { position:absolute; left:517px; top:25px; z-index:-1; }

This is making the image unclickable..Try removing the z-index or set z-index with some +ve value.This will make the image clickable..

Hope this helps :)
0
 
nishant joshiConnect With a Mentor Technology Development ConsultantCommented:
try only "onclick" instead of mouseOnClick



Regards.
<html>

<style type="text/css">
.image{
position: relative;
width:500px;
}

h2{
position: absolute;
top: 20px;
left: 0px;
width: 500px;
}
</style>

<style type="text/css">
.under { position:absolute; left:520px; top:15px; z-index:-1; }
.over { position:absolute; left:517px; top:25px; z-index:-1; }
</style>

<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td>

                      <table cellspacing="0" cellpadding="0">
                        <tr>
                        	<td>
                        	<img src="WarningLeftBG.gif" height="50px" width = "10px"/>
                        	</td>
                        	<td>
                        
				<div class="image">

				<img src="WarningCenterBG.gif" height="50px" width = "500px" onmouseover 

="javascript:alert('Hello World')"/> 
				<h2>Move the Warning Center Image</h2>

				</div>


  
                        	</td>
                        	<td onclick="javascript:alert('Top')"/>
                        	<div>
				<img src="WarningRightBG.gif" height="50px" width = "14px" class = "under" 

onmouseover ="javascript:alert('Bottom')"/>
				<img src="WarningCloseButton.gif" class ="over" onmouseover 

="javascript:alert('Closed')"/>
			</div>
                        </td> 
                </tr>
                      </table>
</table>
</body>
</html>

Open in new window

0
 
thenthorn1010Author Commented:
nap0leon,

I attempted to use the background images instead of using the tables, and I ended up with the issue of the graphics not aligning without there appearing to be some type of border. I spent about two hours trying to adjust the settings, and I finally wrote a CSS class and used the CSS class to overlay the images. Because the space would not go away from between the table cells, I went back to using the other method so that I could get it to work. Thanks for the help...it did help me out a lot when I was attempting to build the graphic.
0
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.