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>
<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.
Comments
Post a Comment