A-AA+then

ขอถามเรื่องjavascriptเวลาเอาเม้สไปชี้แล้วให้โชว์tag div

1,092
คืผมกำลังหัดเขียน ปฏิทินกิจกรรมอยู่ครับ แล้วต้องการให้วันที่ ที่มีกิจกรรมนั่นถ้าเอาเม้ส์ไปชี้แล้วให้โชว์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>&nbsp;</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>&nbsp;</td>";
$week++;
}
    echo"</tr>";

    
?>

</table>

<div id="test" style=" width:150px; height:50px; background-color:#999;">ddd</div>
</div>
</body>
</html>

5 ความคิดเห็น

ปกติแล้วถ้าอ่านค่าจากตำแหน่งของเมาส์ก็จะได้ตำแหน่งตามหน้าจอครับ อาจต้องบวกเพิ่มด้วยตำแหน่งด้านบนและด้านซ้ายของ windows ถึงจะเป็นตำแหน่งที่แท้จริง

วิธีอื่นก็มี เช่น หาตำแหน่งของ elemnent นั้นๆเลยครับ แล้วแสดง tooltip ที่ตำแหน่งใกล้ๆกับ element โดยตรง (ปกติผมใช้วิธีนี้)

โดยส่วนตัวผมใช้ GAJAX ครับ ซึ่งมีฟังก์ชั่นนี้ ทำให้หาตำแหน่งได้ง่ายครับ

$G('div_id').getTop();
$G('div_id').getLeft();
1

ขอบคุณครับ เดี๋ยวลองดูก่อนครับไม่ได้ยังไงขอรบกวนอีกรอบครับ
2

ขอถามเรื่องjavascriptเวลาเอาเม้สไปชี้แล้วให้โชว์tag div
รบกวนอีกรอบครับ
คือลองแล้วก็ไม่ได้เหมือนเดิมครับ ผมลองใช้ฟังชั่นจากบทความ อ่าำำนตำแหน่งของ element ที่ พี่เขียนไว้ ก็โชวแต่ตำแหน่งไม่ตรง เหมือนเดิม แล้วพอเอาไปใส่ให้หน้าเว็บหลักเหมือนกับว่า เวลาเอาเม้าส์ไปชี้เเล้วมันขยายหน้าเว็บออกไปอีกอะครับ
3

ก็ไม่แปลกอะไร เพราะสิ่งที่ต้องทำจริงๆ มีมากกว่าการคำนวณตำแหน่งครับ ยังต้องหาขนาด ป้อง
กันการล้นออกด้านข้าง และ อื่นๆ อีครับ

ลองอ่านบทความเกี่ยวกับ tooltip บนเว็บดูครับ หรือถ้าเป็น tooltip แบบที่เห็นบนเว็บนี้เลยก็ดูที่ GAJAX ครับ
4

ขอบคุณครับผมนึกว่าแค่หาตำแหน่งแค่นัั่น
5
^