/    Sign up×
Community /Pin to ProfileBookmark

Fade In/Out Buttons stop working!

Copy linkTweet thisAlerts:
Feb 27.2009

Hi,
Ive created buttons for my website and have used some javascript i have found to make them fade in and out with hover. It works but after a few passes with the mouse they stop fading in… sometimes coming back, but very sporadic. Whats going on? Take a look at the button section.
Here is the code:

HTML:

[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta name=”description” content=”Toronto Real Estate Agent – Conrad Rygier” />
<meta name=”keywords” content=”real estate, toronto, buying, selling, lease, rental, condo, bloor west, high park, lakefront, downtown, for sale, for lease, for rent” />
<meta name=”author” content=”Conrad Rygier” />
<link rel=”stylesheet” type=”text/css” href=”real_estate_toronto.css” media=”screen,projection” />
<title>Living In My Toronto – Real Estate Agent – Conrad Rygier</title>
<script type=”text/javascript” src=”js/jquery-1.3.min.js”></script>
<script type=”text/javascript” src=”js/custom.js”></script>
</head>

<body>
<div id=”layout”>

<div id=”buttons”>

<!– Home Button –>
<div id=”bt_home”><a href=”main_real_estate_toronto.html”></a></div>

<!– Buying Button –>
<div class=”fade” id=”buy”>
<a href=”buying_real_estate_toronto.html”><img src=”images/buttons/btn_buying1.jpg” /></a>
<div>
<a href=”buying_real_estate_toronto.html”><img src=”images/buttons/btn_buying2.jpg” /></a>
</div>
</div>

<!– Selling Button –>
<div class=”fade” id=”sell”>
<a href=”selling_real_estate_toronto.html”><img src=”images/buttons/btn_selling1.jpg” /></a>
<div>
<a href=”selling_real_estate_toronto.html”><img src=”images/buttons/btn_selling2.jpg” /></a>
</div>
</div>

<!– Leasing Button –>
<div class=”fade” id=”lease”>
<a href=”leasing_real_estate_toronto.html”><img src=”images/buttons/btn_leasing1.jpg” /></a>
<div>
<a href=”leasing_real_estate_toronto.html”><img src=”images/buttons/btn_leasing2.jpg” /></a>
</div>
</div>

<!– Listings Button –>
<div class=”fade” id=”listings”>
<a href=”listings_real_estate_toronto.html”><img src=”images/buttons/btn_listings1.jpg” /></a>
<div>
<a href=”listings_real_estate_toronto.html”><img src=”images/buttons/btn_listings2.jpg” /></a>
</div>
</div>

<!– Contact Button –>
<div class=”fade” id=”contact”>
<a href=”contact_real_estate_toronto.html”><img src=”images/buttons/btn_contact1.jpg” /></a>
<div>
<a href=”contact_real_estate_toronto.html”><img src=”images/buttons/btn_contact2.jpg” /></a>
</div>
</div>

<div id=”mainpage_image”><img src=”images/main_page_photo.jpg” alt=”main page photo” /></div>

<div id=”content_right”>
<h1>Toronto <br />Real Estate</h1>
<h2>Living In My Toronto</h2>
<p>This website was designed to be a <br /><b>hub of information</b> for anyone contemplating real estate in our beautiful city of Toronto. Whether you are looking to <b>buy</b> or <b>sell</b> a <b>condo</b> , <b>loft</b>, <b>house</b> or <b>townhouse</b>, I hope this website and my services can be of use to you.</p>
</div>

<div id=”living_logo”>
<a href=”main_real_estate_toronto.html”><img src=”images/living_logo.jpg” alt=”Living In My Toronto” /></a>
</div>

<div id=”sutton_logo”>
<a target=”_blank” href=”http://www.sutton.com/”><img src=”images/sutton_logo.jpg” alt=”sutton logo” /></a>
</div>

<div id=”signature”><b>Cell:</b>555 555 5555 &nbsp;&nbsp;&nbsp;<a href=”mailto: [email][email protected][/email]?subject=Real Estate Web Inquiry” title=”[email protected]”><b>Email Me</b></a></div>

</div>
</body>
</html>
[/CODE]

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@vio1authorFeb 27.2009 — CSS:

[CODE]@charset "utf-8";
/* CSS Document */

body {
background-color:#262624;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
color: #FFFFFF;
}

#layout {
position:absolute;
background:url(images/main_page_jpg.jpg) no-repeat center;
width:990px;
height:580px;
text-align:left;
top:0px;
left:50%;
margin-left:-495px;
}

