Installing TransparentJpeg
1. Download and Extract
Download the zip file and extract it.
Put TransparentJpeg.swf and effectscode.com.js, in the same folder as your web-page.
2. Add code
Add the following HTML code on your page:
<!-- ________ START EFFECTS CODE - http://www.effectscode.com/ ________ -->
<script src="effectscode.com.js" type="text/javascript"></script>
<div class="com.effectscode.TransparentJpeg" style="width:256px; height:256px;">
<textarea class="effectscode" style="visibility:hidden;" rows="1" cols="20">
// <!-- ____________________________ Start XML ___________________________
<TransparentJpeg src="images/lenna.jpg" masksrc="images/lenna-mask.jpg" />
// _____________________________ End XML ____________________________ -->
</textarea><div class="alternateContent">
<a href="http://www.effectscode.com/ImageEffects/TransparentJpeg">TransparentJpeg flash
effect script</a> requires <a href="http://www.adobe.com/go/getflash/">Flash 9</a>
</div></div>
<script type="text/javascript">document.effectsCodeWmode='transparent';ECreplace();</script>
<!-- _______________________ END EFFECTS CODE _________________________ -->
<script src="effectscode.com.js" type="text/javascript"></script>
<div class="com.effectscode.TransparentJpeg" style="width:256px; height:256px;">
<textarea class="effectscode" style="visibility:hidden;" rows="1" cols="20">
// <!-- ____________________________ Start XML ___________________________
<TransparentJpeg src="images/lenna.jpg" masksrc="images/lenna-mask.jpg" />
// _____________________________ End XML ____________________________ -->
</textarea><div class="alternateContent">
<a href="http://www.effectscode.com/ImageEffects/TransparentJpeg">TransparentJpeg flash
effect script</a> requires <a href="http://www.adobe.com/go/getflash/">Flash 9</a>
</div></div>
<script type="text/javascript">document.effectsCodeWmode='transparent';ECreplace();</script>
<!-- _______________________ END EFFECTS CODE _________________________ -->
3. Edit XML Section
There are some further examples to follow, and also some documentation. The width and the height are specified in enclosing div style tag. The rest of the div block contains alternative HTML that will display if the browser does not support the effect.
4. Hide alternative content (Optional)
Some browsers display a quick flash of the alternative content before Flash loads. To avoid this, add a this style rule to your HTML <HEAD> block:
<style type="text/css">
html.hasFlash .alternateContent { visibility: hidden; }
</style>
html.hasFlash .alternateContent { visibility: hidden; }
</style>