Of Stack

javascript realizes clicking on a small picture to display a large picture

  • 2021-09-24 21:29:47
  • OfStack

In this paper, we share the specific code of javascript to show the big picture by clicking on the small picture for your reference. The specific contents are as follows 


<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  body {
   font-family: "Helvetica", "Arial", serif;
   color: #333;
   background-color: #ccc;
   margin: 1em 10%;
  }

  h1 {
   color: #333;
   background-color: transparent;
  }

  a {
   color: #c60;
   background-color: transparent;
   font-weight: bold;
   text-decoration: none;
  }

  ul {
   padding: 0;
  }

  li {
   float: left;
   padding: 1em;
   list-style: none;
  }

  #imagegallery {

   list-style: none;
  }

  #imagegallery li {
   margin: 0px 20px 20px 0px;
   padding: 0px;
   display: inline;
  }

  #imagegallery li a img {
   border: 0;
  }
 </style>
</head>
<body>

<h2>
  Beauty Gallery 
</h2>

<ul id="imagegallery">
 <li>
  <a href="images/1.jpg" rel="external nofollow" title=" Beauty A">
 <img src="images/1-small.jpg" width="100" alt=" Beauty 1"/>
  </a>
 </li>
 <li><a href="images/2.jpg" rel="external nofollow" title=" Beauty B">
  <img src="images/2-small.jpg" width="100" alt=" Beauty 2"/>
 </a></li>
 <li><a href="images/3.jpg" rel="external nofollow" title=" Beauty C">
  <img src="images/3-small.jpg" width="100" alt=" Beauty 3"/>
 </a></li>
 <li><a href="images/4.jpg" rel="external nofollow" title=" Beauty D">
  <img src="images/4-small.jpg" width="100" alt=" Beauty 4"/>
 </a></li>
</ul>


<div style="clear:both"></div>
<!-- Object that displays a large image -->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des"> Select 1 Pictures </p>
<script>
 //  Get ul Element object 
 var imagegallery = document.getElementById("imagegallery")
 //  Get a Element   Array 
 var a = imagegallery.getElementsByTagName("a")
 
 //  Getting the Large Graph Element Object 
 var image = document.getElementById("image")
 
 //  Get p Label 
 var des = document.getElementById("des")
 // console.log(imagegallery,a)
 
 //  Traverses array elements for each 1 A a Link registration click event 
 for(var i = 0; i < a.length; i++){
 a[i].onclick = function(){
  //  Will a In the link href To assign the value in a large graph src Attribute 
  image.src = this.href
  //  Will a In the link title Assign the value of as the content to the p Label 
  des.innerHTML = this.title
  return false
 }
 }
 // Click a Label , Put a In the tag href The attribute value of the attribute is given to id For image Adj. src Attribute 
 // Put a Adj. title The value of the property is given to the id For des Adj. p Label assignment 
 // Block the default jump of hyperlinks 
  // return false;

</script>

</body>
</html>
Related articles: