Image opacity problem

@paulski100May 29.2006

I’m new to Javascript and can’t figure out why the following basic stuff isn’t working:-

function fade(imgId)
{
var img;
img = document.images[imgId];
// alert(img.name);
img.opacity=0;
}

The function runs without error, the alert returns the correct image name when un-commented but the attempt to change the opacity to 0 has no effect on the image in the browser. Ultimately what I’m trying to do is to write a function that takes an image and fades it’s opacity over time, I want to be able to call it from the mouseover event of another image.

Any help would be much appreciated!

to post a comment

JavaScript

9 Comments(s) _↴

@cootheadMay 29.2006 — #Hi there paulski100,

and a warm welcome to these forums. ?

try it like this...

[color=navy]&lt;script type="text/javascript"&gt;
 function fade(imgId) {
 img=document.images[imgId];
 if(document.all) {
 img.[color=red]style[/color].filter='alpha(opacity=50)'; [color=purple]//this is for IE[/color]
 }
 else {
 img.[color=red]style[/color].opacity=0.5;  [color=purple]//this is for Firefox/Mozilla[/color]
 }
 }
 &lt;/script&gt;[/color]

[i]coothead[/i]

@paulski100authorMay 29.2006 — #Thanks coothead, that changes the opacity. But... if I try to run a loop and increase the opacity up to 100 nothing happens until the last call to change the opacity and then it goes straight to 100. So the effeect I get is a delay followed by the image appearing at 100% opacity rather than the gradual fade up I'm looking for.

Is there something I need to do (akin to doEvents??) that refreshes the screen after each opacity change?

@vwphillipsMay 29.2006 — #[URL]http://www.vicsjavascripts.org.uk/OpacityGradient/OpacityGradient.htm[/URL]

pass the object to the function with an incrementing zxcopc value between 1 and 99

using a loop cycled using setTimeout

[CODE]
 var obj;
 var cnt=0;
 
 function Cycle(){
 obj=document.getElementById('MyObjID');
 cnt++;
 if (cnt<100){ setTimeout('zxcOpacity(obj,cnt)',100); }
 }
 
 
 function zxcOpacity(zxcobj,zxcopc) {
 if (zxcopc<0||zxcopc>100){ return; }
 if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
 else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
 else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
 else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
 }
 
 [/CODE]

@paulski100authorMay 29.2006 — #Thanks Vic,

I've modded your code slightly as below (I'm probably being thick but I can't see the loop in your Cycle function?

What happens when this code is triggered is that the opacity is set to 100 instantly. I figure it should be a 10 second process? If I uncomment the I've put in I get "cnt =1", "cnt =2" .... "cnt = 10" THEN I get "zxcopc =10" 10 times. It's as though the setTimeout doesn't get called until the loop's complete? I'm very confused!

function cycle(imgId)

{

obj=document.getElementById(imgId);

for (cnt = 1; cnt < 10; cnt++)

{

//alert("cnt =" +cnt);

setTimeout('zxcOpacity(obj,cnt)',100);

}

}

function zxcOpacity(zxcobj,zxcopc) {

//alert("zxcopc =" + zxcopc);

if (zxcopc<0||zxcopc>100){ return; }

if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }

else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }

else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; } // this one for IE6

else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }

return;

}

@paulski100authorMay 29.2006 — #After a more research I understand half of the problem. The setTimeout function only schedules the called function, it does not introduce a delay into the loop that is call setTimeout so all I get is a series of scheduled calls that happen almost instantaneously!

Now that's OK but I've changed the code (see below) to have a nested loop to genuinely delay the loop (I know it's naff and cpu intensive but it's only a test!) so that the calls to zxcOpacity are equally spaced. All that happens though is that the image starts as opacity=0 and, after a delay of approx 1 second, goes straight to opacity=100. It's as if the opacity of the image in the browser only gets updated when the cycle function's finished.

Any ideas as hear tearing out time is fast approaching!!

function cycle(imgId)

{

obj=document.getElementById(imgId);

for (cnt = 1; cnt < 100; cnt++)

{

for (i=0; i<50000; i++)

{};

zxcOpacity(obj,cnt);

}

}

function zxcOpacity(zxcobj,zxcopc) {

//alert("zxcopc =" + zxcopc);

if (zxcopc<0||zxcopc>100){ return; }

if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }

else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }

else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; } // this one for IE6

else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }

return;

}

