JS图片变换效果，响应鼠标给图片增加链接代码

发布时间：2018-08-17 19:12:59 所属栏目：Asp教程来源：站长网

导读：JS图片变换效果，当我们用鼠标指向或经过图片时，原本没有超级链接的图片会产生链接，并且图片也切换为另一张，不错的网页特效，可以用于一些搞笑类的网站上，例如：默认图片弄一张特漂亮的美眉，当鼠标指到上边时变成恶鬼，哈哈。。。烈火小编有点邪恶了

　　JS图片变换效果，当我们用鼠标指向或经过图片时，原本没有超级链接的图片会产生链接，并且图片也切换为另一张，不错的网页特效，可以用于一些搞笑类的网站上，例如：默认图片弄一张特漂亮的美眉，当鼠标指到上边时变成恶鬼，哈哈。。。烈火小编有点邪恶了，不要跟我学哦。

　　示例：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gbk" /> <title>CSS变换图片</title> <style type="text/css"> * { padding:0; margin:0; } </style> <script type="text/javascript"> window.onload=function(){ var otest=document.getElementById("test"); var obj=otest.getElementsByTagName("img")[0]; obj.onmouseover=function(){ var oa=document.createElement("a"); oa.href="http://www.liehuo.net"; var oi=this.cloneNode(true); oi.src="/uploads/common/images/wall_s2.jpg"; oa.appendChild(oi); otest.appendChild(oa); this.style.display="none"; } } </script> </head> <body> <div id="test"> <img src="/uploads/common/images/wall_s3.jpg" alt="veryhuo com" /> </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：重庆站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

ASP访问ACCESS出错提醒	ASP生成XML动态数据读
asp与php中定时生成页	ASP.NET 页面中动态增