fade effect for images

**auriaks** · 05-08-2010, 08:12 PM

Hi,
I have problem with javascript for image effects...

Here is the LINK...

login with theese nick and pass:
nick: google
pass: googleads

the problem:

When you log into, on the top of the page are 4 images with fade effect...
But effect is wrong. When I came first I see those images in full collors. How to change my script to show them in grey when I first came?

Thanks in advance...

**jscheuer1** · 05-09-2010, 04:45 AM

Since you already have jQuery on the page, it would probably be easiest to use that. BTW, you have it twice:

HTML Code:

<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

You only need it once. The first instance is being overwritten by the second. The first is locally hosted and version 1.4.1 uncompressed, the second is the google api remote hosted version 1.3.2 compressed. You probably should be using version 1.4.2 compressed - either locally hosted or remote. To use the remote version, replace both of the above tags with:

HTML Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

Or follow the address in that tag and save your own copy for local hosting.

OK, with or without that change, add the highlighted script code as indicated below:

Code:

		<div class="images">
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/reklama.php');"> 
		<div class="fade" >
		<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama_real.png" />
		<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama.png" />
		</div>
		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/sveikinimas.php');">  
		<div class="fade" >

		<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas_real.png" />
		<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas.png" />
		</div>
		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/youtube.php');">  
		<div class="fade" >
		<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube_real.png" />
		<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube.png" />
		</div>

		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/komentaras.php');">  
		<div class="fade" >
		<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras_real.png" />
		<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras.png" />
		</div>
		</a>
		<script type="text/javascript">
		jQuery('.fade img').each(function(i){if(i % 2 === 0){$(this).css('opacity', 0);}});
		</script>
		</div>

**auriaks** · 05-11-2010, 12:38 PM

fade effect is not working...

**jscheuer1** · 05-11-2010, 02:53 PM

That's because you removed your script for that. I never said to do that, simply to add the jQuery one liner. Also, now I see three versions of jQuery on the page. It would be best to clean that up.

**auriaks** · 05-11-2010, 03:40 PM

this is all my script... will you help me?

because i don't know where I do something wrong.

PHP Code:


        <div class="sidebox">
        <div class="boxhead"></div>
        <div class="boxbody">
        <center>
        <small>Dar nesinaudojot naujomis funkcijomis? - Brūkštelkit mums...</small><br/>
        <div class="images">
        <a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/reklama.php');"> 
        <div class="fade" >
        <img border="0" title="Sukurkite reklamą" width="80" height="48" alt="Sukurkite reklamą" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama_real.png" />
        <img border="0" title="Sukurkite reklamą" width="80" height="48" alt="Sukurkite reklamą" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama.png" />
        </div>
        </a>
        <a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/sveikinimas.php');">  
        <div class="fade" >
        <img border="0" title="Sukurkite sveikinimą" width="80" height="48" alt="Sukurkite sveikinimą" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas_real.png" />
        <img border="0" title="Sukurkite sveikinimą" width="80" height="48" alt="Sukurkite sveikinimą" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas.png" />
        </div>
        </a>
        <a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/youtube.php');">  
        <div class="fade" >
        <img border="0" title="Parodyti YouTube vaizdelį" width="80" height="48" alt="Parodyti YouTube vaizdelį" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube_real.png" />
        <img border="0" title="Parodyti YouTube vaizdelį" width="80" height="48" alt="Parodyti YouTube vaizdelį" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube.png" />
        </div>
        </a>
        <a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/komentaras.php');">  
        <div class="fade" >
        <img border="0" title="Brūkštelkit kaiką =]" width="80" height="48" alt="Brūkštelkit kaiką =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras_real.png" />
        <img border="0" title="Brūkštelkit kaiką =]" width="80" height="48" alt="Brūkštelkit kaiką =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras.png" />
        </div>
        </a>
        </div>
        <br/><br/><small>Kaip įdėti? 
        <a target="_blank" href="images/wall_tutor/reklama_tutor.png" > Reklamą </a>|
        <a target="_blank" href="images/wall_tutor/sveikinimas_tutor.png" > Sveikinimą </a>|
        <a target="_blank" href="images/wall_tutor/youtube_tutor.png" > Youtube įrašą </a>|
        <a target="_blank" href="images/wall_tutor/komentaras_tutor.png" > Komentarą </a>
        </small><br/>
        <div id="example-placeholder"><a><small></small></a></div>
        <script type="text/javascript" src="../scripts/fade_effect.js"></script>
        </center>
        </div>
        <div class="boxfooter"></div>
        </div>            
            <div style="clear: both"><hr/></div>
        <div class="post">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
