ขอถามเรื่องjavascriptเวลาเอาเม้สไปชี้แล้วให้โชว์tag div
คืผมกำลังหัดเขียน ปฏิทินกิจกรรมอยู่ครับ แล้วต้องการให้วันที่ ที่มีกิจกรรมนั่นถ้าเอาเม้ส์ไปชี้แล้วให้โชว์tagdiv แบบปฏิทินกิจกรรมของเว็บนี้อะครับเลยใช้ event mouseover แต่ในตำแหน่งแกน Y มันไม่ไปยัง พิกัดที่กำหนดอะครับ รบกวนดูโค๊ตให้หน่อยครับ หรือถ้าใช้ไม่ได้ ผมต้องเขียนประมาณไหนครับ แนะนำหน่อยครับ
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
var cX = 0; var cY = 0;
function mouse_out(){
document.getElementById("test").style.display="none";
}
function UpdateCursorPosition(e){
cX = e.pageX;
cY = e.pageY;
}
function UpdateCursorPositionDocAll(e){
cX = event.clientX;
cY = event.clientY;
}
if(document.all) {
document.onmousemove = UpdateCursorPositionDocAll;
}
else {
document.onmousemove = UpdateCursorPosition;
}
function mouse_over(e){
//alert("posx="+rX+"posy="+rY);
document.getElementById("test").style.display="";
document.getElementById("test").style.position="relative";
document.getElementById("test").style.left=cX+10+"px";
document.getElementById("test").style.top=cY+10+"px";
document.getElementById("test").innerHTML="X="+cX;
document.getElementById("test").innerHTML+="Y="+cY;
}
</script>
</head>
<style type="text/css">
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; color: #fff; position: absolute; }
</style>
<body onload="mouse_out();">
<div id="tt">
<table border="1" cellspacing="0" cellpadding="0" width="300">
<tr bgcolor="#BBBBBB">
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
<?php
$date=date("j");
$day=date('N');
$year=date('Y');
$month =date('m');
$a=array (2,5,15,20,26);
//$weak=date('w');
$findday = mktime(0,0,0,$month,1,$year);
$fristday=date('w',$findday);
$last_day=date('t',$findday);
for($i=0;$i<=$day;$i++){
if($fristday==$i){
break;
}
else{
echo "<td> </td>";
}
$week++;
}
for($i=1;$i<=$last_day;$i++){
if($week % 7==0){
echo "<tr>";
}
if($date==$i){
$bgcolor = "bgcolor=#ABD8F4";
}
else{
$bgcolor = '';
}
if($week % 7==0){//make sunday
echo"<td $bgcolor><font size=2 color=red>";
if( in_array($i,$a))
{echo "<a href='#' id=$i onclick='test(this.id);' onmouseover='mouse_over(this.id);' onmouseout='mouse_out();' >$i</a>";
}
else{
echo "$i";
}
echo"</font></td>";
}
else if($week%7==6){//make sat day
echo"<td $bgcolor><font size=2 color=blue>";
if(in_array($i,$a))
{echo "<a href='#' id=$i onclick='test(this.id);' onmouseover='mouse_over(this.id);' onmouseout='mouse_out();' >$i</a>";
}
else{
echo "$i";
}
echo "</font></td>";
}
else{
echo"<td $bgcolor><font size=2>";
if(in_array($i,$a))
{echo "<a href='#' id=$i onclick='test(this.id);' onmouseover='mouse_over(event,this.id);' onmouseout='mouse_out();' >$i</a>";
}
else{
echo "$i";
}
echo "</font></td>";
}
$week++;
}
while($week%7!=0){
echo"<td> </td>";
$week++;
}
echo"</tr>";
?>
</table>
<div id="test" style=" width:150px; height:50px; background-color:#999;">ddd</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
var cX = 0; var cY = 0;
function mouse_out(){
document.getElementById("test").style.display="none";
}
function UpdateCursorPosition(e){
cX = e.pageX;
cY = e.pageY;
}
function UpdateCursorPositionDocAll(e){
cX = event.clientX;
cY = event.clientY;
}
if(document.all) {
document.onmousemove = UpdateCursorPositionDocAll;
}
else {
document.onmousemove = UpdateCursorPosition;
}
function mouse_over(e){
//alert("posx="+rX+"posy="+rY);
document.getElementById("test").style.display="";
document.getElementById("test").style.position="relative";
document.getElementById("test").style.left=cX+10+"px";
document.getElementById("test").style.top=cY+10+"px";
document.getElementById("test").innerHTML="X="+cX;
document.getElementById("test").innerHTML+="Y="+cY;
}
</script>
</head>
<style type="text/css">
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; color: #fff; position: absolute; }
</style>
<body onload="mouse_out();">
<div id="tt">
<table border="1" cellspacing="0" cellpadding="0" width="300">
<tr bgcolor="#BBBBBB">
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
<?php
$date=date("j");
$day=date('N');
$year=date('Y');
$month =date('m');
$a=array (2,5,15,20,26);
//$weak=date('w');
$findday = mktime(0,0,0,$month,1,$year);
$fristday=date('w',$findday);
$last_day=date('t',$findday);
for($i=0;$i<=$day;$i++){
if($fristday==$i){
break;
}
else{
echo "<td> </td>";
}
$week++;
}
for($i=1;$i<=$last_day;$i++){
if($week % 7==0){
echo "<tr>";
}
if($date==$i){
$bgcolor = "bgcolor=#ABD8F4";
}
else{
$bgcolor = '';
}
if($week % 7==0){//make sunday
echo"<td $bgcolor><font size=2 color=red>";
if( in_array($i,$a))
{echo "<a href='#' id=$i onclick='test(this.id);' onmouseover='mouse_over(this.id);' onmouseout='mouse_out();' >$i</a>";
}
else{
echo "$i";
}
echo"</font></td>";
}
else if($week%7==6){//make sat day
echo"<td $bgcolor><font size=2 color=blue>";
if(in_array($i,$a))
{echo "<a href='#' id=$i onclick='test(this.id);' onmouseover='mouse_over(this.id);' onmouseout='mouse_out();' >$i</a>";
}
else{
echo "$i";
}
echo "</font></td>";
}
else{
echo"<td $bgcolor><font size=2>";
if(in_array($i,$a))
{echo "<a href='#' id=$i onclick='test(this.id);' onmouseover='mouse_over(event,this.id);' onmouseout='mouse_out();' >$i</a>";
}
else{
echo "$i";
}
echo "</font></td>";
}
$week++;
}
while($week%7!=0){
echo"<td> </td>";
$week++;
}
echo"</tr>";
?>
</table>
<div id="test" style=" width:150px; height:50px; background-color:#999;">ddd</div>
</div>
</body>
</html>
วิธีอื่นก็มี เช่น หาตำแหน่งของ elemnent นั้นๆเลยครับ แล้วแสดง tooltip ที่ตำแหน่งใกล้ๆกับ element โดยตรง (ปกติผมใช้วิธีนี้)
โดยส่วนตัวผมใช้ GAJAX ครับ ซึ่งมีฟังก์ชั่นนี้ ทำให้หาตำแหน่งได้ง่ายครับ
$G('div_id').getTop();
$G('div_id').getLeft();
คือลองแล้วก็ไม่ได้เหมือนเดิมครับ ผมลองใช้ฟังชั่นจากบทความ อ่าำำนตำแหน่งของ element ที่ พี่เขียนไว้ ก็โชวแต่ตำแหน่งไม่ตรง เหมือนเดิม แล้วพอเอาไปใส่ให้หน้าเว็บหลักเหมือนกับว่า เวลาเอาเม้าส์ไปชี้เเล้วมันขยายหน้าเว็บออกไปอีกอะครับ
กันการล้นออกด้านข้าง และ อื่นๆ อีครับ
ลองอ่านบทความเกี่ยวกับ tooltip บนเว็บดูครับ หรือถ้าเป็น tooltip แบบที่เห็นบนเว็บนี้เลยก็ดูที่ GAJAX ครับ