<html>
<head>
<script language="javascript">
function RefClicked()
{
alert('Nu is er op de link gedrukt');
}
function RefMouseOver(elem, b)
{
with (document.getElementById('a1'))
{
if (b)
style.color = 'red';
else
style.color = 'green';
}
}
function cellChange(elem, b)
{
with (document.getElementById('cell1'))
{
if (b)
style.backgroundColor = 'Aqua';
else
style.backgroundColor = 'white';
}
}
function cellOnClick()
{
alert('nu is er op de cell gedrukt');
}
</script>
</head>
<body>
<table width="100%" height="100%">
<tr valign="middle">
<td align="center">
<table width="200px" height="200px" ID="Table1" border="1">
<tr valign="middle">
<td align="center" id="cell1" onmouseover="cellChange(this,true)"
onmouseout="cellChange(this,false)"
onclick="cellOnClick()">
<a href="javascript: RefClicked()"
onmouseover="RefMouseOver(this,true)"
onmouseout="RefMouseOver(this,false)" id="a1">
Dit is de enige cell</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Alles wat je wilt zit erin, maar als je het script test, dan zal je zien dat als je op de link drukt, dat de tabel cell ook een click event ontvangt, dus een combinatie van de clickable link en cell is niet handig.
alert kan je natuurlijk ook vervangen naar bijvoorbeeld:
location.href = '';
waar je tussen de '' de url opgeeft
