changing text with changing random images

marksteven · 05-07-2009, 11:47 AM

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.

Philip M · 05-07-2009, 12:06 PM

It would be more helpful if you mentioned which particular script you are using. JavaScriptKit.com has several.

marksteven · 05-07-2009, 12:57 PM

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

Sphynx · 05-07-2009, 01:16 PM

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.

marksteven · 05-07-2009, 05:10 PM

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

adios · 05-07-2009, 05:39 PM

Random Fruits - my favorite Ronald Coleman flick.

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

marksteven · 05-07-2009, 05:56 PM

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

jmrker · 05-07-2009, 05:59 PM

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 ...