@JPnycMay 29.2006 — #Both mozilla and Safari now support just opacity. No need for Moz or KHTML any longer.

@griff777May 29.2006 — #I'm new to Javascript and can't figure out why the following basic stuff isn't working:-

function fade(imgId)

{

var img;

img = document.images[imgId];

// alert(img.name);

img.opacity=0;

}

The function runs without error, the alert returns the correct image name when un-commented but the attempt to change the opacity to 0 has no effect on the image in the browser. Ultimately what I'm trying to do is to write a function that takes an image and fades it's opacity over time, I want to be able to call it from the mouseover event of another image.

Any help would be much appreciated![/QUOTE]

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 <html>
 <head>
 <title>Untitled</title>
 
  <script type="text/javascript">
 
  var minOpacity = 3;
  var maxOpacity = 100;
  var maxMSecond = 200; 
  var on         = 1;
  var off        = 0; 
 
  function changeOpacity(opacity, id) { 
   //change the opacity for different browsers 
   var object			= document.getElementById(id).style; 
   object.opacity		= (opacity / 100); 
   object.MozOpacity	 = (opacity / 100); 
   object.KhtmlOpacity   = (opacity / 100); 
   object.filter		 = "alpha(opacity=" + opacity + ")"; 
  } 
 
  function opacity(id, opacStart, opacEnd, millisec) { 
   var speed = Math.round(millisec / 100); //speed for each frame 
   var timer = 1; 
   function setTimer(){
   setTimeout("changeOpacity(" + i + ",'" + id + "')",(timer * speed));
   timer++; 
   }
   //determine the direction for the blending, if start and end are the same nothing happens 
   if(opacStart > opacEnd) 
   { for(i = opacStart; i >= opacEnd; i--) { setTimer(); } } else 
   if(opacStart < opacEnd) 
   { for(i = opacStart; i <= opacEnd; i++) { setTimer(); } } 
  } 
 
  function toggleOpacity(id, millisec,mode) { 
   //if an element is invisible, make it visible, else make it invisible 
   if(mode == on) 
   { opacity(id, minOpacity, maxOpacity, millisec); } else 
   { opacity(id, maxOpacity, minOpacity, millisec); } 
  } 
  </script> 
 
 </head>
 
 <body onLoad="changeOpacity(minOpacity, 'digicam2');">
 
 
 <h2>Fade in/out with only one link</h2>
 
 <p>There is more that can be done! What about a single link to hide and show an element?</p>
 
 <p style="text-align: left; 
 border: 0px solid black; 
 width: 15%;
 background-color: transparent;" 
 >
 <img src="img/dim2300.jpg" 
 title="Minolta" 
 name="digicam2" 
 id="digicam2" 
 border="0" 
 style="width: 210px; height: 148px; border: 0 none;" 
 onMouseOver="toggleOpacity('digicam2',maxMSecond,on);" 
 onMouseOut="toggleOpacity('digicam2',maxMSecond,off);"
 >
 <br/>
 </p>
 
 </body>
 </html>[/code]

[upl-file uuid=1530a199-cb84-4f40-9fa6-8d33b9050a1a size=10kB]dim2300.jpg[/upl-file]

@vwphillipsMay 29.2006 — #typo corrected

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 </head>
 
 <body onload="Cycle();" >
 <img id="fred" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" >
 <script language="JavaScript" type="text/javascript">
 <!--
 var obj;
 var cnt=0;
 
 function Cycle(){
 obj=document.getElementById('fred');
 cnt++;
 zxcOpacity(obj,cnt);
 if (cnt<100){ setTimeout('Cycle()',100); }
 }
 
 
 function zxcOpacity(zxcobj,zxcopc) {
 if (zxcopc<0||zxcopc>100){ return; }
 if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
 else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
 else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
 else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
 }
 
 //-->
 </script></body>
 
 </html>[/CODE]

@felgallMay 29.2006 — #Both mozilla and Safari now support just opacity. No need for Moz or KHTML any longer.[/QUOTE]

Does that mean that everyone who was using older versions of these browsers that didn't support opacity have now upgraded to the latest version? If they haven't then including the special versions will still make a difference for those who haven't upgraded yet.

Also in #JavaScript _↴

Making Mouseover Area Bigger Email a form One line in netscape 7

Success!

Help @paulski100 spread the word by sharing this article on Twitter...

Tweet This

Image opacity problem

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Image opacity problem

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