#buttons {
position:absolute;
width:118px;
height:500px;
top:92px;
left:4px;
}

#content_left {
position:absolute;
width:591px;
height:346px;
top:140px;
left:148px;

}

#content_right {
position:absolute;
width:163px;
height:332px;
top:154px;
right:48px;
text-align:center;

}

#living_logo {
position:absolute;
width:355px;
height:60px;
top:505px;
right:16px;
}

#sutton_logo {
position:absolute;
width:270px;
height:88px;
top:1px;
right:0px;
padding:0px;
margin:0px;

}

h1 {
color:#596E99;
}


#signature {
position:absolute;
width:450px;
height:30px;
top:534px;
left:149px;
font-size:90%;
margin:5px 0px 0px 3px;
}

#sig_photo {
position:absolute;
width:292px;
height:41px;
padding:0px;
top:493px;
left:149px;

}
img {
border-style:none;
}

sig_left {
float:left;
}

a {
text-decoration:none;
color:#FFFFFF;
}

a:hover {
text-decoration:underline;
}

#footer, #footer a {
position:absolute;
font-size:50%;
color:#1b1b1b;
left:0px;
top:570px;
width:990px;
text-align:center;
height:5px;
margin:0px;
padding:0px;
}

/* BUTTONS */


#buy.fade {
position: absolute;
top: 56px;
left: 0px;
}

#sell.fade {
position: absolute;
top: 139px;
left: 0px;
}

#lease.fade {
position: absolute;
top: 222px;
left: 0px;
}

#listings.fade {
position: absolute;
top: 305px;
left: 0px;
}

#contact.fade {
position: absolute;
top: 388px;
left: 0px;
}

.fade div {
position: absolute;
top: 0px;
left: 0px;
display: none;
}

#buttons a {
display:block;
width:118px;
height:83px;
margin:0px;
}

#bt_home a, #bt_home a:hover, #bt_home a:active {
background:url(images/buttons/bt_home.jpg) 0 0 no-repeat;
height:56px;
}


/* MAIN PAGE ONLY */

#mainpage_image {
position:absolute;
width:591px;
height:346px;
top:140px;
left:148px;
text-align:center;
margin: 5px 0px 0px 0px;
}

#content_right h1 {
font-size:20px;
margin-top:0px;
}

#content_right h2 {
font-size:14px;
margin-bottom:3px;
}

#content_right p {
font-size:90%;
margin: 0px 10px 0px 10px;
line-height:16px;
color: #CCCCCC;
}[/CODE]


javascript:

