信鸽网

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

  作者：bea

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

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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: