页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容 js实现的修改div里img标签的src属性

js实现的修改div里img标签的src属性

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title>

<script language="javascript"> 
    function addmethod() 
    { 
        var table=document.getElementById("table"); 
        var tr=table.firstChild.getElementsByTagName("tr")[0]; 
        var arr=tr.getElementsByTagName("td"); 
         
        for (var i=0;i<arr.length;i++) 
        { 
            arr[i].firstChild.attachEvent("onmousemove",showdiv); 
            arr[i].firstChild.attachEvent("onmouseout",hiddendiv); 
        } 
    } 
     
    function showdiv() 
    { 
        var div=document.getElementById("Layer1"); 
        var image=document.getElementById("image"); 
                                image.setAttribute("src",window.event.srcElement.src); 
        div.style.top=window.event.clientY+5; 
        div.style.left=window.event.clientX+5; 
        div.style.visibility="visible"; 
    } 
     
    function hiddendiv() 
    { 
        var div=document.getElementById("Layer1"); 
        div.style.visibility="hidden";

} 
</script> 
<style type="text/css"> 
 
</style> 
</head>

<body onload="addmethod()">

<table  id="table" width="768" border="1"> 
  <tr> 
    <td><img src="3d0a35e6b33a9d192e7db203c30aa82ds.jpg" width="256" height="199" /></td> 
    <td><img src="708_533_e087d36410831754.jpg" width="256" height="199" /></td> 
    <td><img src="4b7c123ed58513a698337860f54dfc8d_m.jpg" width="256" height="199" /></td> 
  </tr> 
</table> 
<div id="Layer1"><img id="image"/></div> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：js实现的修改div里img标签的src属性

浏览次数：载入中... 打印本文关闭本文返回首页

0

上一篇文章：一直都需要的复制到系统剪贴板之IE,firefox兼容版
下一篇文章：javascript同步Import,同步调用外部js的方法

·在百度中搜索关于“js实现的修改div里img标签的src属性”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

同类文章

最近更新

热点排行