Results 1 to 3 of 3

Thread: Image Slide show

  1. #1
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Slide show

    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>

  2. #2
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I submitted my post in the proper forum. Sorry.

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,772
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •