动态插入用innerHTML就可以了,必要时用ajax鼠标移入移出控制比较困难
可加一个timer,维持out之后仍显示很短时间,这样能保证有足够时间检测鼠标的位置
可加一个timer,维持out之后仍显示很短时间,这样能保证有足够时间检测鼠标的位置
解决方案 »
- 请教大家一个问题
- 求教:JavaScript函数传参概念问题
- 如何用JavaScript实现表单变量的运算和传递?
- 如果一个Table中的Td的Id是个动态的值,如何在JavaScript设定它?
- 请问大虾们一个小问题(高分在线)
- ie6.0出现cookie阻档,???
- 有谁知道这两个函数是干什么用的?clearInterval()函数,setInterval()函数
- 如何在打开一个新的网页后自动再打开一个新的空白网页?xiexie
- 如何使一个复选框状态变化后,使页面上的一个输入框由disabled状态转为enabled?
- 想要用html2canvas将html转为图片,IE10报错
- showModalDialog()或者showModelessDialog()出来的窗口能让他最大化吗
- 代码看不懂,那位帮我解释一下?谢谢!
预定的值是写在 HINTS_ITEMS = {...} 中的。然后JS将 HINTS_ITEMS 作为一个参数传给了另外一个JS,用innerHTML恐怕不行吧...麻烦您下载源码,看看:
http://www.zj36.com/div_title.zip谢谢!
<html><head><title>层与按钮对齐</title></head><body>
<div align=left><table border=1 width=600 height=50>
<tr align=center>
<td>
<input type=button value=ok onmouseover="cc(this)" alt="提示信息一"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this)" alt="提示信息二"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this)" alt="提示信息三"
onmouseout="document.all.pop.style.display='none'">
</td></tr>
</table><div><div id=pop style="
position: absolute;
width: 120;
height: 30;
z-index: 99;
display: none;
background-color: #FF0000"
>
图层文字</div><script language=javascript>
function cc(tt)
{
var hint = tt.getAttribute("alt");
var e = document.getElementById("pop");
var t = tt.offsetTop; //TT控件的定位点高
var h = tt.clientHeight; //TT控件本身的高
var l = tt.offsetLeft; //TT控件的定位点宽
var ttyp = tt.type; //TT控件的类型
while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
e.style.top = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
e.style.left = l + 1; //层的 X 坐标
e.style.display = "block"; //层显示
e.innerHTML = hint; //author: meizz
}
</script>
</body></html>
这样我只要用asp.net给WEB控件动态加 alt 属性,就可以了...我试试先,有问题再请教您。
再次感谢!
<div align=left><table border=1 width=600 height=50>
<tr align=center>
<td>
<input type=button value=ok onmouseover="cc(this)" alt="XXX提示信息一<br>第二行<br><a href='#'>更详细资料请点击</a>"
onmouseout="delay()">
</td><td>
<input type=button value=ok onmouseover="cc(this)" alt="提示信息二"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this)" alt="提示信息三"
onmouseout="document.all.pop.style.display='none'">
</td></tr>
</table><div><div id=pop style="
position: absolute;
width: 120;
height: 30;
z-index: 99;
display: none;
background-color: #FF0000"
>
图层文字</div><script language=javascript>
var hide_delay=null;
function cc(tt)
{
if (hide_delay) {
clearTimeout(hide_delay);
hide();
}
var hint = tt.getAttribute("alt");
var e = document.getElementById("pop");
var t = tt.offsetTop; //TT控件的定位点高
var h = tt.clientHeight; //TT控件本身的高
var l = tt.offsetLeft; //TT控件的定位点宽
var ttyp = tt.type; //TT控件的类型
while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
e.style.top = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
e.style.left = l + 1; //层的 X 坐标
e.style.display = "block"; //层显示
e.innerHTML = hint; //author: meizz
}
function delay()
{
hide_delay=setTimeout('hide()',2000);
}
function hide()
{
document.all.pop.style.display='none';
}
</script>
</body></html>
width: height: top: left:
我改了改,但还是不很理想,窗口缩小后,鼠标靠近边缘时div变成一个长条状?-------------------------------------------------------------------------------------------
先取消里面的width、height属性定义:
<div id=pop style="
position: absolute;
z-index: 99;
display: none;
background-color: #FF0000"
>再修改了JS脚本:
<script language=javascript>
document.onmousemove = f_onMouseMove;var hide_delay=null;
var left=5;
var top=5;
function cc(tt)
{
if (hide_delay) {
clearTimeout(hide_delay);
hide();
}
var n_win_l = f_scrollLeft();
var n_win_t = f_scrollTop();
var n_x = window.n_mouseX + n_win_l + left;
var n_y = window.n_mouseY + n_win_t + top;
var hint = tt.getAttribute("alt");
var e = document.getElementById("pop");
var t = tt.offsetTop; //TT控件的定位点高
var h = tt.clientHeight; //TT控件本身的高
var l = tt.offsetLeft; //TT控件的定位点宽
var ttyp = tt.type; //TT控件的类型
while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
//e.style.top = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
//e.style.left = l + 1; //层的 X 坐标
var n_w = getSize(e);
var n_h = getSize(e, true);
var n_win_w = f_clientWidth()
var n_win_h = f_clientHeight(); if (n_x + n_w > n_win_w + n_win_l) n_x = n_win_w + n_win_l - n_w;
if (n_x < n_win_l) n_x = n_win_l;
if (n_y + n_h > n_win_h + n_win_t) n_y = n_win_h + n_win_t - n_h;
if (n_y < n_win_t) n_y = n_win_t;
e.style.left = n_x;
e.style.top = n_y;
e.style.display = "block"; //层显示
e.innerHTML = hint; //author: meizz
}
function getSize (id, b_hight) {
if (b_hight) {
return id.offsetHeight;
}
else {
return id.offsetWidth;
}
}
function delay()
{
hide_delay=setTimeout('hide()',2000);
}
function hide()
{
document.all.pop.style.display='none';
}
function f_onMouseMove(e_event) {
if (!e_event && window.event) e_event = window.event;
if (e_event) {
window.n_mouseX = e_event.clientX;
window.n_mouseY = e_event.clientY;
}
return true;
}
function f_scrollLeft() {
if (typeof(window.pageXOffset) == 'number')
return window.pageXOffset;
if (document.body && document.body.scrollLeft)
return document.body.scrollLeft;
if (document.documentElement && document.documentElement.scrollLeft)
return document.documentElement.scrollLeft;
return 0;
}
function f_scrollTop() {
if (typeof(window.pageYOffset) == 'number')
return window.pageYOffset;
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
return 0;
}
function f_clientWidth() {
if (typeof(window.innerWidth) == 'number')
return window.innerWidth;
if (document.documentElement && document.documentElement.clientWidth)
return document.documentElement.clientWidth;
if (document.body && document.body.clientWidth)
return document.body.clientWidth;
return null;
}
function f_clientHeight() {
if (typeof(window.innerHeight) == 'number')
return window.innerHeight;
if (document.documentElement && document.documentElement.clientHeight)
return document.documentElement.clientHeight;
if (document.body && document.body.clientHeight)
return document.body.clientHeight;
return null;
}</script>
三个事件触发句柄
等会给你写个示例
<HTML>
<HEAD>
<TITLE> New Document - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="never-online, blueDestiny">
<META NAME="Keywords" CONTENT="never-online, blueDestiny">
<META NAME="Description" CONTENT="http://www.never-online.net">
<style>
body, pre
{
font-size: 0.9em;
font-family: verdana;
}
.copyright
{
text-align: center;
font-size: 1em;
}
.tips
{
border: 1px solid #666666;
padding: 5px 10px 5px 10px;
position: absolute;
background-color: #ffffff;
filter:alpha(Opacity=80);
}
</style>
</HEAD>
<BODY>
<img src="http://zi.csdn.net/300_60.gif" tips="猫扑招人">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.onmouseover = document.onmousemove = fnHandleOver;
document.onmouseout = fnHandleOut;var _tips = document.createElement("DIV");
_tips.className = "tips";
document.body.appendChild(_tips);function fnHandleOver() {
var El = event.srcElement;
var Tips = El.getAttribute("tips");
if (!Tips) { _tips.style.display = "none"; return; }
with (_tips.style) {
display = "";
left = event.clientX + 10;
top = event.clientY + 10;
}
_tips.innerHTML = Tips;
}
function fnHandleOut() {
_tips.style.display = "none";
}
//-->
</SCRIPT>
<h4 class="copyright"> Power By blueDestiny, never-online, <a href="http://www.never-online.net" tips="welcome to never-online's Website">http://www.never-online.net</a> </h4>
</BODY>
</HTML>
但无法将鼠标移动到Tip内,如果我的Tip内有个超链接,而我想点击它...
比如:
<img src="http://zi.csdn.net/300_60.gif" tips="猫扑招人<br>第二行<br><a href='http://www.163.com'>具体信息请点击这里</a>">
于是我有修改了部分:
.....略......
var hide_delay=null;
function fnHandleOver() {
var El = event.srcElement;
var Tips = El.getAttribute("tips");
if (!Tips) {fnHandleOut(); return; }
if (hide_delay) {
clearTimeout(hide_delay);
hidenow();
}
with (_tips.style) {
display = "";
left = event.clientX + 10;
top = event.clientY + 10;
}
_tips.innerHTML = Tips;
}
function fnHandleOut() {
hide_delay=setTimeout('hidenow()',6000);
}
function hidenow() {
_tips.style.display = "none";
}
.....略......
但如此修改后,再移动鼠标Tip跟随移动时,总感觉会闪烁?另外,还有一个致命缺点:
因为我是准备用在表格中的,如:
<tr tips="哺乳动物<br><a href='XXX'>查看相关信息</a>"><td>大象</td></tr>
<tr tips="两栖动物<br><a href='XXX'>查看相关信息</a>"><td>青蛙</td></tr>
如果Tip块一直跟随着鼠标,将无法点击到超链接,因为再往上、下移就又碰到另外一行了,原先的Tip会马上消失,出来新的Tip...........鼠标第一次移入热区(<tr>),就确定Tip块的位置,再在同一热区内移动,不改变其位置。
这样该怎么做呢?