关于一种js显示效果的延伸

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#otbl {
    border: 1px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 1px solid #8F8F8F;
    width: 60px;
    height: 30px;
}
#odiv {
    width:400px;
    height:400px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}</style>
<script type="text/javascript">

</script>
</head>
<body>
<table id="main">
<tr>
<td>
<table id="otbl">
        <tr>
            <td onmouseover="showTip(event, this)"> <img src="http://t3.baidu.com/it/u=818127432,806306651&fm=0&gp=8.jpg"/ > </td>
            <td>ccc</td>
        </tr>
</table></td>
</tr></table> <div id="odiv"></div>
</body>
</html>
如上述代码   实现的是鼠标放到图片上图片放大显示在旁边的一个层上，现在我想实现鼠标放在图片旁边的文字上（如本例中的CCC）使图片放大显示。
请教思路。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
<style>
#otbl {
    border: 1px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 1px solid #8F8F8F;
    width: 60px;
    height: 30px;
}
#odiv {
    width:400px;
    height:400px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}</style>
<script type="text/javascript">

</script>
</head>
<body>
<table id="main">
<tr>
<td>
<table id="otbl">
        <tr>
            <td> <img id="imgg" src="http://t3.baidu.com/it/u=818127432,806306651&fm=0&gp=8.jpg"/ > </td>
            <td  onmouseover="showTip(event,document.getElementById('imgg'))">ccc </td>
        </tr>
</table></td>
</tr></table><div id="odiv"></div>
</body>
</html>
还想请问高手一下
假如我的图片都是动态从数据库里读出来的，img的id不好手动确定
该如何通过函数取得图片这个元素呢？
可以通过document.getElementsByTagName('img');返回img标签数组，然后做循环~·
然后做判断~··或者给img标签  加个alt属性~·进行判断
请问高手加个alt属性的意义是什么？
进行判断用~·因为你ＩＤ不是从数据库取出来的吗？是动态的。。所以不好做判断。就用alt判断用。
如果你class不用从数据库动态生成，也可以用class.class也好,alt也好主要就是做个标识,进行判断方便~`或者是取值
那我理解错了~··你数据库里存的是图片的名称，你就把IMG标签的ID设置成图片的名称
然后用ID和数据库图片的名字做比较，一样的就赋值到对应的IMG标签，就成了~··
我说一下我的理解啊：
1.从数据库里读出每张图片，并且把ID设置成数据库中读出的名称。
2.在函数function showTip(e,obj){
        //var obj = document.getElementById(obj);
        CancelBubble(e);
        var e = e || window.event
        var otarget = getTarget(e);
        $("odiv").style.display = "block";        with($("odiv").style){
            display="block";top=absPosition(otarget).y+"px";left=(absPosition(otarget).x+otarget.offsetWidth)+"px";
        }
        $("odiv").innerHTML = " <img style='width:100%;height:100%' src="+obj.src+"/>";
        document.onmouseover = function(){
            $("odiv").style.display = "none";
            document.onmouseover = null;
        }
        $("odiv").onmouseover = function(e){
            var e = e || window.event;
            CancelBubble(e);
        }
调用时，使用document.getElementsByTagName('img');将所有图片放入一个数组
即var elm = document.getElementsByTagName("img"); 然后呢？
然后做循环
for(var i = 0; i < elm.length; i++){
   if(elm[i].id == //从数据库读出来的图片名称){
      //这里面在写处理
   }
}
那么函数function showTip(e,obj)就要变形了？
for(var i = 0; i < elm.length; i++){
  if(elm[i].id == //从数据库读出来的图片名称){
      //这里面在写处理
      showTip.call(elm[i]);
  }
}
继续请教高手啊,我今天试了一下，代码如下：
function test(imgname){
var elm = document.getElementsByTagName("img");
for(var i = 0; i < elm.length; i++){
  if(elm[i].id == imgname){
            showTip.call(event,elm[i]);
  }
}
  }
这是我写的一个用于比较并且处理图片的函数，其中参数imgname是传入的图片的ID。在页面中
我调用的方式是：
<%var path = rs("firstImageName") %>
<table id="otbl">
        <tr>
<td> <img id="& path &" src="http://t3.baidu.com/it/u=818127432,806306651&fm=0&gp=8.jpg"/ > </td>
            <td  onmouseover="test("& path &" )">ccc </td>
        </tr>
</table>
其中变量path是数据库中读取的图片名称。但是测试时却不行  不知道是什么原因。
function test(imgname){
var elm = document.getElementsByTagName("img");
for(var i = 0; i < elm.length; i++){(function(){
    if(this.id == imgname){
       showTip.call(this.event,this);
    }
}).call(elm[i])}
}
<style>
#otbl {
    border: 1px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 1px solid #8F8F8F;
    width: 60px;
    height: 30px;
}
#odiv {
    width:400px;
    height:400px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}</style>
<script type="text/javascript">

function test(imgname){
var elm = document.getElementsByTagName("img");
for(var i = 0; i < elm.length; i++){(function(){
    if(this.id == imgname){
       showTip.call(this.event,this);
    }
}).call(elm[i])}
} </script><table id="otbl">
        <tr>
            <td><img src="http://t3.baidu.com/it/u=818127432,806306651&fm=0&gp=8.jpg" id="haha"/ ></td>
<td onmouseover="test('haha')">cccc</td>

        </tr>


</table><div id="odiv"></div>
俺的代码
运行报错：42行   offsetTop为空或不是对象.
showTip.apply(this,[this.event,this]);
这样试试~·
高手，俺修改了代码
再次请教
<style>
#otbl {
    border: 1px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 1px solid #8F8F8F;
    width: 60px;
    height: 30px;
}
#odiv {
    width:400px;
    height:400px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
} </style>
<script type="text/javascript">

function test(imgname){
var elm = document.getElementsByTagName("img");
for(var i = 0; i < elm.length; i++){(function(){
    if(this.id == imgname){
      showTip.apply(this,[this.event,this]);
    }
}).call(elm[i])}
} </script> <table id="otbl">
        <tr>
            <td> <img src="zanwu.gif" id="haha"/ > </td>
<td onmouseover="test('haha')">cccc </td>

        </tr>


</table> <div id="odiv"> </div> 运行时原来的错误没了，有了个新的错误第56行  childNodes.0.src为空或者不是对象
把childNodes.0.src改成obj.src就出来了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
<style>
#otbl {
    border: 1px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 1px solid #8F8F8F;
    width: 60px;
    height: 30px;
}
#odiv {
    width:400px;
    height:400px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}</style>
<script type="text/javascript">

function test(imgname){
var elm = document.getElementsByTagName("img");
for(var i = 0; i < elm.length; i++){(function(){
    if(this.id == imgname){
      showTip.apply(this,[this.event,this]);
    }
}).call(elm[i])}
}</script>
</head>
<body>
<table id="otbl">
        <tr>
            <td> <img src="1_MuBeiBei.jpg" id="haha"/ > </td>
<td onmouseover="test('haha')">cccc </td>

        </tr>


</table><div id="odiv"></div>
</body>
</html>
之前报的错是找不到对象
我后来不是让你改成showTip.apply(this,[this.event,this]); 这样吗.
apply是每个函数都有的方法,是自掉函数,说白了就是自己调用自己
(this//第一个this代表当前对象,[this.event,//this.event参数代表事件this//这个this也是代表当前对象])如果你还是不明白的话,就去百度搜看看~··我说的可能也不好~`见谅!
21楼是我改好的代码就改了那一个地方，其它地方都没动和你的一样!
还有一段代码的问题想请教
<head>
<style>
#otbl {
    border: 0px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 0px solid #8F8F8F;

}
#odiv {
    width:150px;
    height:150px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;

}a:link { text-decoration: none;color: black}
　　 a:active { text-decoration:blink}
　　 a:hover { text-decoration:underline;color: red}
　　 a:visited { text-decoration: none;color: black}
</style>
<script type="text/javascript">
 imgname      '" & imgpath & "'
