Width: x Height:
Then look for the code,
We will take the original size of image by using Jquery.
Defined the jquery in your head container
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Html code of image:
<html>
<head>
// Defined Jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="myimg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaXD9e5dDWD2dh5V-5pIegk_ipN2nZD9zp9miIYq_FQr_H-iy34uH5cPRDpHeKB2IbATqYv4j78uvqK4R50UZeeqexd1oU97SZ9b3SzpsqI2JS8z_twEqH9Snmjk2L3Kb_uk8N41l4iJg/s1600/nusa-dua.jpg" height="200" width="300" />
</div>
</body>
</html>
And below is the code to get original size of image:
$(document).ready(function(){
var img = new Image();
img.onload = function() {
alert("width:"+this.width+" x Height:"+this.height;
}
img.src = $('#myimg img').attr('src');
});
Include get original size of image code in html:
<html>
<head>
// Defined Jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
// Get original size code
<script type="text/javascript">
$(document).ready(function(){
var img = new Image();
img.onload = function() {
alert("width:"+this.width+" x Height:"+this.height;
}
img.src = $('#myimg img').attr('src');
});
</script>
</head>
<body>
<div id="myimg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaXD9e5dDWD2dh5V-5pIegk_ipN2nZD9zp9miIYq_FQr_H-iy34uH5cPRDpHeKB2IbATqYv4j78uvqK4R50UZeeqexd1oU97SZ9b3SzpsqI2JS8z_twEqH9Snmjk2L3Kb_uk8N41l4iJg/s1600/nusa-dua.jpg" height="200" width="300" />
</div>
</body>
</html>
Well done,
hope it will help,
Thank you for visit my blog,
If you have any question, just write comment below.
Best Regard,
Bayu Prawira
No comments:
Post a Comment