There's a drawback to your solution: the Microsoft filter Gary Williams is refering to makes my browser prompt me for ActiveX control to be exectuted (of course I hit "no") - anyone concerned about security should/will do so and not allow ActiveX controls on unknown sites. Since it's a Microsoft filter it won't be displayed at all in other browsers, so Opera and Firefox/Mozilla won't display the shadow at all. The solution only works in M$ IE, with a nag message for users who have sensible security settings enabled.
Although webdesigners all over the planet repeat the mantra "don't use tables, don't use tables" I'd still go for a table to hold the shadow in this case, although things are a bit complicated, as you have to go for a nested table.
To illustrate what table structure I'd suggest take a look at the rough sketch:
(https://forum.coppermine-gallery.net/proxy.php?request=http%3A%2F%2Fgaugau.de%2Fpartner%2Fcpg%2Fshadow%2Fshadow_effect.jpg&hash=b3484feab40ba1f3d537dee29796a6704b3beaa1)
- the red line are the cell borders (that later won't we displayed)
- of course you'll want to display the shadow with a nice gradient fill; for abstraction I'm showing the shadow in black and grey
- cell A holds the thumbnail
- cell B has fixed width and height and holds the upper right shadow
- cell C has fixed width and variable height and holds the right center part of the shadow as background image
- cell D has fixed width and height and holds the lower left part of the shadow
- cell E has fixed height and variable width and holds the lower center part of the shadow as background image
- cell F has fixed width and height and holds the lower right shadow
What I've come up with is a table-layout that works (at least for me) in all browsers that understand css1 (Netscape4 and some other *very old* browsers still won't display the shadow, but they won't show garbled-up layout either).
Here's the HTML code:
<!-- get the width and height attributes from php:
100 equals the width/height of your thumbnail
8 equals the width/height of your shadow
108 is the width/height of your thumbnail plus the width/height of your shadow
92 is the width/height of your thumbnail minus the width/height of your shadow
-->
<table border="0" cellspacing="0" cellpadding="0" width="108">
<tr>
<td width="100" align="right" valign="top"><img src="shadow_a.jpg" width="100" height="100" border="0" alt="" /></td>
<td width="8" align="left" valign="bottom">
<table border="0" cellspacing="0" cellpadding="0" width="8">
<tr>
<td width="8" align="left" valign="top" style="background-image:url(shadow_b.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="8" height="8" border="0" alt="" /></td>
</tr>
<tr>
<td width="8" align="left" valign="middle" style="background-image:url(shadow_c.gif);background-repeat:repeat-y"><img src="shadow_blind.gif" width="8" height="92" border="0" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="92">
<tr>
<td align="right" valign="top" width="8" style="background-image:url(shadow_d.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="8" height="8" border="0" alt="" /></td>
<td align="left" valign="top" width="92" style="background-image:url(shadow_e.gif);background-repeat:repeat-x"><img src="shadow_blind.gif" width="92" height="8" border="0" alt="" /></td>
</tr>
</table>
</td>
<td width="8" align="left" valign="top" style="background-image:url(shadow_f.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="8" height="8" border="0" alt="" /></td>
</tr>
</table>
A working example can be viewed
hereNow let's get this whole enchilada into php: we'll have to introduce four vars that hold the dimensions of the thumbnail and the shadow and replace the fixed dimensions in HTML by the php vars; this is how the code looks like:
<?php
$shadow_width = 8;
$shadow_height = 8;
$thumbnail_width = 100;
$thumbnail_height = 100;
?>
<table border="0" cellspacing="0" cellpadding="0" width="<?php print $thumbnail_width + $shadow_width; ?>">
<tr>
<td width="<?php print $thumbnail_width; ?>" align="right" valign="top"><img src="shadow_a.jpg" width="<?php print $thumbnail_width; ?>" height="<?php print $thumbnail_height; ?>" border="0" alt="" /></td>
<td width="<?php print $shadow_width; ?>" align="left" valign="bottom">
<table border="0" cellspacing="0" cellpadding="0" width="<?php print $shadow_width; ?>">
<tr>
<td width="<?php print $shadow_width; ?>" align="left" valign="top" style="background-image:url(shadow_b.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="<?php print $shadow_width; ?>" height="<?php print $shadow_height; ?>" border="0" alt="" /></td>
</tr>
<tr>
<td width="<?php print $shadow_width; ?>" align="left" valign="middle" style="background-image:url(shadow_c.gif);background-repeat:repeat-y"><img src="shadow_blind.gif" width="<?php print $shadow_width; ?>" height="<?php print $thumbnail_height - $shadow_height; ?>" border="0" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="<?php print $thumbnail_width - $shadow_width; ?>">
<tr>
<td align="right" valign="top" width="<?php print $shadow_width; ?>" style="background-image:url(shadow_d.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="<?php print $shadow_width; ?>" height="<?php print $shadow_height; ?>" border="0" alt="" /></td>
<td align="left" valign="top" width="<?php print $thumbnail_width - $shadow_width; ?>" style="background-image:url(shadow_e.gif);background-repeat:repeat-x"><img src="shadow_blind.gif" width="<?php print $thumbnail_width - $shadow_width; ?>" height="<?php print $shadow_height; ?>" border="0" alt="" /></td>
</tr>
</table>
</td>
<td width="<?php print $shadow_width; ?>" align="left" valign="top" style="background-image:url(shadow_f.gif);background-repeat:no-repeat"><img src="shadow_blind.gif" width="<?php print $shadow_width; ?>" height="<?php print $shadow_height; ?>" border="0" alt="" /></td>
</tr>
</table>
See a working example
here. Please note that this is no ready-to-copy-and-paste code you can simply add into coppermine: I just posted this to proof the concept - maybe some of you coppermine starters wants to take a shot and insert it into the coppermine code - you're welcome to post your solution in this thread.
Cheers
GauGau
P.S. attached is the whole enchilada from the example pages I was refering to (HTML code and PHP code, plus image resources)
[attachment deleted by admin]