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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with random images..

    I have a grid(4 x 4) of 16 spacer images and a few text links on the side. Each text link represents a different folder of images. When you rollover each text link, I want a random spacer image (1-16) to display a random image from an array. So for example, the first text link is people-- when you rollover the word people I want a random square to show one of the seven pictures. The you rollout and back over the text link people and a different square shows a different picture out of the same array.

    The thing is, i have no idea how to do that.

    Can anyone help??

    Thanks,
    Josh

  • #2
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy help?

    I'm trying to get this image to randomly change when some text is rolled over. can anyone explain why this is not working? Or better yet, how to make it work?

    <html>
    <head><script language="JavaScript">
    <!--
    function random_imglink(){
    var myimages=new Array()
    //specify random images below. You can have as many as you wish
    myimages[1]="../images/thumb_1.jpg"
    myimages[2]="../images/thumb_2.jpg"
    myimages[3]="../images/thumb_3.jpg"
    myimages[4]="../images/thumb_4.jpg"
    myimages[5]="../images/thumb_5.jpg"
    var ry=Math.floor(Math.random()*myimages.length)
    if (ry==0)
    ry=1
    document.imageLayer.src = ('<img src="'+myimages[ry]+'" border=0></a>')
    }
    //-->
    </script>
    </head>
    <body>
    <div id="imageLayer" style="position:absolute; left:26px; top:76px; width:52px; height:101px; z-index:1"><a href="doesntmatter.html"><img src="../images/thumb_1.jpg" name="imageOne" width="100" height="100"border="0" id="imageOne"></a></div>
    <a href="doesntmatter.html" onmouseout="imageone.src=temp1.src" onmouseover="random_imglink()">click</a>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    woo hoo!

    OK everyone, ignore that last post.
    I got it to work. now im trying to get the image that is replaced to be randomized. so theres four thumbs, and this random rollover is happening only on thumb1. can anybody show me how to concatonize a randomizer onto thumb?


    ___________



    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>random rollover </title>
    <script language="JavaScript"><!--
    roller= new Array()
    roller[1]= new Image(100,100)
    roller[1].src ='../images/thumb_1.jpg'
    roller[2]= new Image(100,100)
    roller[2].src ='../images/thumb_2.jpg'
    roller[3]= new Image(100,100)
    roller[3].src ='../images/thumb_3.jpg'
    roller[4]= new Image(100,100)
    roller[4].src ='../images/thumb_4.jpg'

    showthis=0 //prepares the repeat-preventing variable

    function RandomSwapOut() {

    //the next three lines help prevent repeating images
    oldroller = new Array()
    oldroller[2] = oldroller[1]
    oldroller[1] = showthis

    //the next line chooses the number to use in selecting the image
    showthis = parseInt((Math.random()*(roller.length-1))+1);

    //the next two lines help prevent repeating images
    if (showthis == oldroller[1]) {RandomSwapOut();}
    if (showthis == oldroller[2]) {RandomSwapOut();}

    //the next line replaces the image with the new, random image
    document.thumb1.src = roller[showthis].src; return true;
    }
    function SwapBack() {
    document.thumb1.src = "../images/brain_thumb.gif"; return true;
    }
    // -->
    </script>

    </head>
    <body>

    <div>
    <p><img src="../images/brain_thumb.gif" name="thumb1" width="100" height="100" border="0" id="thumb1"></a> </a>
    <img src="../images/thumb.gif" name="thumb2" width="100" height="100" border="0" id="thumb2"><img src="../images/thumb.gif" name="thumb3" width="100" height="100" border="0" id="thumb3"></a>
    <img src="../images/thumb.gif" name="thumb4" width="100" height="100" border="0" id="thumb4"></a>
    </p>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><a href="www.wherever.com" onmouseover="RandomSwapOut()" onmouseout="SwapBack()">click </a></p>

    </body>
    </html>


  •  

    Posting Permissions

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