var page = 1;
function kitas()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
page = page+1;
xmlhttp.open("GET","content/tables/tb_index_msg.php?page="+page,false);
xmlhttp.send(null);
document.getElementById('outputas').innerHTML=xmlhttp.responseText;
}

function buves()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
page = page-1;
xmlhttp.open("GET","content/tables/tb_index_msg.php?page="+page,false);
xmlhttp.send(null);
document.getElementById('outputas').innerHTML=xmlhttp.responseText;
}

function pirmas()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","content/tables/tb_index_msg.php?page=1",false);
xmlhttp.send(null);
document.getElementById('outputas').innerHTML=xmlhttp.responseText;
}

function paskutinis()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","content/tables/tb_index_msg.php?page=<?php echo $psl?>",false);
xmlhttp.send(null);
document.getElementById('outputas').innerHTML=xmlhttp.responseText;
}

var all = "<?php echo $psl; ?>";
setTimeout('pirmas()', 600)

if (page==1) {
document.write("<br/><center><input type='button' value='Pirmas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='pirmas();' />")
document.write("<input type='button' value='Kitas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='kitas();' />")
document.write("<input type='button' value='Paskutinis' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='paskutinis();' /></center><br/>")
} else {
document.write("<br/><center><input type='button' value='Atgal' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='buves();' />")
document.write("<input type='button' value='Pirmas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='pirmas();' />")
document.write("<input type='button' value='Kitas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='kitas();' /></center><br/>")
}

</script>
        <div id="outputas"></div>
        <center><p class="links"><a href='../redirect_upload/search.php' class='more'>Paieška</a></p></center>
        </div>

**vwphillips** · 05-11-2010, 04:03 PM

the real image needs to be hidden until fading in then hidden when faded out

without JQUERY

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.fade {
  position:relative;width:80px;height:48px;float:left;
}

.fade IMG {
  position:absolute;left:0px;top:0px;
}

.fade .real {
  visibility:hidden;
}

/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 1 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.neg=srt<0||fin<0;
 this.data=[srt,srt,fin];
 this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
 this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcAnimate.prototype.cng=function(){
 var oop=this,ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
 this.apply();
 if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Complete) this.Complete(this);
 }
}

zxcAnimate.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.data[0]<0&&!this.neg) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(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>
		<div class="images">
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/reklama.php');">
		<div class="fade" >
		<img class="real" border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama_real.png" />
		<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama.png" />
		</div>
		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/sveikinimas.php');">
		<div class="fade" >
 		<img class="real" border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas_real.png" />
		<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas.png" />
		</div>
		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/youtube.php');">
		<div class="fade" >
		<img class="real" border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube_real.png" />
		<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube.png" />
		</div>

		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/komentaras.php');">
		<div class="fade" >
		<img class="real" border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras_real.png" />
		<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras.png" />
		</div>
		</a>
		</div>

<script type="text/javascript">
/*<![CDATA[*/


function Fade(o){
 var divs=zxcByClassName(o.ClassName);
 this.fades=[];
 for (var oop,imgs,z0=0;z0<divs.length;z0++){
  imgs=divs[z0].getElementsByTagName('IMG');
  if (imgs.length==2){
   this.addevt(imgs[1],'mouseover','Fade',this.fades.length);
   this.addevt(imgs[1],'mouseout','Fade',this.fades.length);
   oop=new zxcAnimate('opacity',imgs[0],0);
   oop.Complete=function(){
    if (this.data[0]==0){
     this.obj.style.visibility='hidden';
    }
   }
   this.fades.push(oop);
  }
 }
 this.ms=o.Duration||1000
}

Fade.prototype.Fade=function(e,nu){
 var oop=this.fades[nu];
 oop.obj.style.visibility='visible';
 oop.animate(oop.data[0],e.type=='mouseover'?100:0,1000,[0,100]);
}

Fade.prototype.addevt=function(o,t,f,p){
 var oop=this;
 if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
  else o['on'+t]=o[f];
 }
}


