高分悬赏 代码:datalist做的图片组,怎样当鼠标停留在其某张图片上时,会在另外一个img 上面显示其图片(在客户端)

Question

高分悬赏:datalist做的图片组,怎样当鼠标停留在其某张图片上时,
会在另外一个img 上面显示其图片(在客户端)我现在代码:
<script> 
   function displayIMG()
        { 
               alter("1");
        } 
</script> 
<asp:DataList ID="DataList1"runat="server" RepeatColumns="6 RepeatDirection="Horizontal" >
         <ItemTemplate>
           <table style="width: 117px; height: 103px" id="TABLE2" language="javascript"  >
               <tr valign=baseline align=left>
                   <td style="width: 189px; height: 12px"  onmouseover="displayIMG()"  >
                      <img src='<%#Eval("group_big")%>' style=" height: 93px" />   
                    </td>
                </tr>
           </table>
           </ItemTemplate> 
</asp:DataList>
cs: protected void Page_Load(object sender, EventArgs e)
    {
               ------------------------------
                 DataList1.Attributes.Add("onmousemover","isplayIMG()");
    }
现在怎样获得当前图片列的img的路径 存放到js变量中
然后在js中做到图片展示 ??
各位 老大,分不够可以再给了啊
发言啊

Answer 1

<td style="width: 189px; height: 12px" onmouseover="displayIMG()" >
-->
<td style="width: 189px; height: 12px" onmouseover="displayIMG(this)" >function displayIMG(obj)
{
    //这里的obj就是td的对象
    有了td就可以得到它的子节点img，得到了img对象就可以得到他的src
} 
具体代码就不写了:)

Answer 2

或者你可以把onmouseover加到img上
这样就可以直接得到src
比如：
<img src='<%#Eval("group_big")%>' style=" height: 93px" /> 
--〉
<img src='<%#Eval("group_big")%>' style=" height: 93px" onmousemover="displayIMG(<%#Eval("group_big")%>)"/>

Answer 3

具体效果图如:http://www.jcrew.com/catalog/product.jhtml?id=prod74125481&catId=cat108149

Answer 4

lovefootball(蟑螂（生活就是扯淡--做人要放低姿态）) ( ) 信誉：98    我这样该后 还是不可以的啊  <td style="width: 189px; height: 12px"> 
         <img src='<%#Eval("group_big")%>' style="width: 106px; height: 93px"        
           onmousemove="displayIMG(<%#Eval("group_big")%>)" />   
 </td>  function displayIMG(path)
        {  
        document.all["photo"].src= path;
        } 
  <td style="width: 387px; height: 236px"> 
         <img src="" style="width: 386px; height: 433px" id="photo" /></td>这样之后,鼠标停留后还是没有图片展示出来的 
我查看了原代码 
  <td style="width: 387px; height: 236px"> 
       <img src="" style="width: 386px; height: 433px" id="photo"  />
  </td>
为什么js函数不能直接修改了photo的src

Answer 5

<SCRIPT language=JavaScript>
//***********默认设置定义.*********************
tPopWait=50;//停留tWait豪秒后显示提示。
tPopShow=5000;//显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=99;//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText {  background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
function showPopupText(){
var o=event.srcElement;
 MouseX=event.x;
 MouseY=event.y;
 if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
        if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
 if(o.dypop!=sPop) {
   sPop=o.dypop;
   clearTimeout(curShow);
   clearTimeout(tFadeOut);
   clearTimeout(tFadeIn);
   clearTimeout(tFadeWaiting);
   if(sPop==null || sPop=="") {
    dypopLayer.innerHTML="";
    dypopLayer.style.filter="Alpha()";
    dypopLayer.filters.Alpha.opacity=0;
    }
   else {
    if(o.dyclass!=null) popStyle=o.dyclass
     else popStyle="cPopText";
    curShow=setTimeout("showIt()",tPopWait);
   } }
}function showIt(){
  dypopLayer.className=popStyle;
  dypopLayer.innerHTML=sPop;
  popWidth=dypopLayer.clientWidth;
  popHeight=dypopLayer.clientHeight;
  if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
   else popLeftAdjust=0;
  if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
   else popTopAdjust=0;
  dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
  dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
  dypopLayer.style.filter="Alpha(Opacity=0)";
  fadeOut();
}function fadeOut(){
 if(dypopLayer.filters.Alpha.opacity<popOpacity) {
  dypopLayer.filters.Alpha.opacity+=showPopStep;
  tFadeOut=setTimeout("fadeOut()",1);
  }
  else {
   dypopLayer.filters.Alpha.opacity=popOpacity;
   tFadeWaiting=setTimeout("fadeIn()",tPopShow);
   }
}function fadeIn(){
 if(dypopLayer.filters.Alpha.opacity>0) {
  dypopLayer.filters.Alpha.opacity-=1;
  tFadeIn=setTimeout("fadeIn()",1);
  }
}
document.onmouseover=showPopupText;
</SCRIPT>
你只需要把其中的DIV改为图片就可以了！

Answer 6

这个简单点，效果也还可以！
<script type="text/jscript">
function show(e) {
if(typeof(e) == "string") {
e = document.getElementById(e);
}
e.style.position = 'absolute';
e.style.left = event.x - 5;
e.style.right = event.y - 10;
e.style.display = 'block';
}
function hide(e) {
if(typeof(e) == "string") {
e = document.getElementById(e);
}
e.style.display = 'none';
}
    </script>
<body>
<table>
<tr>
<td onmouseover="show('imgTe')" onmouseleave="hide('imgTe')" width="80" bgcolor="lime">切换</td>
</tr>
</table>
<img id="imgTe" src="file:///C:\Documents and Settings\Administrator\My Documents\My Pictures\10cffc4d2eb.jpg" style="display:none; width:100px; height:100px; background-color:Beige">
</body>

Answer 7

抱歉，第一个忘加点东西：
在body里加入下面代码：
<A HREF="#" title="百度<br>LOGO<img src='http://www.baidu.com/img/logo.gif'>">请点此处</A>

Answer 8

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>test</title>
    <script type="text/javascript">
        function displayIMG(path)
        {
            document.getElementById("photo").src = path;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table>
        <tr>
        
            <td style="width: 189px; height: 12px">
                <img src='111.jpg' style="width: 106px; height: 93px" onmousemove="displayIMG('111.jpg')" />
            </td>
        </tr>
        <tr>        
        <td style="width: 387px; height: 236px">
        <img src="" style="width: 386px; height: 433px" id="photo" /></td>
        </tr>
    </table>
    </form>
</body>
</html>经过测试
没有问题
你可以在displayIMG这个函数中alert一下path看看是什么

Answer 9

onmousemove="displayIMG(<%#Eval("group_big")%>)" /> --〉
nmousemove="displayIMG('<%#Eval("group_big")%>')" />

Answer 10

感谢各位 ,上面的问题已经得到解决了  可以实行鼠标onmouse展示大图片现在问题又出现了,我的group_big里面存放的是这样的: photo\img.gif
这样 传递到js中就有错误了js获得path时候,已经是转义后的字符了怎样解决这个问题??

Answer 11

问题已经解决
谢谢各位了中午结帖 不过现在发现js也是很有用途,可是现在才入门,那位推荐下怎么学好js,以及要看点那些书谢了