Tooltip trên web - coder.awas.vn

Diễn đàn Html DOM javascript CSS Tooltip trên web

Thành viên	Nội dung
nguyetanh Cửu âm bạch cốt trảo 9 bài	26-05-2009 04:00: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
aspnet Lập trình không biên giới 445 bài	26-05-2009 04:30:19 // tooltip by Nguyen Duc Khanh ( 26 May 2009 ) var ie = document.all ? true : false; var offset = 20; document.write('<div id="tooltip" style="display: none;position: absolute;">vspTooltip</div>'); var tooltip = document.all? document.all['tooltip'] : document.getElementById? document.getElementById('tooltip') : ""; function _showHint(id) { var element = document.getElementById(id); if(!element) return; tooltip.style.display=''; tooltip.innerHTML = element.innerHTML; tooltip.className = element.className; } function _hideHint() { tooltip.innerHTML = ''; tooltip.style.display = 'none'; } function _vspMouseMove(evt) { if(tooltip.style.display != 'none') { 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'; } tooltip.style.top = offset_x; tooltip.style.left = offset_y; tooltip.style.display = 'block'; } } //event document.onmousemove = _vspMouseMove;

Chủ đề gần đây :

Cùng loại :