function test(){
var elm = document.getElementsByTagName("img"); for(var i = 0; i < elm.length; i++){(function(){

//if (elm[i].id  == "nothing"){
//elm[i].src = "zanwu.gif";
//showTip.apply(this,[this.event,this]);
//}

//else{
//if(elm[i].id == imgname){

  showTip.apply(this,[this.event,this]);

    //} //}

}).call(elm[i])}
} //-->
</script>
<title>rongyudangan_11</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<%
Set rs=Server.CreateObject("ADODB.RecordSet")
sql2="select * from NEWS where BigClassName='ChuShi' order by ID DESC"
rs.Open sql2,conn,1,1


for j=1 to 8 title=cstr(rs("title"))
imgpath=cstr(rs("firstImageName"))

%><%
if imgpath="" then
str="<td height='30' width='30'><img src='zanwu.gif' width='28' height='28' id='nothing'></td><td height='30' width='100'></td>"
else
str="<td height='30' width='30'><img src='../admin/eWebEditor/UploadFile/"& imgpath &"' width='28' height='28' id='"& imgpath &"'></td><td height='30' width='100'></td>"
end if
%>
<%
str=str + "<td onmouseover=""test();""> <font size='2px'><a href='../newss.asp?id=" & rs("id") & "' target='_blank'>" & title & "</a></font></td>"
%>
<%

response.Write(str)
%>
<%rs.movenext
if rs.eof then exit fornext
%> 我的想法是：从数据库中读出记录，判断firstImageName这个字段的值是否为空，如果为空，我就为<img>的src属性赋值为一个叫做zanwu.gif的图片。如果不为空，我就把src赋值为firstImageName。然后，实现鼠标放大的效果。
但是，我运行时，发现放大时的效果和我的设想不一致。不知道问题出在什么地方。
你这是VB.NET ? 我不怎么熟悉~··你看看你的逻辑~·对吗,还有传参~`检查检查~`
我估计就是我的逻辑出了问题，但是不知道问题在什么地方，没法调试
另外，我在调用test函数时，把原先的参数imgname去掉了。
不知道是否可以
不可以~`imgname是判断img名字的~··相同的才显示出来~`
还要再请教一下高手。
我在运行代码时发现，如果我的<td>的长和高度设置的比较大，放大图片的显示位置会不确定（就是我鼠标移动到<td>里的不同位置，显示出的放大图片的位置也不同）。
我看代码中用这个函数来确定放大图片显示的位置：
var absPosition = function(element){
    var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;     }while(element = element.offsetParent);
    return {'x': iLeft, 'y': iTop};
}
似乎最终的位置由<td>的height和width这两个参数来定的。
有什么办法能使放大图片的显示位置是一个定值呢？
我可能说的不是很清楚，实际上问题是我的一个<td>里面有一行带有链接的文字，当鼠标移动到文字边上时，放大图片就出现在文字的边上，而不是<td>的边框的边上。
我的感觉就是如果一段文字加上链接之后，
var absPosition = function(element){
    var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;     }while(element = element.offsetParent);
    return {'x': iLeft, 'y': iTop};
}
这个函数中的element就不是<td>了，而是那段文字了
那可能是你onmouseover事件加错地方了~·