网络编程
位置：首页>> 网络编程>> JavaScript>> js实现在同一窗口浏览图片

js实现在同一窗口浏览图片

作者：whsnow　　发布时间：2024-07-16 02:22:49　

标签：窗口

在同一窗口浏览图片的方法有很多，本例要为大家介绍的是使用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>
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com