...

View Full Version : detect image width



jspeybro
07-25-2004, 02:41 PM
Hello, I'm trying to find out if I can detect the image width and heigth of a certain image somewhere on the page.

the image is loaded in a div, so it might be ok to detect the div-width and height.
I then want to use the width and heigth to give another div the correct size.

I do not want to do this staticly because it's not correct for every resolution/window-size.

I searched the web, and found this:http://www.aspandjavascript.co.uk/javascript/javascript%5Fapi/

but I don't know how to use it for my situation (if it's useable at all).

any idea's?

Johan

coothead
07-25-2004, 09:04 PM
Hi there jspeybro,

I extracted a part of the code that you found
and played around with it. Hopefully it may give
you some ideas that will then suit your purpose :D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Dimensions</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
#blah {
position:absolute;
top:50px;
background:#ff0000;
border:solid 1px #000000;
display:none;
}
img {
position:absolute;
top:50px;
left:50px;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
var ns4 = document.layers;
var op5 = (navigator.userAgent.indexOf("Opera 5")!=-1) ||(navigator.userAgent.indexOf("Opera/5")!=-1);
var op6 = (navigator.userAgent.indexOf("Opera 6")!=-1) ||(navigator.userAgent.indexOf("Opera/6")!=-1);
var agt=navigator.userAgent.toLowerCase();
var mac = (agt.indexOf("mac")!=-1);
var ie = (agt.indexOf("msie") != -1);
var mac_ie = mac && ie;

function Dimensions(Elem) {
if (ns4) {
var elem = getObjNN4(document, Elem);
return elem.clip.height;
return elem.clip.width;
}
else {
var elem;
if(document.getElementById) {
var elem = document.getElementById(Elem);
}
else if (document.all) {
var elem = document.all[Elem];
}
if (op5) {
yPos = elem.style.pixelHeight;
xPos = elem.style.pixelWidth;
}
else {
yPos = elem.offsetHeight;
xPos = elem.offsetWidth;
}

document.getElementById('blah').style.height=yPos+"px";
document.getElementById('blah').style.width=xPos+"px";
document.getElementById('blah').style.left=xPos+70+"px";
document.getElementById('blah').style.display="block";
}
}
//]]>
</script>

</head>
<body>

<div><a href="#" onclick="Dimensions('foo')">height/width</a></div>

<div><img id="foo" src="http://hstrial-dbayly.homestead.com/files/dog.jpg" alt="dog"/></div>

<div id="blah"></div>

</body>
</html>


coothead

jspeybro
07-25-2004, 09:14 PM
thanks!

I added the Dimensions-function to the body-tag with

<body onload="Dimensions('foo')">
and that seemed to work too, so I think my problem is solved!

Thanks again.

Johan

coothead
07-25-2004, 09:22 PM
Hi there jspeybro,

no problem, you're welcome :D

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum