Captions on pictures of varying width

This is a multi-part message in MIME format.

------=_NextPart_000_00A2_01C3E6BA.BE835750
Content-Type: text/plain;
	charset="us-ascii"
Content-Transfer-Encoding: quoted-printable

Skip,

I thought about your problem and I figured I could use some javascript =
to
read the size of the images when they load then adjust the inline style
width to the size of the image. This way you don't have to know the size =
of
the image, just call the function on load.  I put this code in the =
header
just after </style>.  The alert is a nice way to show some image =
properties.
You can get rid of it. The parentNode is the <div> where the image is
located.  It's important to not put any <P> before the image as this =
will
then become the parent and this code won't work.  That's kind of a flaw =
with
this method.  There may be a way to fix that, I'll give it some thought.
However if you always have the <div> and then the <img> it will work.

<script language=3Djavascript>
<!--
function imageLoaded()
{
//alert(
// "Image name is " + event.srcElement.src + "\n" +
// "Image height is " + event.srcElement.height + "\n" +
// "image width is " + event.srcElement.width + "\n" +
// "style width is " + event.srcElement.parentNode.currentStyle.width);
		=09
  event.srcElement.parentNode.style.width =3D event.srcElement.width + =
"px";
}
//-->
</script>

In the HTML dump the tables and make them all look like this:

<div class=3D"pic" style=3D"width: 1px">
  <img src=3D"images/zwingli.gif" onload=3D"imageLoaded()" />
   <p class=3D"piccaption">Zwingli</p>
</div>

all I did was add style=3D"width: 1px" to the div's and =
onload=3D"imageLoaded()"
to the img's.

I have attached the HTML so you can try it out.  It works on my PC with =
IE6.

Regards,
Garry Barton
[EMAIL-REMOVED]

-----Original Message-----
From: [EMAIL-REMOVED]
[EMAIL-REMOVED]] On Behalf Of Skip Knox
Sent: Wednesday, January 28, 2004 4:09 PM
To: [EMAIL-REMOVED]
Subject: Re: [css-d] Captions on pictures of varying width

Thanks, Zoe, that's what I was afraid of. I was trying not to have to
know the widths of every graphic. I potentially have hundreds. Oh well.

Skip Knox
Boise State University
[EMAIL-REMOVED]

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

------=_NextPart_000_00A2_01C3E6BA.BE835750
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

------=_NextPart_000_00A2_01C3E6BA.BE835750--

Captions on pictures of varying width

Sent by Garry Barton on 30 January 2004 03:03