Image Slide show

**Clown1981** · 12-15-2010, 06:12 PM

Hi, I'm a beginner with javascrit.

I found this script on your website. That's what I was looking for, but I would like to add a feature. I want the slideshow to pause when onMouseover. I would like to know how. Thank you.

Code:

<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['1.jpg', ' ', ' ']
variableslide[1]=['2.jpg', ' ', ' ']
variableslide[2]=['3.jpg', ' ', ' ']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='556px' //set to width of LARGEST image in your slideshow
var slideheight='277x' //set to height of LARGEST iamge in your slideshow, plus any text description

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=8000
var slidebgcolor=''

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>




<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

**Clown1981** · 12-15-2010, 08:20 PM

I submitted my post in the proper forum. Sorry.

**vwphillips** · 12-16-2010, 10:32 AM

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>
</head>

<body>
<script type="text/javascript">

/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array();

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['http://www.vicsjavascripts.org.uk/StdImages/One.gif', ' ', ' '];
variableslide[1]=['http://www.vicsjavascripts.org.uk/StdImages/Two.gif', ' ', ' '];
variableslide[2]=['http://www.vicsjavascripts.org.uk/StdImages/Three.gif', ' ', ' '];

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='556px'; //set to width of LARGEST image in your slideshow
var slideheight='277x'; //set to height of LARGEST iamge in your slideshow, plus any text description

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=1000;
var slidebgcolor='red';
var to;

////Do not edit pass this line////////////////

 var srcary=[];
for (i=0;i<variableslide.length;i++){
 srcary[i]=new Image();
 srcary[i].src=variableslide[i][0];
}

var currentslide=0

function rotateimages(){
 contentcontainer='<center>';
 if (variableslide[currentslide][1]!=""){
  contentcontainer+='<a href="'+variableslide[currentslide][1]+'">';
 }
 contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">';
 if (variableslide[currentslide][1]!=""){
  contentcontainer+='</a>';
 }
 contentcontainer+='</center>';
 if (variableslide[currentslide][2]!=""){
  contentcontainer+=variableslide[currentslide][2];
 }
 crossrotateobj.innerHTML=contentcontainer;
 if (currentslide==variableslide.length-1){
  currentslide=0;
 }
 else {
  currentslide++;
 }
 to=setTimeout("rotateimages()",slidedelay);
}

document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
 crossrotateobj=document.getElementById("slidedom");
 crossrotateobj.onmouseover=function(){
  clearTimeout(to);
 }
 crossrotateobj.onmouseout=function(){
  to=setTimeout("rotateimages()",500);
 }
 rotateimages();
}

start_slider()

</script>




</body>

</html>

Thread: Image Slide show

Thread Tools

Search Thread

Image Slide show

Bookmarks

Bookmarks

Posting Permissions