how can you make a fading effect in an image slideshow using JavaScript in html

reem313331

New Member

Join Date: Jan 2013
Posts: 1

how can you make a fading effect in an image slideshow using JavaScript in html

Jan 17 '13, 07:59 AM

i saw this code in this website and it worked but i want to make a fading effect !! plzz help :)

Code:

<html>


<head>

<script language="JavaScript1.1">
<!--

//specify interval between slide (in mili seconds)
var slidespeed=3000

//specify images
var slideimages=new Array("1.jpg","2.jpg","3.jpg","4.jpg","149301_415477658471298_1408425588_n.jpg")

//specify corresponding links
var slidelinks=new Array("http://www.whatever.com","http://whatnever.com","http://www.always.com")

var newwindow=1 //open links in new window? 1=yes, 0=no

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

//-->
</script>

</head>



<body bgcolor="c0c0c0" ‎>

<a href="javascript:gotoshow()"><img src="1.gif" name="slide"
border=0 style="filter:blendTrans(duration=3)" width=300
height=300></a>

<script language="JavaScript1.1">
<!--

var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 :
0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()

//-->
</script>


</body>

Last edited by Meetee; Jan 17 '13, 09:22 AM. Reason: Use code tags <code/> around code

Tags: None

Anas Mosaad

New Member

Join Date: Jan 2013

Posts: 185
#2

Jan 17 '13, 12:16 PM

You may have a function that apply opacity for the required element. For standard compliant browsers, use the css attribute opacity: x; Where x between 0 and 1.

If you are seeking cross browser compatibility you may use the below attributes for different browsers:
IE 6,7: filter: alpha(opacity=x );
IE 8: -ms-filter: "progid:DXImage Transform.Micro soft.Alpha(Opac ity=50)";
Safari 1: -khtml-opacity: x;
Netscape: -moz-opacity: x;
Standard compliant: opacity: x;

Where x between 0 and 100 for all IE version and between 0&1 for all other browsers.
Comment

how can you make a fading effect in an image slideshow using JavaScript in html

how can you make a fading effect in an image slideshow using JavaScript in html

Comment