jsB@nk.com


Free JavaScript Codes Download

Translate this page to English Translate this page to France Translate this page to Vietnamese

Hỏi cách tạo tooltip là 1 hình ảnh trên 1 tag <

Bạn muốn tìm một hiệu ứng hay mã nguồn nào đó? Hãy gửi yêu cầu tại đây! Các thành viên sẽ giúp đỡ bạn.
Post a new topic
Post a reply

Hỏi cách tạo tooltip là 1 hình ảnh trên 1 tag <

Postby Guest on Sun Mar 16, 2008 8:55 am

Mình muốn thêm vào tag <IMG> thuộc tích OnMouseOver= CallTips() OnMouseOut=HideTips();
Có thể giúp mình trong các trường hợp sau được không?

+ Viết hàm CallTips() để nó chỉ hiển thị 1 file ảnh(16x16) kế bên Mouse, không cần thay mouse bằng file ảnh đó.

+ Thẻ (title, alt) có sẵn cho phép tạo 1 tooltip, hiện lên rồi tự động mất. Mình muốn làm 1 tooltip hiện lên ngay, và mất khi nào gọi hàm HideTips()
(Đối với trường hợp này, có thể hiệu chỉnh được màu sắc thì càng tốt, không thì thôi)

Mình có search trước khi đặt câu hỏi, nhưng code dài dòng, mình muốn xin 1 code càng ngắn càng tốt.

Thanks
Guest
 
Top

Postby Guest on Sun Mar 16, 2008 9:21 am

Quên nữa !
Mình muốn fix đoạn code yêu cầu trên cho các trình duyệt FF, Opr, IE6, 7, 8

Và hỏi thêm, mình muốn dùng javascript để làm mờ ảnh đi, khi rê chuột đến thì ảnh sẽ rõ. Mình không muốn dùng thuộc tính style có sẵn trong tag IMG.
Nếu được thì xin giải thích về thông số làm mờ ảnh.

Cảm ơn nhiều, yêu cầu có quá đáng thì xin bỏ qua.
Guest
 
Top

Postby Cao Phong on Sun Mar 16, 2008 3:43 pm

code mà bạn cần như sau

Code: Select all
<style type="text/css">
#tooltip
{
   opacity: 0.9;
   filter: alpha(opacity=90);
   display: none;
   position: absolute;
   z-index: 100;
   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;

document.write('<div id="tooltip"><img src="ảnh phóng to" /></div>');

// 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 + offset + event.clientY + 'px';
         offset_y = scollbar.scrollLeft + offset + event.clientX - 200 + 'px';
      }
      else
      {
         offset_x = evt.pageY + 'px';
         offset_y = evt.pageX - 200 + 'px';
      }
      // lấy đối tượng có id là tooltip
      var tooltip = document.all? document.all['tooltip'] : document.getElementById? document.getElementById('tooltip') : "";
      // 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()
{
   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')
   {
      var tooltip = document.all? document.all['tooltip'] : document.getElementById? document.getElementById('tooltip') : "";
      tooltip.style.display = 'none';
   }
}
document.onmousemove = CallTips;
document.onmouseout = HidelTips;
</script>


đoạn code trên thực hiện việc hiển thị một tooltip cho các IMG có className là img_tooltip
Unlimited hosting: Hostgator, Bluehost, H9, IX
User avatar
Cao Phong
 
Posts: 515
Joined: Wed Aug 29, 2007 3:44 am
Location: Here
Top

Thank

Postby Guest on Tue Mar 18, 2008 11:21 am

Mình đã làm được rồi tuy nhiên còn chút thắc mắc.
Có cách nào chỉ thể hiện hình ảnh mà không thể hiện cái khung bao xung quanh không. Mình đã bỏ tag <DIV> nhưng vẫn như thế.

Khi rê chuột ra khỏi hình, cái hình phóng to vẫn còn nằm trên hình mà không mất.

Khi rê chuột, nó có vẻ giựt giựt trên FF.

Nhờ giải quyết giúp.
Cảm ơn nhiều.!
Guest
 
Top

Postby Guest on Tue Mar 18, 2008 11:25 am

Còn nữa, đoạn script trên không chạy được trên IE6, 7, 8 beta 1
Báo lỗi
'offset' is undefined
'evt' is undefined
Guest
 
