ขอถามเรื่อง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>&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>
31 ต.ค. 2553 5 2,051

ปกติแล้วถ้าอ่านค่าจากตำแหน่งของเมาส์ก็จะได้ตำแหน่งตามหน้าจอครับ อาจต้องบวกเพิ่มด้วยตำแหน่งด้านบนและด้านซ้ายของ 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
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^