How do i click the picture

Hi, can you help me please,I want to make a simple photo slide.but the problem is how can i click the picture inorder to zoom out.can you guide me step by step please.Thank you in advance.

By the way i have no code yet for the javascript because i have no idea yet on how to achieve this.

here is my code.



<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8"/>
	
	<style type="text/css">
	  .rembull ul{
	    list-style: none;
	  }
	
	  ul img{
	    width: 100px;
	  }
	
	  .bodycontainer{
	    background: #555555;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		
	  }
	
	
	</style>
	
  </head>

   <body>
    <div class="bodycontainer">
			 <div class="rembull">
				<ul>
					<li><img src="image/pic-1.jpg"/></li>
					<li><img src="image/pic-2.jpg"/></li>
					<li><img src="image/pic-3.jpg"/></li>
					<li><img src="image/pic-4.jpg"/></li>
				</ul>
			 <div>
	 </div>
	
   </body>
</html>



how do i get the picture and zoom out every time i click?can you help me please.I want only the steps and guide me…I mean an algorithm on this…

Google “javascript picture zoom” or similar