Random Javascript image and text button?

[aworkinprogress]

So I found this script and i give all props to the author but can anyone help me to add text to the random images. Also i need a button that will generate the random images/text not when you refresh the page but when your press the button and to not display any image/text till the button is pressed?

Thanks in advance.

[CODE]
<script language="Javascript">

var currentdate = 0
var core = 0

function StringArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '

}
}

image = new StringArray(10)
image[0] = 'images'
image[1] = 'images'
image[2] = 'images'
image[3] = 'images'
image[4] = 'images'
image[5] = 'images'
image[6] = 'images'
image[7] = 'images'
image[8] = 'images'
image[9] = 'images'

var ran = 60/image.length

function ranimage() {
currentdate = new Date()
core = currentdate.getSeconds()
core = Math.floor(core/ran)
return(image[core])
}

document.write("<img src='" +ranimage()+ "'>")

</script>
<form>
<p><input type="button" name="B1" value="Switch It Up" onclick="ranimage()"></p> </form>

[CODE]

[jmrker]

All should be easy to do, but I have some questions:

1. Is the text to appear over, under or on the image?
2. Where are the addresses (URLs) of the images you wish to display?
3. What is the text to display associated with each image?

Observation:
You missed the '/' in the last [ code] statement. Should be [ /code] (without the spaces)

[aworkinprogress]

Well the goal was to have a title above and a description bellow the picture.
URLs will be added later for the pictures due to the fact that the pictures still need to be taken and as for the text I believe I already answered that.

[jmrker]

Originally Posted by aworkinprogress

Well the goal was to have a title above and a description bellow the picture.
URLs will be added later for the pictures due to the fact that the pictures still need to be taken and as for the text I believe I already answered that.

You seem to be going about this backwards.
Typically, for coding, you gather your resources and then code to your needs while testing for errors.

You are asking for a solution but are choosing to provide no further information.
For example, what is the text you wish to display under the images? What are the titles you are referring to? None were specified in the original request.
I can give you some random images, but you don't seem to know what sizes they are to be or where they are to be placed.

If you want what I design, fine.
But from past experience, what I give may not meet your expectations.
Therefore, without further information, I would just be wasting both our times!
And that is not the most efficient way to program a task.

[waxdoc]

See FLEXIBLE IMAGE SLIDESHOW and help from Mr. J at http://www.codingforums.com/archive/.../t-143543.html

You said

i give all props to the author

But you did NOT give due credit to the author and/or source of the script

[aworkinprogress]

Alright well I'm in somewhat of a pickle because I don't have the resources at the moment to complete the images due to the fact that I live in the US but will be in Switzerland for the next couple months. I do understand what you mean though so i will try to give you my best example of what my idea of the script is at this moment.

The idea is that when you get to the page it is blank with just a button that says "Switch It Up" on it (button should be centered). When you click this button a random image will come up for example a picture of Toronto, above the picture it will say "Toronto" and below it, it'll say "Toronto is located in Canada and is the largest city in Canada." Also I was hoping to keep the button from the start with the same randomize function but with "Switch It Up Again" on it. Now I was planning to do this with a bunch of cities. (everything centered in the middle of the page)(image size 300px by 300px)

So that's the best i can do right now I mean the plans on doing it with a large amount of cities. So my thought was to spare all the work and learn from a simple short script so that I could just add onto it, with images/titles/descriptions .

As for the wasting each others time I couldn't agree more so if its still not enough information we'll have to talk in a few months.

[jmrker]

This should serve as a starting point ...

<html>
<head>
<title> Gallery </title>
<script type="text/javascript">
var imgPtr = 0;
var baseURL = 'http:/www.nova.edu/hpd/otm/pics/4fun/';
var imgList = [
  ['11.jpg','Exhausted: Worn out'],
  ['21.jpg','Angry: Display rage'],
  ['31.jpg','Embarrassed: Self-conscious'],
  ['41.jpg','Enraged: Infuriate'],
  ['51.jpg','Overwhelmed: Overpower, crush'],
  ['12.jpg','Confused: Perplex'],
  ['22.jpg','Hysterical: Emotional frenzy'],
  ['32.jpg','Happy: Joyful, pleased, glad'],
  ['42.jpg','Ashamed: Feeling disgraced'],
  ['52.jpg','Hopeful: Long for']
]
function $_(IDS) { return document.getElementById(IDS); }
function slideshow() {
  $_('myPic').src=baseURL+imgList[imgPtr][0];
  $_('myPic').title=imgList[imgPtr][1];
  $_('myCmmt').innerHTML=imgList[imgPtr][1];
}
function slideShowChange(direction) {
  imgPtr = imgPtr + direction;
  if (imgPtr < 0) { imgPtr = imgList.length-1; }
  imgPtr = imgPtr % imgList.length;
  slideshow();
}
function slideShowRandom() {
  imgPtr = Math.floor(Math.random()*imgList.length);
  slideShowChange(0);
}
window.onload = function() { slideShowChange(0); }
</script>
</head>
<body>
<div style="text-align: center">
  <img src="" id="myPic" title="" border="0" height="150" width="200"> <br>
  <div id="myCmmt"></div> <p>
  <a href="#" onclick="slideShowChange(-1); return false;">« Previous</a> |
  <a href="#" onclick="slideShowRandom(); return false;"> Random</a> |
  <a href="#" onclick="slideShowChange(1); return false;"> Next »</a>
</div>
</body>
</html>

[webdev1958]

Sounds like you need just a new random image to be displayed when a button is clicked.

Below is a basic demo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #imgTitleDescCont {display: none;}
        </style>
        <script type="text/javascript">
            var numClicks = 0, curPic = -1;
            var picdata = [
                ['num1.jpg','title 1','description 1'],
                ['num2.jpg','title 2','description 2'],
                ['num3.jpg','title 3','description 3'],
                ['num4.jpg','title 4','description 4']
            ]; 
            //preload the images
            var picsO = [];
            for(i=0; i < picdata.length; i++){
                picsO[i] = new Image();
                picsO[i].src = picdata[i][0];
            }
            function setRndImage(){
                var newPicNum = Math.floor(Math.random()*picsO.length);
                while(newPicNum == curPic){ //ensure next random image is not the same as current image
                    newPicNum = Math.floor(Math.random()*picsO.length);
                }
                curPic = newPicNum;
                document.getElementById('pTitle').innerHTML = picdata[curPic][1];
                document.getElementById('pDesc').innerHTML = picdata[curPic][2];
                document.getElementById('rndImgCont').src = picsO[curPic].src;
                if(++numClicks == 1){
                    document.getElementById('btnRndImg').innerHTML = 'Switch it up again.'
                    document.getElementById('imgTitleDescCont').style.display = 'block';
                }
            }
        </script>
    </head>
    <body>
        <div id="imgTitleDescCont">
            <p id="pTitle"></p>
            <img id="rndImgCont" src="" alt="" />
            <p id="pDesc"></p>
        </div>
        <div>
            <button id="btnRndImg">Switch it up</button>
        </div>
        <script type="text/javascript">
            document.getElementById('btnRndImg').onclick = setRndImage;  
        </script>
    </body>
</html>

[aworkinprogress]

Wow, simply amazing thank you so much to both of you jmrker and webdev1958. Thanks for putting up with a beginner like me and putting in the time to help me. haha I'm still amazed .

Thanks again and if I run into anymore trouble I know where to come .