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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Random image from array

    its a demonstration on being safe on the internet. Click a box: maybe its a prize, maybe its a hazard.

    screen shot attached.

    Only the first image works and the virus function always pops up after every click. I don't even need to click on the image it just changes after a click anywhere on the screen.

    Is it the id of the images being the same? or that they all point to the same function?

    <script type="text/javascript">
    <!-- hide from none JavaScript Browsers
    function swapOut()
    {

    var virus=virusA();
    var images = new Array(26);

    images[0] = 'case00.jpg';
    images[1] = 'case01.jpg';
    images[2] = 'case02.jpg';
    images[3] = 'case03.jpg';
    images[4] = 'case04.jpg';
    images[5] = 'case05.jpg';
    images[6] = 'case06.jpg';
    images[7] = 'case07.jpg';
    images[8] = 'case08.jpg';
    images[9] = 'case09.jpg';
    images[10] = 'case10.jpg';
    images[11] = 'case11.jpg';
    images[12] = 'case12.jpg';
    images[13] = 'case13.jpg';
    images[14] = 'case14.jpg';
    images[15] = 'case15.jpg';
    images[16] = 'case16.jpg';
    images[17] = 'case17.jpg';
    images[18] = 'case18.jpg';
    images[19] = 'case19.jpg';
    images[20] = 'case20.jpg';
    images[21] = 'case21.jpg';
    images[22] = 'case22.jpg';
    images[23] = 'case23.jpg';
    images[24] = 'case24.jpg';
    images[25] = virus;

    var index = Math.floor(Math.random() * images.length);

    document.imageflip.src= images[index];
    }

    function virusA()
    {
    alert("poopie");
    }

    // - stop hiding -->
    </script>



    </head>
    <body align="left" bgcolor="white">

    <table>
    <tr>
    <td align="center"><img src="banner.jpg"/></td>
    </tr>
    <tr>
    <td align="center">

    <img id="imageflip" src="caseNew.jpg" width="100" height="100" onClick="swapOut()" />
    <img id="imageflip" src="caseNew.jpg" width="100" height="100" onClick="swapOut()" />
    <img id="imageflip" src="caseNew.jpg" width="100" height="100" onClick="swapOut()"/>
    <img id="imageflip" src="caseNew.jpg" width="100" height="100" onClick="swapOut()"/>
    <img id="imageflip" src="caseNew.jpg" width="100" height="100" onClick="swapOut()"/>
    </td>
    </tr>
    Attached Thumbnails Attached Thumbnails Random image from array-screen-shot.jpg  

  • #2
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    HELP!!

    I still have not figured out how to make the virus method appear randomly. It still appears with each click. The virus appearing randomly is the most important part!!

    my Progress so far:

    I've separated the array from the swapOut function. Then I wrote swapOut to call the array. The problem is that for each image that I need flipped I have to make a new function(swapOutA, swapOutB, swapOutC...). This does work, but its bulky. There has to be a better way.


    var images = new Array(25);

    images[0] = 'case00.jpg';
    images[1] = 'case01.jpg';
    images[2] = 'case02.jpg';
    images[3] = 'case03.jpg';
    images[4] = 'case04.jpg';
    images[5] = 'case05.jpg';
    images[6] = 'case06.jpg';
    images[7] = 'case07.jpg';
    images[8] = 'case08.jpg';
    images[9] = 'case09.jpg';
    images[10] = 'case10.jpg';
    images[11] = 'case11.jpg';
    images[12] = 'case12.jpg';
    images[13] = 'case13.jpg';
    images[14] = 'case14.jpg';
    images[15] = 'case15.jpg';
    images[16] = 'case16.jpg';
    images[17] = 'case17.jpg';
    images[18] = 'case18.jpg';
    images[19] = 'case19.jpg';
    images[20] = 'case20.jpg';
    images[21] = 'case21.jpg';
    images[22] = 'case22.jpg';
    images[23] = 'case23.jpg';
    images[24] = 'case24.jpg';


    function swapOutA()
    {
    var index = Math.floor(Math.random() * images.length);

    document.imageflipA.src= images[index];
    }
    function swapOutB()
    {
    var index = Math.floor(Math.random() * images.length);

    document.imageflipB.src= images[index];
    }
    Last edited by needMajorHelp; 11-13-2008 at 03:26 AM. Reason: still need help, but have made progress

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Try this ...

    I'm nor sure of your intent, but try this to see how close I can guess to what you want to do.
    PHP Code:
    <html>
    <
    head>
    <
    title>Image Swaps</title>
    <
    script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=152088

    var images = new Array(26);
        
    images[0] = 'case00.jpg';
        
    images[1] = 'case01.jpg';
        
    images[2] = 'case02.jpg';
        
    images[3] = 'case03.jpg';
        
    images[4] = 'case04.jpg';
        
    images[5] = 'case05.jpg';
        
    images[6] = 'case06.jpg';
        
    images[7] = 'case07.jpg';
        
    images[8] = 'case08.jpg';
        
    images[9] = 'case09.jpg';
        
    images[10] = 'case10.jpg';
        
    images[11] = 'case11.jpg';
        
    images[12] = 'case12.jpg';
        
    images[13] = 'case13.jpg';
        
    images[14] = 'case14.jpg';
        
    images[15] = 'case15.jpg';
        
    images[16] = 'case16.jpg';
        
    images[17] = 'case17.jpg';
        
    images[18] = 'case18.jpg';
        
    images[19] = 'case19.jpg';
        
    images[20] = 'case20.jpg';
        
    images[21] = 'case21.jpg';
        
    images[22] = 'case22.jpg';
        
    images[23] = 'case23.jpg';
        
    images[24] = 'case24.jpg';
        
    images[25] = 'virus.jpg';

    function 
    swapOut(IDS) {
      var 
    index Math.floor(Math.random() * images.length);
      
    document.getElementById(IDS).srcimages[index];
      
    document.getElementById(IDS).altimages[index];
      if (
    images[index] == 'virus.jpg') { virusA(); }
    }

    function 
    virusA() {
      
    alert("poopie");
    }
    </script>

    </head>
    <body align="left" bgcolor="white">

    <table>
    <tr>
     <td align="center">
      <img src="banner.jpg" alt='banner.jpg' />
     </td>
    </tr>
    <tr>
     <td align="center">
      <img id="imageflip0" src="caseNew.jpg" alt="caseNew.jpg" width="100" height="100" onClick="swapOut(this.id)" />
      <img id="imageflip1" src="caseNew.jpg" alt="caseNew.jpg" width="100" height="100" onClick="swapOut(this.id)" />
      <img id="imageflip2" src="caseNew.jpg" alt="caseNew.jpg" width="100" height="100" onClick="swapOut(this.id)" />
      <img id="imageflip3" src="caseNew.jpg" alt="caseNew.jpg" width="100" height="100" onClick="swapOut(this.id)" />
      <img id="imageflip4" src="caseNew.jpg" alt="caseNew.jpg" width="100" height="100" onClick="swapOut(this.id)" />
     </td>
    </tr> 
    </table>
    </body>
    </html> 
    I didn't have the images you are to display so I added the 'alt=' to the tags.

  • Users who have thanked jmrker for this post:

    needMajorHelp (11-13-2008)

  • #4
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I ended up creating a function for each image id. So by just this portion it works perfectly!! Thankyou!!

    if (images[index] == 'virus.jpg') { virusA(); }
    }




    I will test this out to see what it does. Thank you!!!!!

    document.getElementById(IDS).src= images[index];
    document.getElementById(IDS).alt= images[index];

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by needMajorHelp View Post
    I ended up creating a function for each image id.
    Would seem to be overkill to create 26 functions.

    In this
    Quote Originally Posted by needMajorHelp View Post
    document.getElementById(IDS).src= images[index];
    document.getElementById(IDS).alt= images[index];
    you won't see much different unless the images are not available.
    Add an X to your image filenames to see what I mean.


  •  

    Tags for this Thread

    Posting Permissions

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