Hallo,
Ik wil graag een tabel maken, met daarin links een aantal tekstlinks en dan een vaste positie rechts in de tabel waar het plaatje verschijnt.
Zie ook http://www.gratizmobiel.nl/testmouseover.htm
Zodra je over 'huis 1' heengaat zie je huis.jpg verschijnen (en als je over 'huis 2' heengaat zie je huis2.jpg), maar het komt niet op de positie die ik in de head heb gedefinieerd (left 80 en top 60). Ik weet ook niet of ik die hoogte moet definieren of dat je de vaste positie in de tabel op een andere manier moet beschrijven?
Ik wil graag een tabel maken, met daarin links een aantal tekstlinks en dan een vaste positie rechts in de tabel waar het plaatje verschijnt.
Zie ook http://www.gratizmobiel.nl/testmouseover.htm
Zodra je over 'huis 1' heengaat zie je huis.jpg verschijnen (en als je over 'huis 2' heengaat zie je huis2.jpg), maar het komt niet op de positie die ik in de head heb gedefinieerd (left 80 en top 60). Ik weet ook niet of ik die hoogte moet definieren of dat je de vaste positie in de tabel op een andere manier moet beschrijven?
Code:
<html><head><style type="text/css">
#plaatje {
position:absolute;
left:80px;
top:60px;
z-index:1000;
visibility:hidden; }
</style>
<script type="text/javascript">
function init() {
if (window.Event) {document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = haalMuisPositie; }
function haalMuisPositie(e) {
muisX = (window.Event) ? e.pageX : event.clientX;
muisY = (window.Event) ? e.pageY : event.clientY; }
function toonPlaatje(naam,beeldje) {
laag = document.getElementById(naam);
laag.innerHTML = '<img src=' +beeldje+'>';
laag.style.visibility = "visible";
laag.style.top = muisY + "px";
laag.style.left = muisX + "px";
plaatsPlaatje() }
function verbergPlaatje(naam){
laag = document.getElementById(naam);
laag.style.visibility = "hidden"; }
function plaatsPlaatje() {
laag.style.top = muisY + "px";
laag.style.left = muisX + "px"; }
</script></head></html>
<body onload="init()">
<p> </p>
<table width="500" border="1">
<tr>
<td width="117"><div id="plaatje"></div>
<a href="#" onmouseover="toonPlaatje('plaatje','huis.jpg');" onmouseout="verbergPlaatje('plaatje');">tekst</a></td>
<td colspan="2" rowspan="5"> </td>
</tr>
<tr>
<td><div id="plaatje"></div>
<a href="#" onmouseover="toonPlaatje('plaatje','huis2.jpg');" onmouseout="verbergPlaatje('plaatje');">tekst</a></td>
</tr>
<tr>
<td>of hier</td>
</tr>
<tr>
<td>of hier</td>
</tr>
<tr>
<td>of hier</td>
</tr>
</table>
<p> </p>
</body>
Laatst bewerkt:
):