Rumah > Artikel > hujung hadapan web > js melaksanakan menyemak imbas gambar dalam kemahiran window_javascript yang sama

js melaksanakan menyemak imbas gambar dalam kemahiran window_javascript yang sama

WBOYasal: 2016-05-16 16:36:031177semak imbas

Terdapat banyak cara untuk menyemak imbas imej dalam tetingkap yang sama Dalam contoh ini, saya akan memperkenalkan kepada anda cara menggunakan js untuk mendapatkan atribut src img dan kemudian menggantikannya 🎜>

  <!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>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Contoh mudah aplikasi kemahiran function_javascript panggil balik JSArtikel seterusnya：Contoh mudah aplikasi kemahiran function_javascript panggil balik JS

Artikel berkaitan

Lihat lagi