Banner, a link for each image?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • kennykenn
    New Member
    • Oct 2007
    • 8

    #1

    Banner, a link for each image?

    im producing a banner and want the banner to rotate and fade in and out to the next image. i want to link each image to a SEPERATE site! I can get it to work with out the fading effect and can get them all to link to one site with fading! both images and links are in seperate arrays! please help someone!
    code below:

    [HTML]<html>
    <body onLoad="runSlid eShow()" >
    <SCRIPT LANGUAGE="JavaS cript">


    var slideShowSpeed = 10000;



    var Pic = new Array(5);


    Pic[0] = "1.jpg";
    Pic[1] = "2.jpg";
    Pic[2] = "3.jpg";
    Pic[3] = "4.jpg";
    Pic[4] = "5.jpg";

    var url = new Array(5);

    url[0] = "http://www.google.com" ;
    url[1] = "http://www.yahoo.com";
    url[2] = "http://www.lovecargo.c om";
    url[3] = "http://www.257oops.com ";
    url[4] = "http://www.257group.co m";



    var t;
    var j = 0;
    var p = Pic.length;
    var preLoad = new Array();
    var crossFadeDurati on = 8;
    var counter = 0;
    var timer = null;
    for (i = 0; i < p; i++) {
    preLoad[i] = new Image();
    preLoad[i].src = Pic[i];
    }
    function runSlideShow() {
    if (document.all) {
    document.images .SlideShow.styl e.filter="blend Trans(duration= 2)";
    document.images .SlideShow.styl e.filter="blend Trans(duration= crossFadeDurati on)";
    document.images .SlideShow.filt ers.blendTrans. Apply();
    }
    document.images .SlideShow.src = preLoad[j].src;
    if (document.all) {
    document.images .SlideShow.filt ers.blendTrans. Play();
    }
    j = j + 1;
    if (j > (p - 1)) j = 0;
    t = setTimeout('run SlideShow()', slideShowSpeed) ;
    }


    function banner() {
    timer=setTimeou t("banner()", 4000);
    counter++;
    if (counter >= 3)
    counter = 0;
    document.banner ad.src = Pic[counter];
    }

    function gothere() {
    counter2 = counter;
    window.location .href = url[counter2];
    }

    }

    </script>

    <center>
    <table border="0" cellpadding="0" cellspacing="0" >
    <tr>
    <td id="VU" height=150 width=150 >
    <a href="javascrip t:gothere()"><i mg src="1.jpg" name='SlideShow '></a>

    </td>
    </tr>
    </table>
    </center>

    </body>
    </html>
    [/HTML]
    cheers
    Last edited by acoder; Nov 27 '07, 04:35 PM. Reason: Added code tags
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    In the gothere() function, replace "counter" with "j" (the index pointer to the images).

    Comment

    • kennykenn
      New Member
      • Oct 2007
      • 8

      #3
      Originally posted by acoder
      In the gothere() function, replace "counter" with "j" (the index pointer to the images).
      Brilliant thankyou!!!!

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        You're welcome. Glad you got it working.

        Comment

        Working...