SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post Getting the actual width of IMG

    I need some help on how can i get the actual width of my Image when everytime i click.

    supposed the actual width of my image is 150x150

    i want that when i am going to click in each image in the list ,it will alert the widh of the image which is 150.can you help me please on this.Thank you in advance.

    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{
    	  
    	    background: yellow;
    	    position: relative;
    		left:  300px;
    		bottom: 300px;
    		width: 150px;
    		height: 250px;
    		display: none;
    		z-index: 100;
    		-webkit-box-shadow: -1px 10px 5px rgba(50, 50, 50, 0.75);
    		-moz-box-shadow:    -1px 10px 5px rgba(50, 50, 50, 0.75);
    		box-shadow:         -1px 10px 5px rgba(50, 50, 50, 0.75); 
    		
    	  }
    	  
    		
    	
    	  #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,you;
    		 
    			
    		
    		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";
    				
    				
    				  var img = document.createElement("img");
    				  img.src = e.target.src;
    				  
                                      var wid = img.src.offsetwidth;
    
                                       alert(wid);
    			          
    				  
    				}
    		});
    	
    			
    	   
    
    	 </script>
    	 
       </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    i want that when i am going to click in each image in the list ,it will alert the widh of the image which is 150.can you help me please on this.
    That seems to be pretty easy to achieve.

    Code javascript:
    var images = document.querySelectorAll('#pic img'),
        i;
    for (i = 0; i < images.length; i += 1) {
        images[i].onclick = function () {
            window.alert(this.width);
        };
    }
    Last edited by paul_wilkins; Oct 23, 2012 at 00:27.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    That seems to be pretty easy to achieve.

    Code javascript:
    var images = document.querySelectorAll('#pic img'),
        i;
    for (i = 0; i < images.length; i += 1) {
        images[i].onclick = function () {
            window.alert(this.width);
        };
    }
    &#8203;
    Hi paul_wilkins, thank you so much for this...it solve my problem...more power to you always..

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    An improvement from here would be to not assign multiple events on the page, but to use just the one event to manage things.

    Code javascript:
    document.querySelector('#pic').onclick(function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (targ.nodeName === 'img') {
            window.alert(targ.width);
        }
    };
    Last edited by paul_wilkins; Oct 23, 2012 at 03:33.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi paul_wilkins, correct me if i am wrong is this how we read

    evt = evt || window.event;
    evt = evt or window.event; ?

    this
    ||
    is an OR?

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    don't forget to replace the debugging alert call with real code once you get it working - you don't want your visitors selecting the option to turn off JavaScript for the page that alert offers in some browsers
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you felgall.


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
  •