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….
<html>
<head>
<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);
 this.img=imageobject;
}
function Opacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter=’alpha(opacity=’+opc+’)';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
</head>
<body>
<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)” />
</body>
</html>
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