www.webdeveloper.com
Results 1 to 2 of 2

Thread: image fader instead of marquee?

  1. #1
    Join Date
    Sep 2010
    Posts
    3

    image fader instead of marquee?

    Hi , i have a module in my site where there is a scroll of images.
    being more specific i have created the following :
    Code:
    	<marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="alternate" direction="down" width="144px" scrollamount="3" height="300px"> 
    	
    <?php foreach( $res as $manufacturer) { ?>
      <div align="center">
    <a href="url") ?>">
    	<?php echo $manufacturer->mf_desc;?> </a>
    				</marque>
               
    </a>
    i would like to know if its possible to remove the marquee script and add images who are fading. Any suggestions welcome thanks in advance.

  2. #2
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    373
    I use the following in my website. It works in IE, but not in Firefox.
    head:
    Code:
    // (C) 2000 www.CodeLifter.com
    // http://www.codelifter.com
    // Free for all users, but leave in this  header
    // NS4-6,IE4-6
    // Fade effect only in IE; degrades gracefully
    
    // =======================================
    // set the following variables
    // =======================================
    
    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed = 5000
    
    // Duration of crossfade (seconds)
    var crossFadeDuration = 3
    
    // Specify the image files
    var Pic = new Array() // don't touch this
    // to add more images, just continue
    // the pattern, adding to the array below
    
    Pic[0] = "../cheshire.jpg"
    Pic[1] = "../cheshirea.jpg"
    Pic[2] = "../cheshireb.jpg"
    Pic[3] = "../cheshirec.jpg"
    Pic[4] = "../cheshired.jpg"
    
    // =======================================
    // do not edit anything below this line
    // =======================================
    
    var t
    var j = 0
    var p = Pic.length
    
    var preLoad = new Array()
    for (i = 0; i < p; i++){
       preLoad[i] = new Image()
       preLoad[i].src = Pic[i]
    }
    
    function runSlideShow(){
       if (document.all){
          document.images.SlideShow.style.filter="blendTrans(duration=2)"
          document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
          document.images.SlideShow.filters.blendTrans.Apply()
       }
       document.images.SlideShow.src = preLoad[j].src
       if (document.all){
          document.images.SlideShow.filters.blendTrans.Play()
       }
       j = j + 1
       if (j > (p-1)) j=0
       t = setTimeout('runSlideShow()', slideShowSpeed)
    }
    and in the body:
    Code:
    <body onload="runSlideShow()">
    ........
    <img src="../cheshire.jpg" name='SlideShow' width=478 height=346 alt='Cats playing around garden chessboard'>
    Last edited by wbport; 09-27-2010 at 09:37 AM. Reason: Insert body onload line

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles