<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>
当显示"提示信息一"的时候也出来"图片一","提示信息二"的时候就出来"图片二": (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>
<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>不是可以吗?
谢谢.
e.inner.html="<img src=''></img>"
喔,这样会不会只能显示固定的图片?
我是想当显示"提示信息一"的时候也出来"图片一","提示信息二"的时候就出来"图片二".
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>
(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>
<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>不是可以吗?
谢谢您,但是我目录下明明有imgsrc1这张图片,按照你上面的代码,却还是显示不出来的啊.
<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>上次未写传入图片参数了不好意思.
我就是要这种效果,谢谢,很感谢.