26-5-2009 16:0:42
Mới đọc được cái này hay hay copy cho anh em xem .
--------------
<html>
<head>
<style type="text/css">
#tooltip
{
opacity: 0.9;
filter: alpha(opacity=90);
display: none;
position: absolute;
z-index: 100;
/*phần mã trang trí*/
border: 1px solid #999;
background-color: #ddd;
width: auto;
height: auto;
padding: 5px;
}
</style>
<script type="text/javascript">
/*
* Được viết bởi Cao Phong
* www.JavaScriptBank.com
*/
var ie = document.all ? true : false;
var offset = 20;
// lấy đối tượng có id là tooltip
document.write('<div id="tooltip"><img src="Icons/calendar.png" /></div>');
var tooltip = document.all? document.all['tooltip'] : document.getElementById? document.getElementById('tooltip') : "";
// hàm lấy đối tượng thẻ
function getObject(evt)
{
var srcElem;
if(ie)
{
srcElem = event.srcElement;
}
else
{
srcElem = evt.target;
}
return srcElem;
}
function CallTips(evt)
{
var obj = getObject(evt);
// bắt sự kiện rê chuột đến IMG có className là img_tooltip
if(obj.tagName == 'IMG' && obj.className == 'img_tooltip')
{
// xác định vị trí con trỏ chuột trên ảnh so với vị trí của ảnh trong trình duyệt
if( ie )
{
var scollbar = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
offset_x = scollbar.scrollTop + event.clientY + 'px';
offset_y = scollbar.scrollLeft + event.clientX + 'px';
}
else
{
offset_x = offset + evt.pageY + 'px';
offset_y = offset + evt.pageX + 'px';
}
// thay đổi nội dung của đối tượng tooltip
// tooltip.innerHTML = 'nội dung cần thay đổi';
// hiển thị nội dung đối tượng tooltip tại vị trí con trỏ chuột
tooltip.style.top = offset_x;
tooltip.style.left = offset_y;
tooltip.style.display = 'block';
}
}
function HidelTips(evt)
{
var obj = getObject(evt);
// bắt sự kiện rê chuột đến IMG có className là img_tooltip
if(obj.tagName == 'IMG' && obj.className == 'img_tooltip')
{
tooltip.style.display = 'none';
}
}
document.onmousemove = CallTips;
document.onmouseout = HidelTips;
</script>
</head>
<body>
<img src="Icons/back.png" width="100" height="100" class="img_tooltip" />
</body>
</html>
http://www.javascriptbank.com/forum/viewtopic.php?t=390