Hello. I have a problem. I have menu items, which are loaded in <td>'s. I need to know the correct way to turn the whole <td> into a clickable link istead of just the words of the link. Here is the current code:

echo '<div class="menu">';	
//  First menu segment displays for all users, logged in or not
echo '            <table class="button2">';
echo '		 <tr><td><a href="index.php?select=home" target ="_self">Home</a></td></tr>';
echo '                <tr><td><a href="index.php?select=forums" target ="_self">Forums</a></td></tr>';
echo '                <tr><td><a href="index.php?select=bands" target ="_self">Band Pages</a></td></tr>';
echo '                <tr><td><a href="index.php?select=classifieds" target ="_self">Classifieds</a></td></tr>';
echo '                <tr><td><a href="index.php?select=articles" target ="_self">Articles</a></td></tr>';
echo '                <tr><td><a href="index.php?select=contact" target ="_self">Contact Us</a></td></tr>'; 


// If session is logged in, Display ADMIN menu	
if($_SESSION['valid'] == "yes") 
	{
echo '                <tr><td><a href="chat.php" target ="_blank">Chat Rooms</a></td></tr>';   

echo '                <tr><td><a href="index.php?select=content" target ="_self">Update Contents</a></td></tr>';
echo '		 <tr><td><a href="index.php?select=uplogo" target ="_self">Update Logo</a></td></tr>';
echo '                <tr><td><a href="index.php?select=theme" target ="_self">Change Theme</a></td></tr>';
echo '                <tr><td><a href="index.php?select=reset" target ="_self">Reset Theme</a></td></tr>';
echo '                <tr><td><a href="index.php?select=email" target ="_self">User Email</a></td></tr>';
echo '		 <tr><td><a href="index.php?select=mstudio" target ="_self">MStudios</a></td></tr>'; 
echo '                <tr><td><a href="index.php?select=help" target ="_self">Website Help!</a></td></tr>';
echo '		 <tr><td><a href="logout.php" target="_self">Logout</a></td></tr>';
}
echo '	</table>';
echo '</div>';

Any ideas?

Thanks;
Ice

    I recommend doing this with javascript. You could do it with images, but there's a big chance you won't get it to work as you'd wish. If you look into this solution, have a look at table-layout: fixed.

    But, as I see it, doing this the easy way is the way to go. Among other things, making the whole table cells clickable is a feature enhancement which isn't needed for actual functionality, and as such you don't have to worry about non-script users.

    <style>
td:hover {
	cursor: pointer;
}
</style>
<script type="text/javascript">
	function followLink(o) {
		var a = o.getElementsByTagName('a');
		if (a.length > 0) {
			document.location = a[0].href;
		}
	}
</script>
</head>
<body>
	<table>
		<tbody>
			<tr>
				<td style="width: 100px; height: 30px;" onclick="followLink(this);">
					<a href="http://someplace.com/file.php">apa</a>
				</td>

    Additionally, you might want to skip the td:hover style since this will give non-script users the impression they can click something which is not clickable for them. Instead, add onmouseover/onmouseout events for the table cells and change the cursor through javascript.

      Hello. Sorry not responding so quickly, but I actually found out how to do that quickly and easily. Just place in the CSS, to display:block; Simple and easy and it works!

      Thanks;
      Ice

        Write a Reply...