發新話題

[代碼] 點擊圖片出現另一個圖片提示和鼠標坐標

[代碼] 點擊圖片出現另一個圖片提示和鼠標坐標

複製內容到剪貼板
代碼:
<html>
<head>
<script language="JavaScript">
//from webjx.com
function point_it(event){
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
    document.getElementById("cross").style.left = (pos_x-1) ;
    document.getElementById("cross").style.top = (pos_y-15) ;
    document.getElementById("cross").style.visibility = "visible" ;
    document.pointform.form_x.value = pos_x;
    document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('http://www.missyuan.net/upimg/allimg/070506/14565710.jpg');width:500px;height:333px;">
<img src="http://www.missyuan.net/templets/img/df_dedetitle.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form>
</body>
</html>
效果訪客無法瀏覽此圖片或連結,請先 註冊登入會員

(出處:網頁教學網  作者:閃電兒)

TOP

發新話題

本站所有圖文均屬網友發表,僅代表作者的觀點與本站無關,如有侵權請通知版主會盡快刪除。