Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cant Get This Javascript To Work!

    My buddy and i have a forum site set up for my youth group. we're trying to use this javascript that enables an image to change every time you refresh the page.
    this is the javascript:
    http://javascript.internet.com/misce...ick-image.html

    we have tried everywhere we could think of to use this script... we put it into the board wrapper html header, and the javascript portion, and tried putting it before the image codes.
    Anyways im a n00b and i need someone to try to explain the steps in simple english please

    i appreciate it.

    this is my site if it helps http://fbcrittman.co.nr
    Last edited by m0ranwad; 02-16-2007 at 12:16 AM. Reason: left out url

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImgAry=['One.gif','Two.gif','Three.gif'];
    
    
    
    
    var rand1 = 0;
    var useRand = 0;
    
    function swapPic() {
    var imgnum = ImgAry.length - 1;
    
    
    //  this part to ensure the same image is not randomly selected in sequence
    //  as you are actuating from onload event tis not relavent
    //  you could just use:
    //  document.getElementById('tst').src=ImgPath+ImgAry[Math.round((ImgAry.length-1)*Math.random())+1];
    // Also preload is not relavent(and a negative attribute) in you application
    do {
     var randnum = Math.random();
     rand1 = Math.round((ImgAry.length - 1) * Math.random()) + 1;
    }
    while (rand1 == useRand); // do again if same image is randomly selected in sequence
    useRand = rand1;
    // end part
    
    
    document.getElementById('tst').src = ImgPath+ImgAry[useRand];
    }
    
    //-->
    </script>
    
    </head>
    
    <body onload="swapPic()">
    
    <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
    </body>
    
    </html>
    edit

    // Also preload is not relavent(and a negative attribute) in you application

    You only want one image so no need to wast time in loading them all
    Last edited by vwphillips; 02-16-2007 at 01:33 AM. Reason: Explaine no preload
    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/

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    but how do i add a rotation of pix in here.

    you dont understand i'm 100% a n00b at this

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    This script will load random images and they will change when you refresh. I hope this is what you are looking for:

    Put in the head:

    <SCRIPT LANGUAGE="text/javascript">
    var theImages = new Array()

    //Random-loading images
    theImages[0] = 'images/home_rotate1.gif' // replace with names of images
    theImages[1] = 'images/home_rotate2.gif' // replace with names of images
    theImages[2] = 'images/home_rotate3.gif' // replace with names of images
    theImages[3] = 'images/home_rotate4.gif' // replace with names of images
    // add more images as required

    var j = 0
    var p = theImages.length;
    var preBuffer = new Array()

    for (i = 0; i < p; i++){
    preBuffer[i] = new Image()
    preBuffer[i].src = theImages[i]
    }
    var whichImage = Math.round(Math.random()*(p-1));

    function showImage(){
    if(whichImage==0){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==1){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==2){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==3){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==4){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }

    }

    </SCRIPT>

    // Change the width and height values to suit. All the images must be the same size.

    //Then put this where you want the images to appear:

    <SCRIPT>showImage();</SCRIPT>


  •  

    Posting Permissions

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