Here is a note for no transparent image in transparent box element.

<style type="text/css">
<!--
#imageFrame { background-color: rgba(255,255,255,0.7); filter: alpha(opacity=70); }
#imageFrame img { position: relative; }
-->
</div>

<div id="imageFrame">
<img src="example.jpg" />
</div>

"background-color: rgba(255,255,255,0.7);" is for FF3.x, Safari3.x, 4.x.

"filter: alpha(opacity=70)" and "position: relative" of img tag are for IE8.

And only IE6 and IE7 need "background-color: #FFF;" after "background-color: rgba(255,255,255,0.7);", so you have to detect useragent and write css by javascript.

function uacsssw() {
 if(navigator.userAgent.match(/MSIE 6/) || navigator.userAgent.match(/MSIE 7/)){
  document.write(
   '<style type="text/css">'+
   '<!--'+
   '#imageFrame { background-color: #FFF; }'+
   '-->'+
   '</style>'
  )
 }
 if(navigator.userAgent.match(/Firefox\/2/)){
  document.write(
   '<style type="text/css">'+
   '<!--'+
   '#imageFrame { background-color: #FFF; }'+
   '-->'+
   '</style>'
  )
 }
}

You have to insert this function after style definition.

Because FireFox2 can not overwrite transparent tag of outside box element on image object, I gave it up... Please let me know if you know any trick for FF2.

Lightobox2 can't work on area tag as default.

To solve this problem, it needs replace imageLink.rel with Element.readAttribute($(imageLink),"rel") in prototype.js.

Detail:
insert the line below in line 194.

if (!target.rel) target.rel=Element.readAttribute($(target), "rel");

Quote from discussion in Pat &Alex Blogging.

FireFox ignores style attribute in JavaScript without "document.getElementsById('STYLE')".