PDA

View Full Version : Access img attributes from the page

Graeme Hackston
09-18-2002, 11:07 PM
Can I get src, size, alt etc.?
umm
09-19-2002, 12:17 AM
as an example....

<html>
<head>
<title>
Image Test
</title>
<script language="javascript" type="text/javascript">
<!-- ;
function getImageInfo() {
var imgs=document.images;
for(i=0;i<imgs.length;i++){
alert(imgs[i].name+"\n"+imgs[i].alt+"\n"+imgs[i].src);
}
}
function doit(attValue){
alert(attValue)
}
// -->
</script>
</head>
<body onload="getImageInfo()">
<p>
<a href="javascript:void(0)"><img name="testOne" src="img01.gif" height="20" width="20" alt="Image Number One" onclick="doit(this.src)"></a>
Click Me
</p>
<p>
<a href="javascript:void(0)"><img name="testTwo" src="img02.gif" height="20" width="20" alt="Image Number Two" onclick="doit(this.height)"></a>
Click Me as Well
</p>
</body>
</html>
Graeme Hackston
09-19-2002, 12:22 AM
Cool, thanks much umm
Graeme Hackston
09-20-2002, 02:08 AM
I can't get the sizes in IE6. The way I've set it up it alerts (document.images['img-id'].width) as "0" while Mozilla 1.0 and Opera 6 get the value. Am I doing something at the wrong time? Is there a cleaner way of doing this?

I'm using the attributes like this, the function is stripped down but goes on to size the image by window size.

<head>
<script>

img=document.images;

function ResizePic (ImgId) {
src = img[ImgId].src;
alt = img[ImgId].alt;
document.write('<img src="'+src+'" alt="'+alt+'" width="107" height="78">');
}
</script>
<body>
.
.
.

<td>
<img id="img-1-of-9" class="no-script-img" src="image.jpg" alt="an image" width="136" height="100">
<script type='text/javascript'>ResizePic ('img-1-of-9');</script>
</td>


Here is the complete functions (I haven’t written the really big window part yet)

<edit2>the -210 in this function is my navigation div</edit2>

function iw() {
if (window.innerWidth) {
w = window.innerWidth-210
} else if (document.documentElement && document.documentElement.clientWidth) {
w = document.documentElement.clientWidth-210
} else if (document.body) {
w = document.body.clientWidth-210
}
return w;
return null;
}


function ih() {
if (window.innerHeight) {
h = window.innerHeight
} else if (document.documentElement && document.documentElement.clientHeight) {
h = document.documentElement.clientHeight
} else if (document.body) {
h = document.body.clientHeight
}
return h;
return null;
}

function LandscapeThumb (ImgId) {
var src = img[ImgId].src;
var alt = img[ImgId].alt;
var w=136;
var h=100;
var pw=24; // percentage width
var ph=16; // percentage height
var sw=Math.round(iw()*pw/100);
var sh=Math.round(ih()*ph/100);
if ((w*sh)/(h*sw)<1) sw=Math.round(w*sh/h);
else sh=Math.round(h*sw/w);
if ((ih() < 500) || (iw() < 500)) {
sw = 107;
sh = 78;
}
document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" border="0">');
}


<edit>the image class="no-script-img" is set to display none for script enabled browsers</edit>
Graeme Hackston
09-20-2002, 05:06 AM
It's the style display. I checked it once already but forgot that the div the pic table is in first loads as display none.
Graeme Hackston
09-20-2002, 06:20 AM
Ok, now I can alert the correct sizes onload in IE but if I alert from the function the sizes are "0". I think IE hasn't download the image before the script is run right after it on the page.

Is there a method of making the function wait until the image is downloaded? Or, can I do something with the onload event in the image?
joh6nn
09-20-2002, 06:29 AM
images come with onload events, and complete(d?) attributes. onload fires when it's done downloading, and iirc, complete(d) is a boolean returning whether or not the thing has finished loading.
Graeme Hackston
09-20-2002, 12:51 PM
Thanks John

Can I get the function to wait for the image to load using complete?

Something like:

if (!document.images[ImgId].complete) {
wait
}

<edit> Or would the page load faster if I leave it the way it is. Seeing as that the function is giving the image sizes?</edit>
Graeme Hackston
09-20-2002, 11:59 PM
I think I've got it:

function ReSize (ImgId) {
if (IE5+) {
document.getElementById(ImgId).style.display = "block";
}

// rest of function

if (IE5+) {
document.getElementById(ImgId).style.display = "none";
}
}
Graeme Hackston
09-21-2002, 12:51 AM
No I don't have it, it won't work when it's in a table. Any ideas?
Graeme Hackston
09-21-2002, 01:08 AM
Here are test pages with and without a table. The 2nd one works in IE6:

<html>
<head>
<title></title>

<style>
.hide {
display: none;
}
</style>

<script>
imgs=document.images;

function iw() {
if (window.innerWidth) {
w = window.innerWidth
} else if (document.documentElement && document.documentElement.clientWidth) {
w = document.documentElement.clientWidth
} else if (document.body) {
w = document.body.clientWidth
}
return w;
return null;
}

