Pedro Chagas
asked on
Get image site in javascrip
Hi E's,
I try to get the height of a image using this code:
The best regards, JC
I try to get the height of a image using this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<img src="../../imagem/jpg640x480/DSC_2576.jpg"/>
<script>
var x = document.getElementById('img').height;
alert(x);
</script>
</body>
</html>
but not work, what is wrong?The best regards, JC
One way to do this is with jquery. For example, this works in Safari, Chrome and Firefox in my tests.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script>
<script>
$("#img").one("load", function(){
var img = this;
setTimeout(function(){
alert(img.height);
}, 30);
});
</script>
Javascript way:
<script>
window.addEventListener('load', function(){
var x = document.getElementById('img').height;
alert(x);
});
</script>
ASKER
Hi Tom,
I have test in Safari.
When I going home, I will test your solutions.
Thank you.
The best regards, JC
I have test in Safari.
When I going home, I will test your solutions.
Thank you.
The best regards, JC
Try: var x= document.getElementById("i mg").style .height;
make sure you give your image a height
<img id="imageID" src="path.png" style="height:299px;"/>
<img id="imageID" src="path.png" style="height:299px;"/>
ASKER
HI,
I see all the solutions, and I conclude javascript cant get the size of images, based only in the image, without style. If the image don't have any style associated, is impossible to js determinate the size of the image! Please tell me if I'm wrong.
When I try to know if js can get the size of the images, the objective is create a script for detect if the image is loaded or not loaded. Maybe this not was the correct path to that objective.
What should I do?
The best regards, JC
I see all the solutions, and I conclude javascript cant get the size of images, based only in the image, without style. If the image don't have any style associated, is impossible to js determinate the size of the image! Please tell me if I'm wrong.
When I try to know if js can get the size of the images, the objective is create a script for detect if the image is loaded or not loaded. Maybe this not was the correct path to that objective.
What should I do?
The best regards, JC
there is no good way of doing that - what I do is preload the images in an on load function
Have you tried alert(document.getElementB yId("image ID").style .height;) ?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi Tom, you give a hope.
I try your last solution in two ways:
The second way:
My knowledge in js is poor, so I want ask you, if you can, how you use your code in my initial code.
The best regards, JC
I try your last solution in two ways:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="img"><img src="../../imagem/jpg640x480/DSC_2576.jpg"/></div>
<script>
window.addEventListener('load', function(){
var x = document.getElementById('img').height;
alert(x);
});
</script>
</body>
</html>
The result of was 'undefined'.The second way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<img src="../../imagem/jpg640x480/DSC_2576.jpg"/>
<script>
window.addEventListener('load', function(){
var x = document.getElementById('img').height;
alert(x);
});
</script>
</body>
</html>
alert not work.My knowledge in js is poor, so I want ask you, if you can, how you use your code in my initial code.
The best regards, JC
ASKER
Hi @DualCool, I don't do a refresh in this page, and I don't see your last comment. Thanks for your comment and help.
I want to see the correct code running to analyze your solution.
If you can help also, I appreciate. Thanks.
The best regards, JC
I want to see the correct code running to analyze your solution.
If you can help also, I appreciate. Thanks.
The best regards, JC
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi @Sar1973, your solution not work, you can see the alert in the attach image (is empty). I try in FF and i.e.11. Anyway, thanks for trying to help.
Hi @DualCool, thank you.
I try in Safari 5.1.2 and work, also i.e. 11 and chrome 32.0.1700.107 m.
Not work in i.e.5, 6, 7, 8 and 9.
In fact, it is a bit viable solution.
Thank you all for the excellent help.
The best regards, JC
Hi @DualCool, thank you.
I try in Safari 5.1.2 and work, also i.e. 11 and chrome 32.0.1700.107 m.
Not work in i.e.5, 6, 7, 8 and 9.
In fact, it is a bit viable solution.
Thank you all for the excellent help.
The best regards, JC
It works in Firefox but not in Safari in my tests so far.