在同一窗口浏览图片的方法有很多,本例要为大家介绍的是使用 js 获取 img 的 src 属性后进行替换
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在同一窗口浏览图片的方法有很多,本例要为大家介绍的是使用 js 获取 img 的 src 属性后进行替换,有此需要的朋友可以参考下
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>
- Insert title here
- </title>
- <style>
- h1{position:absolute;margin-left:150px;} ul{position:absolute;margin-top:50px;margin-left:80px;}
- li{float:left;list-style:none;padding:1em;} img{position:absolute;margin-top:100px;margin-left:100px;width:1000px;height:600px;}
- p{position:absolute;margin-top:800px;margin-left:550px;}
- </style>
- <script>
- function showCat(a) {
- var osrc = a.getAttribute("href");
- var oimg = document.getElementById("img1");
- oimg.setAttribute("src", osrc);
- var op = document.getElementById("p1");
- var otxt = a.getAttribute("title");
- op.childNodes[0].nodeValue = otxt;;
- }
- </script>
- </head>
- <body>
- <h1>
- Cat Home
- </h1>
- <ul>
- <li>
- <a href="img/1.jpg" title="我是白猫咪" onclick="showCat(this);return false;">
- 白猫咪
- </a>
- </li>
- <li>
- <a href="img/2.jpg" title="我是黑猫咪" onclick="showCat(this);return false;">
- 黑猫咪
- </a>
- </li>
- <li>
- <a href="img/3.jpg" title="我是花猫咪" onclick="showCat(this);return false;">
- 花猫咪
- </a>
- </li>
- </ul>
- <img id="img1" src="img/4.jpg" alt="猫咪" />
- <p id="p1">
- choose Cat Photo
- </p>
- </body>
- </html>
来源: