Help with image display please...

[DDL]

I am trying to create a simple web gallery to swap my images at
http://dev.lenosphotography.com

Go to the family section (should open a image bar at bottom - you may have
to scroll down - I have not finalized placement) - when you click on the
image thumbnail it calls a page (passing the reference to the "image name"
with this code. The swapfade code basicall swaps via fading one image for
another.. so I load the blank jpg with the size set to the real images W/H -
then call the swapfade function...

<script language="javas cript1.2" type="text/javascript">

var iWidth = 0;
var iHeight = 0;

img1 = new Image();
img1.src = '<%=Request.Que ryString( "photo" )%>';

iHeight=img1.he ight;
iWidth=img1.wid th;

document.write ("<img src='images/photoblank.jpg' border='1' id='photo'
width=", iWidth, " height=", iHeight, ">");
// alert(document. documentElement .innerHTML);
swapfade(docume nt.getElementBy Id('photo'),'<% =Request.QueryS tring(
"photo" )%>', '1', '');

</script>

_______________ _______________ _______________ ____-

This works 99% of the time - but every so often the image comes up with
width and height = 0 - I am sure that it is due to the image not being fully
loaded before the img1.height line is called.. I have scoured the net on
this and found where I need to make sure the image is complete/loaded before
testing for it's height and width- nothing I have tried has worked yet...

Thanks for your help!

[tihu]

Hiya Doug

Have you tried the onload event handler?

You will need to move everything after img1.src = <%..... into a
separate function then set img1.onload to the name of this function.

Something like this

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

<script language="javas cript1.2" type="text/javascript">

var iWidth = 0;
var iHeight = 0;

img1 = new Image();
img1.src = '<%=Request.Que ryString( "photo" )%>';
img1.onload = imgLoaded;

function imgLoaded( anImg ) { //anImg is set automatically.. ..
iHeight=anImg.h eight;
iWidth=anImg.wi dth;

document.write ("<img src='images/photoblank.jpg' border='1'
id='photo'
width=", iWidth, " height=", iHeight, ">");
// alert(document. documentElement .innerHTML);
swapfade(docume nt.getElementBy Id('photo'),'<% =Request.QueryS tring(
"photo" )%>', '1', '');
}
</script>

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Is that any good to you?
tihu

[DDL]

I'll give it a try and report back...THANKS!
"tihu" <ti********@gma il.com> wrote in message
news:11******** **************@ g47g2000cwa.goo glegroups.com.. .

Hiya Doug

Have you tried the onload event handler?

You will need to move everything after img1.src = <%..... into a
separate function then set img1.onload to the name of this function.

Something like this

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

<script language="javas cript1.2" type="text/javascript">

var iWidth = 0;
var iHeight = 0;

img1 = new Image();
img1.src = '<%=Request.Que ryString( "photo" )%>';
img1.onload = imgLoaded;

function imgLoaded( anImg ) { //anImg is set automatically.. ..
iHeight=anImg.h eight;
iWidth=anImg.wi dth;

document.write ("<img src='images/photoblank.jpg' border='1'
id='photo'
width=", iWidth, " height=", iHeight, ">");
// alert(document. documentElement .innerHTML);
swapfade(docume nt.getElementBy Id('photo'),'<% =Request.QueryS tring(
"photo" )%>', '1', '');
}
</script>

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Is that any good to you?
tihu

[tihu]

Hiya.

Sorry I made a mistake in my above reply.

The imgLoaded function doesnt get a copy of the image, it receives an
event object.

So the imgLoaded function needs to be

function imgLoaded( event ) {
iHeight=img1.he ight;
iWidth=img1.wid th;

Good luck

[DDL]

hmm... look over... see anythign amiss? hit the site... not working exactly
right.. not getting the image?

<script language="javas cript1.2" type="text/javascript">

img1 = new Image();
img1.src = '<%=Request.Que ryString( "photo" )%>';
img1.onload = imgLoaded;

function imgLoaded( event ) {
var iWidth = 0;
var iHeight = 0;
iHeight = img1.height;
iWidth = img1.width;

document.write ("<img src='images/photoblank.jpg' border='1' id='photo'
width=", iWidth, " height=", iHeight, ">");
alert(document. documentElement .innerHTML);
swapfade(docume nt.getElementBy Id('photo'),'<% =Request.QueryS tring(
"photo" )%>', '1', '');
}

</script>

"tihu" <ti********@gma il.com> wrote in message
news:11******** **************@ g14g2000cwa.goo glegroups.com.. .

Hiya.

Sorry I made a mistake in my above reply.

The imgLoaded function doesnt get a copy of the image, it receives an
event object.

So the imgLoaded function needs to be

function imgLoaded( event ) {
iHeight=img1.he ight;
iWidth=img1.wid th;

Good luck

[tihu]

No I don't know.

Would you add alert( "src=" + img1.src + " h=" + img1.height + " w="
img1.width + " ok=") to the imgLoaded func to see whats going on

[DDL]

This appears to be working!

<script language="javas cript1.2" type="text/javascript">

img1 = new Image();
img1.src = '<%=Request.Que ryString( "photo" )%>';
img1.onLoad = imgLoaded (this);

function imgLoaded( img ) {
var iWidth = 0;
var iHeight = 0;

iHeight = img1.height;
iWidth = img1.width;

document.write ("<img src='images/photoblank.jpg' border='1' id='photo'
width=", iWidth, " height=", iHeight, ">");
// alert(document. documentElement .innerHTML);
swapfade(docume nt.getElementBy Id('photo'),'<% =Request.QueryS tring(
"photo" )%>', '1', '');
}

</script>

[DDL]

Spoke too soon... seems to be working in IE - not seen it fail - but FIREFOX
fails most times - I get the 0x0 image... ARGH!

"DDL" <dl****@hotmail .com> wrote in message
news:G5******** *************** *******@giganew s.com...

This appears to be working!

<script language="javas cript1.2" type="text/javascript">

img1 = new Image();
img1.src = '<%=Request.Que ryString( "photo" )%>';
img1.onLoad = imgLoaded (this);

function imgLoaded( img ) {
var iWidth = 0;
var iHeight = 0;

iHeight = img1.height;
iWidth = img1.width;

document.write ("<img src='images/photoblank.jpg' border='1' id='photo'
width=", iWidth, " height=", iHeight, ">");
// alert(document. documentElement .innerHTML);
swapfade(docume nt.getElementBy Id('photo'),'<% =Request.QueryS tring(
"photo" )%>', '1', '');
}

</script>

[tihu]

Hmm

Need to change
img1.onLoad = imgLoaded (this);
because this will call the imgLoaded function straight away then set
onload property to the result of the function

Stick with img1.onload = imgLoaded; as this will make the onload
property a reference to the imgLoaded function and call it later

But you've already tried that and it doesnt work properly so now we're
both stuck!

Can you try the alert function to see whats going on in the imgloaded
function

[DDL]

got this: but the alert never fires... hmmm - I'll add one up front too...

<script type="text/javascript">

img1 = new Image();
img1.src = '/images/family/Image12.jpg';
img1.onLoad = imgLoaded;

function imgLoaded( event ) {
var iWidth = 0;
var iHeight = 0;

iHeight = img1.height;
iWidth = img1.width;
alert( "src=" + img1.src + " h=" + img1.height + " w=" + img1.width )

document.write ("<img src='images/photoblank.jpg' border='1' id='photo'
width=", iWidth, " height=", iHeight, ">");
// alert(document. documentElement .innerHTML);
swapfade(docume nt.getElementBy Id('photo'),'/images/family/Image12.jpg',
'1', '');
}

</script>