Getting the actual width of IMG

JavaScript
1

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.



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

That seems to be pretty easy to achieve.


var images = document.querySelectorAll('#pic img'),
    i;
for (i = 0; i < images.length; i += 1) {
    images[i].onclick = function () {
        window.alert(this.width);
    };
}
3

Hi paul_wilkins, thank you so much for this…it solve my problem…more power to you always…

4

An improvement from here would be to not assign multiple events on the page, but to use just the one event to manage things.


document.querySelector('#pic').onclick(function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (targ.nodeName === 'img') {
        window.alert(targ.width);
    }
};
5

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

6

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?

7

Thank you felgall.