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="javascript1.2" type="text/javascript">

var iWidth = 0;
var iHeight = 0;

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

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(document.getElementById('photo'),'<%=Requ est.QueryString(
"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="javascript1.2" type="text/javascript">

var iWidth = 0;
var iHeight = 0;

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

function imgLoaded( anImg ) { //anImg is set automatically....
iHeight=anImg.height;
iWidth=anImg.width;

document.write ("<img src='images/photoblank.jpg' border='1'
id='photo'
width=", iWidth, " height=", iHeight, ">");
// alert(document.documentElement.innerHTML);
swapfade(document.getElementById('photo'),'<%=Requ est.QueryString(
"photo" )%>', '1', '');
}
</script>

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

Is that any good to you?
tihu

[DDL]

I'll give it a try and report back...THANKS!
"tihu" <ti********@gmail.com> wrote in message
news:11**********************@g47g2000cwa.googlegr oups.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="javascript1.2" type="text/javascript">

var iWidth = 0;
var iHeight = 0;

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

function imgLoaded( anImg ) { //anImg is set automatically....
iHeight=anImg.height;
iWidth=anImg.width;

document.write ("<img src='images/photoblank.jpg' border='1'
id='photo'
width=", iWidth, " height=", iHeight, ">");
// alert(document.documentElement.innerHTML);
swapfade(document.getElementById('photo'),'<%=Requ est.QueryString(
"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.height;
iWidth=img1.width;

Good luck

[DDL]

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

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

img1 = new Image();
img1.src = '<%=Request.QueryString( "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(document.getElementById('photo'),'<%=Requ est.QueryString(
"photo" )%>', '1', '');
}

</script>

"tihu" <ti********@gmail.com> wrote in message
news:11**********************@g14g2000cwa.googlegr oups.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.height;
iWidth=img1.width;

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="javascript1.2" type="text/javascript">

img1 = new Image();
img1.src = '<%=Request.QueryString( "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(document.getElementById('photo'),'<%=Requ est.QueryString(
"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******************************@giganews.com ...

This appears to be working!

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

img1 = new Image();
img1.src = '<%=Request.QueryString( "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(document.getElementById('photo'),'<%=Requ est.QueryString(
"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(document.getElementById('photo'),'/images/family/Image12.jpg',
'1', '');
}

</script>

[tihu]

I tested with the script below and the onload handler is case
sensitive, will you change onLoad to onload in your script then see if
that alert is triggered in firefox

<head>
<title>PDC's start</title>
<SCRIPT LANGUAGE = "JavaScript">
function imageLoad()
{
alert("ok");
}

imgTest = new Image();
imgTest.onload = imageLoad;
imgTest.src = "http://localhost/graphic2.jpg";

</SCRIPT> <BODY>hello</BODY></HTML>

[Vigor]

Getting closer - DONT try the first Image - I was testing the qstring with
something else...

"tihu" <ti********@gmail.com> wrote in message
news:11**********************@f14g2000cwb.googlegr oups.com...

I tested with the script below and the onload handler is case
sensitive, will you change onLoad to onload in your script then see if
that alert is triggered in firefox

<head>
<title>PDC's start</title>
<SCRIPT LANGUAGE = "JavaScript">
function imageLoad()
{
alert("ok");
}

imgTest = new Image();
imgTest.onload = imageLoad;
imgTest.src = "http://localhost/graphic2.jpg";

</SCRIPT> <BODY>hello</BODY></HTML>