Getting the actual width of IMG

**jemz** · Oct 22, 2012 02:51

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>

**paul_wilkins** · Oct 22, 2012 17:15

Originally Posted by jemz

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);
    };
}

**jemz** · Oct 22, 2012 23:34

Originally Posted by paul_wilkins

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

**paul_wilkins** · Oct 23, 2012 00:27

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);
    }
};

**felgall** · Oct 23, 2012 03:12

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

**jemz** · Oct 23, 2012 23:31

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?

**jemz** · Oct 23, 2012 23:32

Thank you felgall.

User Tag List

Thread: Getting the actual width of IMG

Thread Tools

Display

Getting the actual width of IMG

Bookmarks

Bookmarks

Posting Permissions