How to create a transparent image

First look at the two images below:
Normal image:

A transparent image:

The code source for Normal image :
<img src="http://dc268.4shared.com/img/K82dxZYV/1_online.jpg" border="0" width="250" height="250"/>

The code source for a transparent image :<img src="http://dc268.4shared.com/img/K82dxZYV/1_online.jpg" border="0"width="250" height="250"style="opacity:0.4;filter:alpha(opacity=40)" />

So you see , you only add Image opacity to your image link like the red one.

Note : The first thing you need is to upload your images to the free file hosting web , and get the code to paste in your blog.The link code of my image that I 've upload to my free file hosting web at 4shared.com is :<img src="http://dc268.4shared.com/img/K82dxZYV/1_online.jpg" border="0" width="250" height="250"/>.

Now try to use a transparent image with  Mouseover Effect .When the visitors use mousecursor to point your image , it makes a transparency of your image.You only add this code below to your transparent image code: onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"

From the transparent image code above , you get the code like this:
<img src="http://dc268.4shared.com/img/K82dxZYV/1_online.jpg" border="0"width="250" height="250"style="opacity:0.4;filter:alpha(opacity=40)" 
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" />
Look at the transparent image with Mouseover Effect: