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

    Question Random Javascript image and text button?

    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]

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Question Need more information and clarification...

    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)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    hope that answers your questions.

    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.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Exclamation

    Quote Originally Posted by aworkinprogress View Post
    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.

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    Mr J's help

    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
    Last edited by waxdoc; 02-18-2012 at 07:50 PM. Reason: add quote

  • #6
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Sorry I'm some what new at this.

    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.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Lightbulb

    This should serve as a starting point ...
    Code:
    <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>
    Last edited by jmrker; 03-05-2012 at 03:22 AM.

  • Users who have thanked jmrker for this post:

    aworkinprogress (03-06-2012)

  • #8
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Sounds like you need just a new random image to be displayed when a button is clicked.

    Below is a basic demo.

    Code:
    <!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>
    Last edited by webdev1958; 03-05-2012 at 09:31 AM.

  • Users who have thanked webdev1958 for this post:

    aworkinprogress (03-06-2012)

  • #9
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Thank you !!!!!!!!!!!!!!

    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 .


  •  

    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
    •