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?

[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.

COBOLdinosaurCommented:
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

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
nap0leonCommented:
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

sunu340Commented:
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 joshiTechnology 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
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
C#

From novice to tech pro — start learning today.