function ih() {
if (window.innerHeight) {
h = window.innerHeight
} else if (document.documentElement && document.documentElement.clientHeight) {
h = document.documentElement.clientHeight
} else if (document.body) {
h = document.body.clientHeight
}
return h;
return null;
}

function pic (ImgId) {
document.getElementById(ImgId).style.display = "block";
var src = imgs[ImgId].src;
var alt = imgs[ImgId].alt;
var w = imgs[ImgId].width;
var h = imgs[ImgId].height;
document.getElementById(ImgId).style.display = "none";
var pw = 75; // percentage width
var ph = 75; // percentage height
var sw = Math.round(iw()*pw/100);
var sh = Math.round(ih()*ph/100);
if ((w*sh)/(h*sw)<1) sw=Math.round(w*sh/h);
else sh=Math.round(h*sw/w);
document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" border="0">');

}

</script>
</head>
<body>

<table>
<tr>
<td>
<img src="an_image.jpg" alt="some text" width="50" height="50" id="img-1" class="hide" />
<script type='text/javascript'>pic('img-1')</script>
</td>
</tr>
</table>

</body>
</html>



/***********************************/



<html>
<head>
<title></title>

<style>
.hide {
display: none;
}
</style>

<script>
imgs=document.images;

function iw() {
if (window.innerWidth) {
w = window.innerWidth
} else if (document.documentElement && document.documentElement.clientWidth) {
w = document.documentElement.clientWidth
} else if (document.body) {
w = document.body.clientWidth
}
return w;
return null;
}

function ih() {
if (window.innerHeight) {
h = window.innerHeight
} else if (document.documentElement && document.documentElement.clientHeight) {
h = document.documentElement.clientHeight
} else if (document.body) {
h = document.body.clientHeight
}
return h;
return null;
}

function pic (ImgId) {
document.getElementById(ImgId).style.display = "block";
var src = imgs[ImgId].src;
var alt = imgs[ImgId].alt;
var w = imgs[ImgId].width;
var h = imgs[ImgId].height;
document.getElementById(ImgId).style.display = "none";
var pw = 75; // percentage width
var ph = 75; // percentage height
var sw = Math.round(iw()*pw/100);
var sh = Math.round(ih()*ph/100);
if ((w*sh)/(h*sw)<1) sw=Math.round(w*sh/h);
else sh=Math.round(h*sw/w);
document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" border="0">');

}

</script>
</head>
<body>

<div>
<img src="an_image.jpg" alt="some text" width="50" height="50" id="img-1" class="hide" />
<script type='text/javascript'>pic('img-1')</script>
</div>

</body>
</html>
Graeme Hackston
09-21-2002, 12:22 PM
Here is a more simplified example. This doesn’t get the image height from within the table in IE6 and Opera 6.

I can move either the image or script out of the table and it works. Does anyone know what's happening here?


<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>
<img src="an_image.jpg" alt="" width="50" height="50" id="img-1">
<script type='text/javascript'>alert(document.images['img-1'].height)</script>
</td>
</tr>
</table>
<script type='text/javascript'>alert(document.images['img-1'].height)</script>
</body>
</html>
Graeme Hackston
09-21-2002, 09:48 PM
I think I should be waiting for the images to load before running the function. Then I don't need to wonder why IE won't get image sizes in a table.

Should I use "while" or "for" and how would it be implemented (so far all I've done is freeze my computer). What's wrong with the while syntax below?


imgs=document.images;

function picl (ImgId) {
while (!imgs[ImgId].complete) {
}
document.getElementById(ImgId).style.display = "block";
var src = imgs[ImgId].src;
var alt = imgs[ImgId].alt;
var w = imgs[ImgId].width;
var h = imgs[ImgId].height;
document.getElementById(ImgId).style.display = "none";
var pw = 24; // percentage width
var ph = 16; // percentage height
var sw = Math.round(iw()*pw/100);
var sh = Math.round(ih()*ph/100);
if ((w*sh)/(h*sw)<1) sw=Math.round(w*sh/h);
else sh=Math.round(h*sw/w);
if ((ih() < 500) || (iw() < 500)) {
sw = 107;
sh = 78;
}
document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" border="0">');
}
joh6nn
09-21-2002, 11:49 PM
how 'bout this:

function picl (img) {
img.style.display = "block";
var src = imh.src;
var alt = img.alt;
var w = img.width;
var h = img.height;
img.style.display = "none";
var pw = 24; // percentage width
var ph = 16; // percentage height
var sw = Math.round(iw()*pw/100);
var sh = Math.round(ih()*ph/100);
if ((w*sh)/(h*sw)<1) sw=Math.round(w*sh/h);
else sh=Math.round(h*sw/w);
if ((ih() < 500) || (iw() < 500)) {
sw = 107;
sh = 78;
}
document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" border="0">');
}

<img onload="checkImgs(this);">
Graeme Hackston
09-23-2002, 12:03 AM
Thanks John, I'll give that a whirl