Hi guys,

First off, anyone that attempts to help me will go down as a hero in my eyes!

Basically...I'm making my own changes to a script that was placed on DHTMLGoodies.com (Image Slideshow 5) - http://www.dhtmlgoodies.com/scripts/...ideshow-5.html

I've improved by adding a lightbox engine into it, and I'm now looking at changing the white border to a 50% opacity border http://www.e-lementdesigns.com/loidland/test.html.

I've got a bit of CSS that does it nicely:

Code CSS:
#width {
 
  width:330px !important; width:338px;
  height:162px !important; height:170px;
  border:4px solid white;
  filter:alpha (opacity=50);
  -moz-opacity:.50;
  opacity:.50;
  -khtml-opacity: 0.5;
}

But to apply this, I need to apply this code onto the background of a div:

Code HTML4Strict:
<div id="trans" style="width:338px; height:170px; background:url(images/image1_big.jpg) no-repeat;">
 
<div id="width"></div>
 
</div>

But obviously the background image will change depending on which image the user clicks on. Currently the thumbnail link looks like this:

Code HTML4Strict:
<a href="#" onclick="showPreview('images/image1_big.jpg',this,'images/image1_big.jpg');return false;"><img src="images/image1.jpg"></a>

And the showPreview function looks like:

Code JavaScript:
   function showPreview(imagePath,inputObj,largestImage) 
   {       
 
      var previewPane = document.getElementById('DHTMLgoodies_largeImage'); 
      var aTag = previewPane.getElementsByTagName('A')[0];
        aTag.href = largestImage;
 
	  if(DHTMLgoodies_currentActiveImage){ 
         if(DHTMLgoodies_currentActiveImage==inputObj.getElementsByTagName('IMG')[0])return; 
         DHTMLgoodies_currentActiveImage.className=''; 
      } 
      DHTMLgoodies_currentActiveImage = inputObj.getElementsByTagName('IMG')[0]; 
      DHTMLgoodies_currentActiveImage.className='activeImage'; 
 
      DHTMLgoodies_imageToShow = imagePath; 
      var tmpImage = new Image(); 
      tmpImage.src = imagePath; 
      currentUnqiueOpacityId = Math.random(); 
      moveOpacity(opacitySteps*-1,currentUnqiueOpacityId); 
   }

So instead of changing the SRC of the image from here:

Code HTML4Strict:
<div id="DHTMLgoodies_largeImage">
	<table cellpadding="0" cellspacing="0" width="350">
		<tr>
			<td valign="top" align="right">
 
				<a href="images/image1_big.jpg" rel="lightbox"><img src="images/image1_big.jpg" border="0"></a>
 
			</td>
		</tr>
	</table>
</div>

...to that of a bigger image, I need to change the source of the background from here:

Code HTML4Strict:
<div id="DHTMLgoodies_largeImage">
	<table cellpadding="0" cellspacing="0" width="350">
		<tr>
			<td valign="top" align="right">
 
			<div id="trans" style="width:338px; height:170px; background:url(images/image1_big.jpg) no-repeat;">
				<div id="width"></div>
			</div>
 
			</td>
		</tr>
	</table>
</div>

If anyone understands that, they're a better man than me!