◆鼠标移动时提示的代码

sw1035 2007-07-15 01:50:47
以下是一个鼠标移动后提示的代码,现在我需在提示的文字信息里面,增多一张图片.
请问要如何修改程序,谢谢...


<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="提示信息一aaaaaaaaaaaaaaaa"
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;
display: none;
width:300px;
height:200px;
PADDING-TOP: 6px;
PADDING-LEFT: 6px;
PADDING-RIGHT: 6px;
PADDING-BOTTOM: 6px;
BORDER-top: #cccccc 1px solid;
BORDER-LEFT: #cccccc 1px solid;
BORDER-RIGHT: #cccccc 1px solid;
BORDER-bottom: #cccccc 1px solid;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;"
>
</div>

<script language=javascript>
function cc(tt)
{
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.innerText = window.event.srcElement.alt;
}
</script>
</body></html>
...全文
246 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
sw1035 2007-07-22
  • 打赏
  • 举报
 回复
web_show强啊.
我就是要这种效果,谢谢,很感谢.
yifuzhiming 2007-07-22
  • 打赏
  • 举报
 回复
学习
web_show 2007-07-22
  • 打赏
  • 举报
 回复
<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,'imgsrc1')" alt="提示信息一aaaaaaaaaaaaaaaa"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this,'imgsrc2')" alt="提示信息二"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this,'imgsrc3')" alt="提示信息三"
onmouseout="document.all.pop.style.display='none'">
</td></tr>
</table><div>


<div id=pop style="
position: absolute;
display: none;
width:300px;
height:200px;
PADDING-TOP: 6px;
PADDING-LEFT: 6px;
PADDING-RIGHT: 6px;
PADDING-BOTTOM: 6px;
BORDER-top: #cccccc 1px solid;
BORDER-LEFT: #cccccc 1px solid;
BORDER-RIGHT: #cccccc 1px solid;
BORDER-bottom: #cccccc 1px solid;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;"
>
</div>

<script language=javascript>
function cc(tt,img)
{
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"; //层显示
var str=window.event.srcElement.alt;
str+="<br /><img src='"+img+".gif' />"; //图片是什么格式的可以改,也可以传入
//完整路径....
//alert(str);
e.innerHTML=str;
}
</script>
</body></html>

上次未写传入图片参数了不好意思.
ws_fengyun 2007-07-21
  • 打赏
  • 举报
 回复
看不太懂~
sw1035 2007-07-21
  • 打赏
  • 举报
 回复
web_show
谢谢您,但是我目录下明明有imgsrc1这张图片,按照你上面的代码,却还是显示不出来的啊.
web_show 2007-07-21
  • 打赏
  • 举报
 回复
innerText当然不能解释<img...>了,所以显示出来的只会是文字
web_show 2007-07-21
  • 打赏
  • 举报
 回复
<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,'imgsrc1')" alt="提示信息一aaaaaaaaaaaaaaaa"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this,'imgsrc2')" alt="提示信息二"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this,'imgsrc3')" alt="提示信息三"
onmouseout="document.all.pop.style.display='none'">
</td></tr>
</table><div>


<div id=pop style="
position: absolute;
display: none;
width:300px;
height:200px;
PADDING-TOP: 6px;
PADDING-LEFT: 6px;
PADDING-RIGHT: 6px;
PADDING-BOTTOM: 6px;
BORDER-top: #cccccc 1px solid;
BORDER-LEFT: #cccccc 1px solid;
BORDER-RIGHT: #cccccc 1px solid;
BORDER-bottom: #cccccc 1px solid;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;"
>
</div>

<script language=javascript>
function cc(tt)
{
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"; //层显示
var str=window.event.srcElement.alt;
str+="<br /><img src='' />";
e.innerHTML=str;
}
</script>

</body></html>

不是可以吗?
sw1035 2007-07-21
  • 打赏
  • 举报
 回复
奇怪,还是显示不了啊,只显示出来一行字.
谢谢..
浪尖赏花 2007-07-16
  • 打赏
  • 举报
 回复
当显示"提示信息一"的时候也出来"图片一","提示信息二"的时候就出来"图片二":
(imgsrc1,imgsrc2,imgsrc3为图片路径)

<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,'imgsrc1')" alt="提示信息一aaaaaaaaaaaaaaaa"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this,'imgsrc2')" alt="提示信息二"
onmouseout="document.all.pop.style.display='none'">
</td><td>
<input type=button value=ok onmouseover="cc(this,'imgsrc3')" alt="提示信息三"
onmouseout="document.all.pop.style.display='none'">
</td></tr>
</table><div>


<div id=pop style="
position: absolute;
display: none;
width:300px;
height:200px;
PADDING-TOP: 6px;
PADDING-LEFT: 6px;
PADDING-RIGHT: 6px;
PADDING-BOTTOM: 6px;
BORDER-top: #cccccc 1px solid;
BORDER-LEFT: #cccccc 1px solid;
BORDER-RIGHT: #cccccc 1px solid;
BORDER-bottom: #cccccc 1px solid;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;"
>
</div>

<script language=javascript>
function cc(tt,src)
{
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.innerText = window.event.srcElement.alt+"<br/><img src='"+src+"' />";
}
</script>
</body></html>
web_show 2007-07-15
  • 打赏
  • 举报
 回复
<script language=javascript>
function cc(tt)
{
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"; //层显示
var str=window.event.srcElement.alt;
str+="<br /><img src='' />";
e.innerHTML=str;
}
</script>
sw1035 2007-07-15
  • 打赏
  • 举报
 回复
cuit
谢谢.
e.inner.html="<img src=''></img>"
喔,这样会不会只能显示固定的图片?
我是想当显示"提示信息一"的时候也出来"图片一","提示信息二"的时候就出来"图片二".
gnimgnot 2007-07-15
  • 打赏
  • 举报
 回复
e.inner.html="<img src=''></img>"
JavaScript实现鼠标移动到指定HTML元素超过3秒则调用弹框提示
可以使用JavaScript中的’setTimeout函数和mouseover事件...在上述代码中，当鼠标移动到myDiv元素上时，会在3秒后弹出提示框，可以将弹出提示框修改为自己想要调用的函数，也可以将提示框的方式修改为其他形式的提醒。
vb 6.0 常用工具（鼠标移动，代码补全，代码对齐）
1、鼠标移动插件 （用鼠标滑动实现代码的滑动） 2、自动对齐代码 (选中代码右键可以对齐代码) 3、控件代码提示插件(等同于高级编辑器) 另外发现的问题: 它的书签没法保存，一结束运行，再次打开 所有的端点，...
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【代码】【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果。
pycharm鼠标悬停没有代码提示解决方法（超全）
最近发现在使用pycharm编写python代码的时候，有时候在编辑工程的时候，鼠标悬停一些简单的函数会有提示，而在pytorch一些函数上悬停却没有提示，查了查大家的解决办法，跟着改还是不能解决问题，最后才发现是一个小...
jquery当鼠标移动到button按钮控件时，会出现提示信息
当我们移动鼠标到一个图片或者按钮上时，经常会出现一个提示框提示信息，代码如下： #jqueryba{position:absolute;border:1px solid #333;background:#f7f5d1;padding:2px 5px;color:#333;display:...
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章