Monday, May 30, 2011

Change the Opacity of the image "onClick" - Javascript

Hi Folks,
               I come up with another technical blog which will be quite interesting. I did this in my training period. You might have heard of the Opacity which means transperancy. Now, I have added an image to my HTML code and on clicking the image its opacity will be reduced. Usually the rating will be between 1 to 100 for IE and 0.1 to 1 for Firefox. We have to write differently for different browsers. Lets see a example for it. Here is my HTML code with an image tag which has a image.
 Here goes the coding….
<title>Change the Opacity of the image</title>
<script type=”text/javascript”>
function lightup(imageobject, opacity){
 if (this.img){
  Opacity(this.img, 100);
 Opacity(imageobject, opacity);
function Opacity(obj,opc){
 if (opc<0||opc>100) return;’alpha(opacity=’+opc+’)';;
<img src=”C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water lilies.jpg” height=”200″ width=”200″ onclick=”lightup(this, 50)” />
<img src=”C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Winter.jpg” height=”200″ width=”200″ onclick=”lightup(this, 50)” />
KhtmlOpacity and MozOpacity for browsers Safari and Netscape. For your convenience I have added default windows my pictures pics, if you want you can change the images you want to try. Try it out and happy reading.

No comments:

Post a Comment

Share it if you like it