The js implementation browses images in the same window

  • 2020-03-30 03:57:52
  • OfStack

There are many ways to browse pictures in the same window, this example is to use js to get the SRC attribute of img to replace, have this need of friends can refer to


  <!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=" I'm white cat " onclick="showCat(this);return false;"> The white cat </a> 
    </li> 
    <li> 
      <a href="img/2.jpg" title=" I'm black cat " onclick="showCat(this);return false;"> The black cat </a> 
    </li> 
    <li> 
      <a href="img/3.jpg" title=" I am a flower cat " onclick="showCat(this);return false;"> Take the cat </a> 
    </li> 
  </ul> 
   
  <img id="img1" src="img/4.jpg" alt=" The cat "/> 
  <p id="p1">choose Cat Photo</p> 
   
  </body> 
  </html> 

Related articles: