SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post How to put picture in the div

    Hi, I have problem i don't have idea on how to put the image in a div with an id of "zooomout" when i click on the picture.

    can you help me please how to do this.

    Code:
    <!DOCTYPE html>
    
    <html>
      
      <head>
        <meta charset="utf-8"/>
    	
    	<style type="text/css">
    	  .rembull ul{
    	    list-style: none;
    	  }
    	 
    	  ul img{
    	    width: 80px;
    	  }
    	  
    	  #bodycontainer{
    	    background: #555555;
    		width: 100%;
    		height: 100%;
    		position: absolute;
    		border: 1px solid blue;
    		top: 0;
    		left: 0;
    		z-index: 10;
    		opacity: 0.7;
    	    display: none;
    	  }
    	 
    	  
    	  #zoomout{
    	    position: relative;
    		left:  300px;
    		bottom: 300px;
    		width: 250px;
    		height: 250px;
    		border: 1px solid red;
    		display: none;
    		z-index: 100px;
    	  }
    	  
    	  #pic{
    	     
    	     
    	  }
    	
    	</style>
    	
      </head>
      
       <body>
       
    	    <div class="rembull">
    		   <ul id="pic">
    			   <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 id="bodycontainer"> 
    			
    	    </div>
    		
    		<div id="zoomout">
    			
    		</div>
    	   
    	 
    	 <script>
    	 
    		 var pic, items,zoom;
    	     var bodycont;
    		 pic = document.getElementById("pic");
    		 items = pic.getElementsByTagName("li");
    		 console.log(items);
    	     console.log(document.getElementById("pic"));
    		
    	     var i=0;
    		 var itemslen;
    		 
    			
    		
    		pic.addEventListener("click",function(e){
    			 
    			 if(e.target.tagName === "IMG")
    			    {
    				  bodycont =  document.getElementById("bodycontainer"); 
    				  zoom  =  document.getElementById("zoomout"); 
    				  
    				  bodycont.style.display="block";
    				  zoom.style.display="block";
    				  
    				
    				}
    		});
    	
    			
    	   
    
    	 </script>
    	 
       </body>
    </html>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try:
    Code:
     if(e.target.tagName === "IMG")
     {
       bodycont =  document.getElementById("bodycontainer"); 
       zoom  =  document.getElementById("zoomout"); 
    				  
       bodycont.style.display="block";
       zoom.style.display="block";
    				  
       zoom.appendChild( e.target.parentNode.removeChild( e.target ) );
     }
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    Try:
    Code:
     if(e.target.tagName === "IMG")
     {
       bodycont =  document.getElementById("bodycontainer"); 
       zoom  =  document.getElementById("zoomout"); 
    				  
       bodycont.style.display="block";
       zoom.style.display="block";
    				  
       zoom.appendChild( e.target.parentNode.removeChild( e.target ) );
     }
    Hi thank you for the reply..can you please help me to enlighten my mind in this

    zoom.appendChild( e.target.parentNode.removeChild( e.target ) );


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •