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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question changing text with changing random images

    I am a complete novice when it come to Javascript. I copied the script for displaying random images at a specific interval (from javascriptkit.com). I would appreciate knowing whether the following is
    possible:

    The pages are based on tables, so the parts that change are all cells.

    1. Can I define text instead of an image in the array? i.e. can I have the image change to say an apple in one cell and the next cell have text explaining what an apple is?

    2. Would it be possible to put a countdown timer for when the image/text is going to change?

    I'd appreciate any and all help and apologies if this is a silly request.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    It would be more helpful if you mentioned which particular script you are using. JavaScriptKit.com has several.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I am using the script from: javascriptkit.com/script/script2/randomslide.shtml

    if there is anything else that will do the trick(s) then please let me know...

    regards,


    Mark

  • #4
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You don't sound like you want random....

    You can have switching text with dynamic divs.

    Ie:
    Code:
    <div id=item1 style="display: block;">An apple</div>
    <div id=item2 style="display: none;">Apples are Red</div>
    <div id=item3 style="display: none;"><img src="images/apple.jpg"></div>
    Then use a javascript to either randomly, or precisely alternate.
    Code:
    <script type=text/javascript>
      items = new Array( "item1", "item2", "item3");
      x = 0;
    
      function changeItem( int whichItem ) { 
        if( whichItem == x ) return;
        document.getElementById("item"+x).style.display = "none";
        document.getElementById("item"+whichItem).style.display = "block";
        x = whichItem;
      }
    
      function randomChange() {
        whichItem = x
        while( whichItem == x ) whichItem = Math.floor(Math.random()*(items.length));
        changeItem(whichItem);
        window.setTimeout("randomChange()", 1000);
      }
      
      function orderlyChange() {
        whichItem = x+1;
        if( whichItem >= items.length ) whichItem = 0;
        changeItem(whichItem);
        window.setTimeout("orderlyChange()", 1000);
      }
      
      window.setTimeout("randomChange()", 1000);
    
    </script>
    change that last line to window.setTimeout("orderlyChange()", 1000); if you want the orderly version...

    Setting a countdown is a bit more complicated, but only slightly so.

    Call a different function instead that uses a x%10 setup.

  • Users who have thanked Sphynx for this post:

    marksteven (05-07-2009)

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    I know this is cheeky, but I have created a page and uploaded it to the-fruit-network.com

    The idea is to show a random fruit and some text every X minutes/seconds. I can see I am part of the way, but I show both fruits (there will be more) and it is meant to be one at a time. Could you take a look at the source and tell me where I am going wrong?

    Many many thanks,

    Mark

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Random Fruits - my favorite Ronald Coleman flick.

    Any reason why you can't include the text description in the graphics, since they are paired?

  • #7
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I guess I could put the text in as part of the image, but I still have the issue that I want to show just one set at a time - i.e. one image and its text. As it stands I show everything at once!



    Mark

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

    Thumbs up

    Try this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fruits Document</title>
    
    <script type=text/javascript>
    // From: http://codingforums.com/showthread.php?t=165740
    
    var baseDir = 'http://the-fruit-network.com/images/';
    var imageList = [
     ['green_apple.jpg','An Apple','Apples are red or green'],
     ['kiwi.jpg','A Kiwi','Kiwis are brown outside and green inside'],
     ['strawberry.jpg','A Strawberry','Strawberries are red'],
     ['summer-plum.jpg','A Plum','Plums are purple'],
     ['banana.jpg','A Banana','Bananas are yellow']
    ];
      x = 0;
    
      function changeItem( whichItem ) { 
        if ( whichItem == x ) return;
        document.getElementById("item1").innerHTML = imageList[x][1];
        document.getElementById("item2").innerHTML = imageList[x][2];
        document.getElementById("item3").src = baseDir+imageList[x][0];
    //    document.getElementById("item3").alt = imageList[x][1];  // for testing purposes
        x = whichItem;
      }
    
      function randomChange() {
        whichItem = x
        while( whichItem == x ) { whichItem = Math.floor(Math.random()*imageList.length); }
        changeItem(whichItem);
        window.setTimeout("randomChange()", 2000);
      }
    
    </script>
    </head>
    
    <body onLoad="randomChange()">
    <div style="text-align:center">
     <div id='item1'>1</div>
     <img id='item3' src="" alt="image">
     <div id='item2'>2</div>
    </div>
    
    </body>
    </html>
    Set the images to a common size to avoid jumping about.
    Pretty easy to add/sub image displays ...

  • Users who have thanked jmrker for this post:

    marksteven (05-07-2009)


  •  

    Posting Permissions

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