clickable cells.tt

• Back
• Raw format

<style type="text/css">
#table {
	width: 70%;
	margin: 0 auto;
}

#table td {
	border: 1px dotted #000000;
	width: 20%;
	height: 5em;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}

#table .cell_hover {
	background: #000000;
}
</style>
<script type="text/javascript">
var HoverObj;

function hoverhack(obj, activate) {

	if(HoverObj) {
		HoverObj.className = HoverObj.className.replace(/_hover/g, '');
	}

	if(obj && activate) {
		HoverObj      = obj;
		obj.className = obj.className + "_hover";
	}
}

function clickcell(obj) {

	var tmp = obj.childNodes.item(0);

	while(tmp) {
		if(tmp.tagName == 'A') {
			window.location = tmp.href;
			break;
		}
		tmp = tmp.nextSibling;
	}
}

function init() {
	var t1 = document.getElementById('table');
	var td = t1.getElementsByTagName('TD');
	for(var i = 0; i < td.length; i++) {
		var _td = td.item(i);
		if(_td.getElementsByTagName('A').length) {
			_td.className   = 'cell';
			_td.onclick     = function() { clickcell(this) }
			_td.onmouseover = function() { hoverhack(this, 1) }
			_td.onmouseout  = function() { hoverhack(this, 0) }
		}
	}
}

window.onload = init;
</script>

<h2>Clickable cells</h2>
<table id="table">
  <tr>
    <td><a href="color.inc">color</a></td>
    <td><a href="content-center-css.html">content center</a></td>
    <td><a href="dom.inc">dom</a></td>
  </tr>
  <tr>
    <td><a href="escape.inc">escape</a></td>
    <td>no link</td>
    <td><a href="fieldset.inc">fieldset</a></td>
  </tr>
  <tr>
    <td><a href="menu.inc">menu</a></td>
    <td><a href="resize image.inc">resize</a></td>
    <td><a href="template.txt">template</a></td>
  </tr>
</table>