Top

Postby Cao Phong on Tue Mar 18, 2008 2:13 pm

bạn hay thiệt, code đó tui chạy ko ra cái gì hết lun :D, code đã đc sửa lại rồi đó bạn, chạy tốt trên Opera, FF, IE6,7. Nếu muốn trang trí cái khung hiển thị như thế nào, bạn edit lại mã CSS của cái #tooltip

Code: Select all
<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>
Unlimited hosting: Hostgator, Bluehost, H9, IX
User avatar
Cao Phong
 
Posts: 515
Joined: Wed Aug 29, 2007 3:44 am
Location: Here
Top

Cảm ơn

Postby Guest on Wed Mar 19, 2008 3:48 am

Cảm ơn rất nhiều.

Code chạy rất mượt, và nhanh.
Trên FF2 : hình ảnh cách con trỏ chuột 1 khoản nhỏ.
Trên IE8 : hình ảnh nằm ngay dưới con trỏ chuột
Trên OP9 : tương tự IE8, nhưng chạy hơi chớp chớp, chớp chứ không giựt.
Chưa test được trên IE6,7

Tới đây là mừng lắm rồi, cảm ơn Cao Phong.
Nếu rãnh rỗi thì cho mình hỏi có thể khắc phục được trường hợp trên không?

Cảm ơn nhiều!
Guest
 
Top

Postby Cao Phong on Wed Mar 19, 2008 6:24 am

code trên đc tớ test và ảnh tooltip đều hiển thị cách con trỏ chuột 1 khoảng; ảnh chớp là do khoảng cách chưa đc tinh chỉnh tối ưu, mỗi khi di chuyển chuột là nó lấn sang tọa độ của DIV hiển thị; nhưng code chỉ kiểm tra tọa độ của ảnh mà thôi => nên DIV hiển thị biến mất rồi xuất hiện lại ngay lập tức => cho ta cảm giác chớp chớp; bạn chịu khó thay đổi giá trị này để tối ưu nó
Unlimited hosting: Hostgator, Bluehost, H9, IX
User avatar
Cao Phong
 
Posts: 515
Joined: Wed Aug 29, 2007 3:44 am
Location: Here
Top

Re: Hỏi cách tạo tooltip là 1 hình ảnh trên 1 tag <

Postby whitesama on Sat Jul 26, 2008 9:21 am

Mình đã thử đoạn mã trên và thấy nó rất hay. Nhưng mình muốn hỏi bạn một chút về vấn để như sau:
Đoạn code trên đã fick cứng ảnh sẽ hiển thị khi di chuột lên một ảnh trên trang web.
Giả sử mình có nhiều ảnh khác nhau, khi mình di chuột vào bất kì một tấm ảnh nào thì mình muốn nó hiển thị chính ảnh đó lên. Còn đoạn code này chỉ có thể hiển thị được duy nhất ảnh đã khai báo khi di chuột lên bất kì ảnh nào. Bạn có thể sửa đoạn code trên để mỗi khi mình di chuột sang 1 ảnh khác nó sẽ nhận được src của ảnh và ảnh hiển thị trên tooltip là ảnh mà chuột di đến. Mình cám ơn trước nhé :)
whitesama
 
Posts: 2
Joined: Mon Jul 14, 2008 7:29 am
Top

Re: Hỏi cách tạo tooltip là 1 hình ảnh trên 1 tag <

Postby temp on Mon Jul 28, 2008 1:46 am

đây là code theo yêu cầu của bạn, phần màu đỏ là thay đổi so với code cũ
<script type="text/javascript">
/*
* Được viết bởi Cao Phong
* http://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 id="image" src="Icons/calendar.png" /></div>');
var tooltip = document.all? document.all['tooltip'] : document.getElementById? document.getElementById('tooltip') : "";
var image = document.all? document.all['image'] : document.getElementById? document.getElementById('image') : "";

// 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';

// thay đổi ảnh
image.src = obj.src;

// 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>
temp
 
Posts: 46
Joined: Sun Apr 13, 2008 10:34 am
Top
Next
Post a new topic
Post a reply

Return to Gửi một yêu cầu

Who is online

Users browsing this forum: No registered users and 0 guests

preSilver Style
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group

JavaScriptBank.com Forum URL Rewriter
Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web