[CODE]// when the DOM is ready:
$(document).ready(function () {
// find the div.fade elements and hook the hover event
$('div.fade').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);

// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(500, 1);
} else {
// fade in quickly
fade.fadeIn(500);
}
}, function () {
// on hovering out, fade the element out
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(500, 0);
} else {
// fade away slowly
fade.fadeOut(500);
}
});
});[/CODE]
Copy linkTweet thisAlerts:
@vwphillipsFeb 27.2009 — [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>

<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (21-February-2009)
// 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 secified minimum/maximum values<br />
// 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.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
// where:
// parameter 0 = the mode(see Note 2). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
// parameter 5 = (optional) to scale the effect time on a secified minimum/maximum. (array, see Note 5)
// field 0 the minimum. (digits)
// field 1 the maximum. (digits)
// parameter 6 = (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: The default units(excepting opacity) are 'px'.
// Note 2: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: To 'toggle' the effect include '#' in parameter 0.
// The first call will set the toggle parameters.
// Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
// Note 4: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
// Note 5: parameter 5 is of particular use when re-calling the effect
// in mid travel to retain an constant rate of progression.
//
// **** Advanced Applications
//
// It may be required to access the current value of the effect.
// The element effect is accessible from the element property
// element effect = elementobject[mode.replace(/W/g,'')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code(about 2.06K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
if (!obj||(!srt&&!fin)) return;
var oop=obj[mde.replace(/W/g,'')+'oop'];
if (oop){
clearTimeout(oop.to);
if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
else oop.update([srt,fin],ms,scale,curve);
}
else obj[mde.replace(/W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
this.srtfin=[srt,fin];
this.to=null;
this.obj=obj;
this.mde=mde.replace(/W/g,'');
this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
this.time=ms||this.time||2000;
this.data=[srtfin[0],srtfin[0],srtfin[1]];
this.ms=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
this.inc=Math.PI/(2*this.ms);
this.srttime=new Date().getTime();
this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
var ms=new Date().getTime()-this.srttime;
this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.ms*ms+this.data[1];
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
if (ms<this.ms) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
else {
this.data[0]=this.data[2];
if (this.mde!='opacity') this.obj.style[this.mde]=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>
<script type="text/javascript">
/*<![CDATA[*/

function Fade(cls,spd,min,max){
var objs=zxcByClassName(cls);
for (var z0=0;z0<objs.length;z0++){
var oop=new FadeOOP(objs[z0],spd,min,max);
}
}

function FadeOOP(obj,spd,min,max){
this.obj=obj;
this.spd=spd||500;
this.addevt(obj,'mouseover','fade');
this.addevt(obj,'mouseout','fade');
this.mm=[min||0,max||100];
zxcBAnimator('opacity',obj,this.mm[1]-5,this.mm[1],10);
}

FadeOOP.prototype.fade=function(e){
zxcBAnimator('opacity',this.obj,this.obj.opacityoop.data[0],this.mm[e.type=='mouseover'?0:1],this.spd,this.mm);
}

FadeOOP.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](ep); };
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;
}



/*]]>*/
</script>
</head>

<body onload="Fade('fade',1000,50,100);">
<img class="fade" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" />
<br />
<img class="fade" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" />
<br />
<img class="fade" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" />
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@vio1authorFeb 27.2009 — Thanks, but I dont understand all that. How do i setup my page using that code?
Copy linkTweet thisAlerts:
@vwphillipsFeb 28.2009 — from PM

Hi Thanks for the code. How do i change it so that the hover fades in, instead of fades out? How do i set it up so that instead of just fading, it will fade and replace the image with another?

Forward Message[/QUOTE]

[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>

<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (21-February-2009)
// 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 secified minimum/maximum values<br />
// 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.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
// where:
// parameter 0 = the mode(see Note 2). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
// parameter 5 = (optional) to scale the effect time on a secified minimum/maximum. (array, see Note 5)
// field 0 the minimum. (digits)
// field 1 the maximum. (digits)
// parameter 6 = (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: The default units(excepting opacity) are 'px'.
// Note 2: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: To 'toggle' the effect include '#' in parameter 0.
// The first call will set the toggle parameters.
// Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
// Note 4: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
// Note 5: parameter 5 is of particular use when re-calling the effect
// in mid travel to retain an constant rate of progression.
//
// **** Advanced Applications
//
// It may be required to access the current value of the effect.
// The element effect is accessible from the element property
// element effect = elementobject[mode.replace(/W/g,'')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code(about 2.06K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
if (!obj||(!srt&&!fin)) return;
var oop=obj[mde.replace(/W/g,'')+'oop'];
if (oop){
clearTimeout(oop.to);
if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
else oop.update([srt,fin],ms,scale,curve);
}
else obj[mde.replace(/W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
this.srtfin=[srt,fin];
this.to=null;
this.obj=obj;
this.mde=mde.replace(/W/g,'');
this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
this.time=ms||this.time||2000;
this.data=[srtfin[0],srtfin[0],srtfin[1]];
this.ms=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
this.inc=Math.PI/(2*this.ms);
this.srttime=new Date().getTime();
this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
var ms=new Date().getTime()-this.srttime;
this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.ms*ms+this.data[1];
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
if (ms<this.ms) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
else {
this.data[0]=this.data[2];
if (this.mde!='opacity') this.obj.style[this.mde]=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>
<script type="text/javascript">
/*<![CDATA[*/

function Fade(cls,spd,min,max){
var objs=zxcByClassName(cls);
for (var z0=0;z0<objs.length;z0++){
var oop=new FadeOOP(objs[z0],spd,min,max);
}
}

function FadeOOP(obj,spd,min,max){
this.obj=obj;
this.spd=spd||500;
this.addevt(obj,'mouseover','fade');
this.addevt(obj,'mouseout','fade');
this.mm=[min||0,max||100];
zxcBAnimator('opacity',obj,this.mm[1]-5,this.mm[1],10);
}

FadeOOP.prototype.fade=function(e){
zxcBAnimator('opacity',this.obj,this.obj.opacityoop.data[0],this.mm[e.type=='mouseover'?0:1],this.spd,this.mm);
}

FadeOOP.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](ep); };
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;
}



/*]]>*/
</script>
</head>

<body onload="Fade('fade',1000,50,100);Fade('fade2',1000,100,50);Fade('fade3',1000,100,1);">
<img class="fade" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" />
<br />
<img class="fade" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" />
<br />
<img class="fade2" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" />
<div style="position:relative;width:50px;height:50px" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" />
<img class="fade3" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" style="position:absolute;left:0px;top:0px"/>

</div>
</body>

</html>[/CODE]
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...