Aşağıdaki kodun çalışan hali burada:
http://vebgelistirme.googlepages.com/resimGoster.htm Kod:
<script type="text/javascript">
var el = document.createElement('div');
function resimGoster(resim,T) {
var table = document.getElementById('tableid');
el.style.position ="absolute"; // bunun absolute olması gerekiyor.
el.style.left = table.offsetLeft + 120 +"px"; // divin soldan uzaklığı
el.style.top = table.offsetLeft + T +"px"; // divin üstten uzaklığı
el.style.display = "block";
el.style.zIndex = "2"; // divin z-indexini büyük yapacağız ki önde görünsün.
el.innerHTML = "<img src="+resim.src+" style='width:200px; height:200px;' >" ;
document.body.appendChild(el); // divi body kısmına ekle.
}
function resimGizle() {
el.style.display = "none";
}
</script>
<style type="text/css">
body { margin:10px 10px 10px 10px; }
table { position:absolute; left:50px; top:50px;}
td { width:100px; height:100px;}
img { width:90px; height:90px; }
</style>
<body>
<table id="tableid">
<tr>
<td><img src="http://vebgelistirme.googlepages.com/lale.jpg" onmouseover="resimGoster(this,0)" onmouseout="resimGizle()"></td><td>Burası tablo hücresi</td><td>Burası tablo hücresi</td>
</tr><tr>
<td><img src="http://vebgelistirme.googlepages.com/istanbul2.jpg" onmouseover="resimGoster(this,100)" onmouseout="resimGizle()"></td><td>Burası tablo hücresi</td><td>Burası tablo hücresi</td>
</tr><tr>
<td><img src="http://vebgelistirme.googlepages.com/ebru.jpg" onmouseover="resimGoster(this,200)" onmouseout="resimGizle()"></td><td>Burası tablo hücresi</td><td>Burası tablo hücresi</td>
</tr>
</table>