• Vui lòng đọc nội qui diễn đàn để tránh bị xóa bài viết
  • Tìm kiếm trước khi đặt câu hỏi

Hỏi cách hiển thị thông tin sơ lược khi rê chuột vào

Trao đổi về lập trình Web Forms, Javascript với ASP.NET

Điều hành viên: vietluyen, vuathongtin

ha minh trieu
Thành viên chính thức
Thành viên chính thức
Bài viết: 20
Ngày tham gia: T.Năm 01/05/2008 11:30 pm

Hỏi cách hiển thị thông tin sơ lược khi rê chuột vào

Gửi bàigửi bởi ha minh trieu » T.Năm 26/06/2008 4:02 pm

Tôi muốn làm một đoạn code khi người dùng move chuột vào <TD> thì sẽ hiễn thị thông tin ở dạng <DIV> ngay tại vị trí chuột.
- Đoạn code phia duoi hiển thị trong IE thì được, nhưng trong firefox thì hiển thị không đúng do vị trí <DIV> luôn hiển thị bên góc trái màn hình. Xin cho biết trong firefox hiển thị tọa độ x,y của chuột như thế nào

<html>
<body>
<table><tr><td onmousemove="move()" onmouseout="hide()">re chuot vao</td></tr></table>
</body>
</html>

<script>
function move()
{

var str;
str="<table><tr><td>ABCD</td></tr></table>"
inn.innerHTML=str;
inn.style.left= event.x+10;
inn.style.top= event.y;
}
function hide()
{
inn.innerHTML=""
}
</script>



Hình đại diện của người dùng
NoBi
Quản trị
Quản trị
Bài viết: 954
Ngày tham gia: T.Ba 18/03/2008 1:22 pm
Đến từ: Sài Gòn
Has thanked: 51 time
Been thanked: 66 time
Liên hệ:

Re: Hỏi cách hiển thị thông tin sơ lược khi rê chuột vào

Gửi bàigửi bởi NoBi » T.Năm 26/06/2008 5:01 pm

Thử code này xem:

Mã: Chọn hết

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7.  
  8. function showTooltip(img)
  9. {
  10.     if (document.layers) getMouseLoc;
  11.     else if (document.all) getMouseLoc();   
  12.     var html = "<div id='tooltip' style='position:absolute";
  13.     html += ";top:"+mouseLocation.y;
  14.     html += ";left:"+mouseLocation.x;
  15.     html += "'>";
  16.     html += "<img src='"+img+"' />";
  17.     html += "</div>";
  18.     document.getElementById("tooltipholder").innerHTML = html;
  19. }
  20.  
  21. function turnOfTooltip()
  22. {
  23.     document.getElementById("tooltipholder").innerHTML = '';
  24. }
  25.  
  26. function Point(x,y) {  this.x = x; this.y = y; }
  27.  
  28. mouseLocation = new Point(-500,-500);
  29.  
  30. function getMouseLoc(e)
  31.  
  32. {
  33.  
  34.   if(!document.all)  //NS
  35.  
  36.   {
  37.  
  38.     mouseLocation.x = e.pageX;
  39.  
  40.     mouseLocation.y = e.pageY;
  41.  
  42.   }
  43.  
  44.   else               //IE
  45.  
  46.   {
  47.  
  48.     mouseLocation.x = event.x + document.body.scrollLeft;
  49.  
  50.     mouseLocation.y = event.y + document.body.scrollTop;
  51.  
  52.   }
  53.  
  54.   return true;
  55.  
  56. }
  57.  
  58. //NS init:
  59.  
  60. if(document.layers){ document.captureEvents(Event.MOUSEMOVE); document.onMouseMove = getMouseLoc; }
  61.  
  62.  
  63. </script>
  64. </head>
  65.  
  66. <body>
  67. <div id="tooltipholder" style="position:absolute"></div>
  68. <img src="logo_hcmpt.jpg" onmouseout="turnOfTooltip();" onmouseover="showTooltip('logo_hcmpt.jpg');" width="66" height="77" />
  69. <img src="anh.jpg" onmouseout="turnOfTooltip();" onmouseover="showTooltip('anh.jpg');" width="66" height="77" />
  70.  
  71. </body>
  72. </html>
:>

ha minh trieu
Thành viên chính thức
Thành viên chính thức
Bài viết: 20
Ngày tham gia: T.Năm 01/05/2008 11:30 pm

Re: Hỏi cách hiển thị thông tin sơ lược khi rê chuột vào

Gửi bàigửi bởi ha minh trieu » CN 29/06/2008 6:14 pm

xin cảm ơn bác nhé, đoạn code của bác OK

BabyFox
Bài viết: 1
Ngày tham gia: T.Năm 01/05/2008 2:15 pm

Re: Hỏi cách hiển thị thông tin sơ lược khi rê chuột vào

Gửi bàigửi bởi BabyFox » T.Hai 30/06/2008 8:21 pm

http://boxover.swazz.org/
Rất hay, rất đơn giản.

Hình đại diện của người dùng
hoangthu1974
Guru
Guru
Bài viết: 813
Ngày tham gia: T.Năm 09/03/2006 9:30 am
Đến từ: Hà Nội --> Tp. Hồ Chí Minh
Been thanked: 13 time
Liên hệ:

Re: Hỏi cách hiển thị thông tin sơ lược khi rê chuột vào

Gửi bàigửi bởi hoangthu1974 » T.Tư 16/07/2008 5:24 pm

Sau một thời gian ngồi loay hoay với cái vụ này. :D Tôi phát hiện ra là hầu hết các website đều sử dụng chung một hàm để hiển thị thumnail của tin. Bạn cứ Save một website như tuoitre.com.vn, tintuconline.vietnamnet.vn về là sẽ có luôn cái tool này.

huynguyen
Thành viên chính thức
Thành viên chính thức
Bài viết: 16
Ngày tham gia: T.Hai 31/03/2008 9:32 pm

Re: Hỏi cách hiển thị thông tin sơ lược khi rê chuột vào

Gửi bàigửi bởi huynguyen » T.Hai 09/02/2009 11:20 am

Nếu thông tin sơ lược của bạn chỉ là text đơn giản thì bạn có thể dùng thuộc tính title của td, ko cần phải dùng mấy cái div làm tooltip cho nó mất công :D


Quay về “Lập trình Web với ASP.NET”

Đang trực tuyến

Đang xem chuyên mục này: Không có thành viên nào trực tuyến.1 khách