function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

new Fade({
ClassName:'fade',
Duration:1000
});
/*]]>*/
</script></body>

</html>

**auriaks** · 05-11-2010, 04:27 PM

but what I have to do to change in script given??

**auriaks** · 05-11-2010, 05:33 PM

I want to edit excisting script by myself and delete all mistakes, but I think I will ruin all the script...

**jscheuer1** · 05-12-2010, 12:25 AM

All I know is that at the time I first responded to your question you had a script that fadded the images in onmouseover, and faded them out onmouseout, revealing the grayed out images beneath. Everything was working fine, except that initially the images were faded in. I only added a jQuery oneliner that would make them faded out to begin with. I tested this locally, it worked cross browser. Unfortunately I later overwrote the test file and deleted it, so I cannot retrieve it. But I can assure you it worked.

All you need to do is to restore your page to how it was when you asked the question, add my jQuery oneliner where I recommended, and it will be fine.

But you could do the whole thing with jQuery:

Code:

		<div class="images">
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/reklama.php');"> 
		<div class="fade" >
		<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama_real.png" />
		<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama.png" />
		</div>
		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/sveikinimas.php');">  
		<div class="fade" >
		<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas_real.png" />
		<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas.png" />
		</div>
		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/youtube.php');">  
		<div class="fade" >
		<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube_real.png" />
		<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube.png" />
		</div>
		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/komentaras.php');">  
		<div class="fade" >
		<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras_real.png" />
		<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras.png" />
		</div>
		</a>
		<script type="text/javascript">
		(function($){
			$('.fade img').each(function(i){if(i % 2 === 0){$(this).css('display', 'none');}});
			$('.fade').hover(function(){$(this).find('img').eq(0).fadeIn();}, function(){$(this).find('img').eq(0).fadeOut();});
		})(jQuery);
		</script>
		</div>

But you still should clean up the situation of now having 3 external tags to jQuery. I recommend moving up the third to replace the first two.

**auriaks** · 05-12-2010, 11:59 AM

Originally Posted by jscheuer1

All I know is that at the time I first responded to your question you had a script that fadded the images in onmouseover, and faded them out onmouseout, revealing the grayed out images beneath. Everything was working fine, except that initially the images were faded in. I only added a jQuery oneliner that would make them faded out to begin with. I tested this locally, it worked cross browser. Unfortunately I later overwrote the test file and deleted it, so I cannot retrieve it. But I can assure you it worked.

All you need to do is to restore your page to how it was when you asked the question, add my jQuery oneliner where I recommended, and it will be fine.

But you could do the whole thing with jQuery:

Code:

		<div class="images">
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/reklama.php');"> 
		<div class="fade" >
		<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama_real.png" />
		<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama.png" />
		</div>
		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/sveikinimas.php');">  
		<div class="fade" >
		<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas_real.png" />
		<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas.png" />
		</div>
		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/youtube.php');">  
		<div class="fade" >
		<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube_real.png" />
		<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube.png" />
		</div>
		</a>
		<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/komentaras.php');">  
		<div class="fade" >
		<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras_real.png" />
		<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras.png" />
		</div>
		</a>
		<script type="text/javascript">
		(function($){
			$('.fade img').each(function(i){if(i % 2 === 0){$(this).css('display', 'none');}});
			$('.fade').hover(function(){$(this).find('img').eq(0).fadeIn();}, function(){$(this).find('img').eq(0).fadeOut();});
		})(jQuery);
		</script>
		</div>

But you still should clean up the situation of now having 3 external tags to jQuery. I recommend moving up the third to replace the first two.

thanks I done it and it works well...

What you mean "3 external tags to jQuery"? I am newbie on jQuerry as you can see

Thanks for your time.