Seperti yang ditunjukkan di bawah ini:
Copy kode kodenya sebagai berikut:
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<judul></judul>
<gaya tipe="teks/css">
.toopTip
{
warna latar:Kuning;
gaya perbatasan: padat;
lebar batas:1px;
warna batas:Merah;
}
</gaya>
<skrip bahasa="javascript" type="teks/javascript">
/*
Jika Anda ingin batas kiri dan atas div yang diminta tumpang tindih dengan div yang ditampilkan, Anda perlu menghapus header dokumen standar W3C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transisi//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*/
fungsi initEvent() {
var divArray = dokumen.getElementsByTagName("div");
for (var i = 0; i < divArray.length; i++) {
divArray[i].onmouseover = buatDivDetailOne;
/*
Div asli tidak dapat digunakan untuk mengikat event pergerakan mouse, karena lebar dan panjang div detail lebih besar dari div asli.
Dengan cara ini, div asli tercakup, dan kejadian onmouseout akan dipicu secara otomatis.
*/
//divArray[i].onmouseout = hapusDivDetail;
}
}
fungsi buatDivDetailOne() {
//Pastikan keunikan divDetail div
var divDetail = dokumen.getElementById("divDetail");
jika(detail div)
{
dokumen.body.removeChild(divDetail);
}
divObj = dokumen.createElement("div");
divObj.className = "toopTip";
divObj.setAttribute("id", "divDetail");
divObj.style.position = "mutlak";
divObj.style.width = "200 piksel";
divObj.style.height = "100 piksel";
var triggerObj = window.event.srcElement;
divObj.style.top = triggerObj.offsetTop;
divObj.style.left = triggerObj.offsetLeft;
divObj.innerHTML = triggerObj.innerText;
dokumen.body.appendChild(divObj);
//Saat ini, div yang digunakan untuk detail telah mencakup div asli, sehingga div yang tercakup perlu diproses event.
document.getElementById("divDetail").onmouseout = function() {
divObj = ini;
jika (!divObj) {
kembali;
}
dokumen.body.removeChild(divObj);
};
}
fungsi hapusDivDetail() {
var divObj = dokumen.getElementById("divDetail");
jika (!divObj) {
kembali;
}
dokumen.body.removeChild(divObj);
}
window.onload = initEvent;
</skrip>
</kepala>
<tubuh>
<div id="divOne" style="warna latar: Fuchsia; lebar: 100 piksel; tinggi: 100 piksel;" >
Halo Dunia Jsku!
</div>
<div id="divTwo" style="warna latar: Aqua; lebar: 100 piksel; tinggi: 100 piksel">
Selamat datang di Dunia Js Saya!
</div>
<div id="divThree" style="warna latar: Abu-abu; lebar: 100 piksel; tinggi: 100 piksel">
INI ADALAH Dunia Js SAYA!
</div>
</tubuh>
</html>