SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Number to Image JS

    Hi I am trying to create a picture bingo for my website. I am using the traditional bingo card generator with the following code:

    Code JavaScript:
    window.onload = newCard;
    var usedNums = new Array(76);
     
    function newCard() {
         if (document.getElementById) {
            for (var i=0; i<24; i++) {
               setSquare(i);
            }
         }
         else {
            alert("Sorry, your browser doesn't support this script");
         }
    }
     
    function setSquare(thisSquare) {
         var currSquare = "square" + thisSquare;
         var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
         var colBasis = colPlace[thisSquare] * 15;
         var newNum;
         do {
            newNum = colBasis + getNewNum() + 1;
         }
         while (usedNums[newNum]);
     
         usedNums[newNum] = true;
         document.getElementById(currSquare). innerHTML = newNum;
    }
     
     
     
    function getNewNum() {
         return Math.floor(Math.random() * 15);
    }
    My Question is that once the number is generated, can anyone tell me what code I should use to change the number into an image?

    I would like to say if the number 1 is chosen then display a the picture from 123picture.jpg (i.e.). Can anyone help? I would greatly appreciate it...

    Thanks!

    Joe
    Last edited by paul_wilkins; May 4, 2011 at 18:51. Reason: correct bbcode tags

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jhumberger View Post
    I would like to say if the number 1 is chosen then display a the picture from 123picture.jpg (i.e.). Can anyone help? I would greatly appreciate it...
    If you have your image names in an array, you can use that number to refer to one of them (counting starts from 0)

    Code javascript:
    var images = [
        'thisimage.jpg',
        'thatimage.jpg',
        'anotherimage.jpg'
        'someotherimage.jpg'
    ];
    ...
    var image = images[newNum];
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do I convert it so instead of displaying the number 1 it displays the image. Would I need some sort of replace code?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You would want to make the HTML element that's identified by "currSquare" an image, by using the IMG tag.

    Code html4strict:
    <img id="square1" src="">
    ...

    You can then use the script to set the src property of that IMG element.

    Code javascript:
    document.getElementById(currSquare).src = images[newNum];
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does not seem to be working. Can you show me in the original code? I must be missing something. I am very new at this and really appreciate all your help...

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jhumberger View Post
    It does not seem to be working. Can you show me in the original code? I must be missing something. I am very new at this and really appreciate all your help...
    I have not ben writing or testing with any original code yet. At this stage I have been providing general-purpose help and assistance.

    I can though help you to make modifications to your existing code, so that you can achieve what you require.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the Original JS:

    window.onload = newCard;
    var usedNums = new Array(76);

    function newCard() {
    if (document.getElementById) {
    for (var i=0; i<24; i++) {
    setSquare(i);
    }
    }
    else {
    alert("Sorry, your browser doesn't support this script");
    }
    }

    function setSquare(thisSquare) {
    var currSquare = "square" + thisSquare;
    var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
    var colBasis = colPlace[thisSquare] * 15;
    var newNum;
    do {
    newNum = colBasis + getNewNum() + 1;
    }
    while (usedNums[newNum]);

    usedNums[newNum] = true;
    document.getElementById(currSquare). innerHTML = newNum;
    }



    function getNewNum() {
    return Math.floor(Math.random() * 15);
    }

  8. #8
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the HTML as well:
    <head>
    <title>Make Your Own Bingo Card</title>
    <link rel="stylesheet" rev="stylesheet" href="file:///Macintosh HD/Users/joehumberger/Documents/script01.css" />
    <script src="/script01.js" type="text/javascript" language="javascript"></script>
    </head>
    <body>

    <h1>NewsRadio 960 WSBT - Bingo Card</h1>

    <table>
    <tr>
    <th width="20%">A</th>
    <th width="20%">M</th>
    <th width="20%">9</th>
    <th width="20%">6</th>
    <th width="20%">0</th>
    </tr>
    <tr>
    <td id="square0">&nbsp;
    <td id="square1">&nbsp;</td>
    <td id="square2">&nbsp;</td>
    <td id="square3">&nbsp;</td>
    <td id="square4">&nbsp;</td>
    </tr>
    <tr>
    <td id="square5">&nbsp;</td>
    <td id="square6">&nbsp;</td>
    <td id="square7">&nbsp;</td>
    <td id="square8">&nbsp;</td>
    <td id="square9">&nbsp;</td>
    </tr>
    <tr>
    <td id="square10">&nbsp;</td>
    <td id="square11">&nbsp;</td>
    <td id="WSBT">WSBT</td>
    <td id="square12">&nbsp;</td>
    <td id="square13">&nbsp;</td>
    </tr>
    <tr>
    <td id="square14">&nbsp;</td>
    <td id="square15">&nbsp;</td>
    <td id="square16">&nbsp;</td>
    <td id="square17">&nbsp;</td>
    <td id="square18">&nbsp;</td>
    </tr>
    <tr>
    <td id="square19">&nbsp;</td>
    <td id="square20">&nbsp;</td>
    <td id="square21">&nbsp;</td>
    <td id="square22">&nbsp;</td>
    <td id="square23">&nbsp;</td>
    </tr>
    </table>
    <p><a href="file:///Macintosh HD/Users/joehumberger/Documents/script01.html" id="reload"> Click here</a> to create a new card</p>
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Paul for helping me with this!

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Okay, when setting square14 to be a number, you want it to be the image of a number, such as "http://www.sitepoint.com/forums/images/bingo5.png"

    You can do that by creating an image, setting the src attribute of the image to your desired file name, and replace whatever is in the TD element with that image.

    Here's how you create the image:

    Code javascript:
    var image;
    ...
    image = new Image();

    If the width and height of each image will be the same, you can put that in there:

    Code javascript:
    var image = new Image(50, 50);

    Then you set the src attribute of the image:

    Code javascript:
    image.src = 'images/bingo' + newNum + '.png';

    And then you remove whatever is in the TD element, and append the image in there instead:

    Code javascript:
    if (document.getElementById(currSquare).hasChildNodes()) {
        document.getElementById(currSquare).removeChild(document.getElementById(currSquare).firstChild);
    }
     
    }
    document.getElementById(currSquare).appendChild(image);

    Let's now put that in a function, to help simplify things:

    Code javascript:
    function empty(el) {
        if (el.hasChildNodes()) {
            el.removeChild(el.firstChild);
        }
    }

    Now you can use that empty function in your code, like this:

    Code:
    function setSquare(thisSquare) {
        var currSquare = document.getElementById("square" + thisSquare);
        var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
        var colBasis = colPlace[thisSquare] * 15;
        var newNum;
        var image;
    
        do {
            newNum = colBasis + getNewNum() + 1;
        } while (usedNums[newNum]);
        usedNums[newNum] = true;
    
        image = new Image();
        image.src = 'images/bingo' + newNum + '.png';
    
        empty(currSquare);
        currSquare.appendChild(image);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul - thank you again for helping me. I am still missing something. This is what the code looks like on my end:
    window.onload = newCard;
    var usedNums = new Array(76);


    var image = new images (50, 50);
    image.src - 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg'
    function newCard() {
    if (document.getElementById(currSquare).hasChildNodes(12)) {
    document.getElementById(currSquare).removeChild(document.getElementById(currSquare).firstChild);
    }

    }
    function empty(el) {
    if (el.hasChildNodes()) {
    el.removeChild(el.firstChild);
    }
    }
    function setSquare(thisSquare) {
    var currSquare = document.getElementById("square" + thisSquare);
    var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
    var colBasis = colPlace[thisSquare] * 15;
    var newNum;
    var image;

    do {
    newNum = colBasis + getNewNum() + 1;
    } while (usedNums[newNum]);
    usedNums[newNum] = true;

    image = new Image();
    image.src = 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg';

    empty(currSquare);
    currSquare.appendChild(image);
    }

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Can you please provide a link to an online test page, so that we can help with the issues that the page is having?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the link to download the files:
    http://dl.dropbox.com/u/12788568/Picture%20Bingo.zip

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    In the zip file, the script01.js file doesn't appear to have had any changes made to it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the updated script file:
    http://dl.dropbox.com/u/12788568/script01.js.zip

  16. #16
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My apologies... Thank you again for all your help!

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The changes you made before the empty function shouldn't have been made.
    Restore the contents of the newCard function back to what they were, and remove the invalid image stuff before it too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So here is what I have now - but it is still not generating the image. I cannot express enough how grateful I am for your help.

    http://dl.dropbox.com/u/12788568/scripttest.js.zip

  19. #19
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything is uploaded here: Maybe with it being stored online, it will be easier to see where my errors are...

    Make Your Own Bingo Card

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The error that the web age is now reporting is:
    empty is not defined

    What do you think should be done about that?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you click the link you are getting that message? I am not sure, what do you recommend?

    Does anything stand out? This is my latest code:

    window.onload = initAll;
    var usedNums = new Array(76);

    function initAll() {
    if (document.getElementById) {
    document.getElementById("reload"). onclick = anotherCard;
    newCard();
    }

    }

    function newCard() {
    for (var i=0; i<24; i++) {
    setSquare(i);
    }
    }

    function setSquare(thisSquare) {
    var currSquare = document.getElementById("square" + thisSquare);
    var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
    var colBasis = colPlace[thisSquare] * 15;
    var newNum;
    var image;

    do {
    newNum = colBasis + getNewNum() + 1;
    } while (usedNums[newNum]);
    usedNums[newNum] = true;

    image = new Image();
    image.src = 'http://consultantwithvision.com/radar/br1.jpg';

    empty(currSquare);
    currSquare.appendChild(image);
    }

    function getNewNum() {
    return Math.floor(Math.random() * 15);
    }
    function anotherCard() {
    for (var i=1; i<usedNums.length; i++) {
    usedNums[1] = false;
    }

    }

  22. #22
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used: image.src = 'http://consultantwithvision.com/radar/br1.jpg'; just as a filler for the time being...

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jhumberger View Post
    When you click the link you are getting that message?
    That's what is shown to me in the scripting console. In many web browsers you can get to it with Ctrl+Shift+J, while in IE8/IE9 you can use F12, or turn on the advanced browser option called "Display a notification about every script error"

    Here's some info on debugging in Internet Explorer, debugging in Firefox and debugging in Google Chrome
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jhumberger View Post
    Does anything stand out?
    Yes - from the error message, the function called empty is missing.
    I suggest that you put it in there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Member
    Join Date
    May 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - JS updated to:
    window.onload = initAll;
    var usedNums = new Array(76);

    function initAll() {
    if (document.getElementById) {
    document.getElementById("reload"). onclick = anotherCard;
    newCard();
    }

    }

    function newCard() {
    for (var i=0; i<24; i++) {
    setSquare(i);
    }
    }

    function setSquare(thisSquare) {
    var currSquare = document.getElementById("square" + thisSquare);
    var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
    var colBasis = colPlace[thisSquare] * 15;
    var newNum;
    var image;

    do {
    newNum = colBasis + getNewNum() + 1;
    } while (usedNums[newNum]);
    usedNums[newNum] = true;

    image = new Image();
    image.src = 'http://consultantwithvision.com/radar/br1.jpg';
    }
    function empty(el) {
    if (el.hasChildNodes()) {
    el.removeChild(el.firstChild);
    }
    }

    function getNewNum() {
    return Math.floor(Math.random() * 15);
    }
    function anotherCard() {
    for (var i=1; i<usedNums.length; i++) {
    usedNums[1] = false;
    }
    }

    Still not working... Here is the link: Make Your Own Bingo Card


Bookmarks

Posting Permissions

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