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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    NH - US
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    random images in a table plus links-HELP

    I've been to many different site forums and have yet to have my questions answered completely.. maybe your site and members is the one who can do it - I sure HOPE SO! : ) (and I have tried soo many different solutions...)

    Here is a page - everything is working as I want, EXCEPT, I want to make each one of these random images clickable to a url...
    http://newpw.delphi-ts.net/test/testydude3.aspx

    Can anyone at this forum do this? It would be great if you knew. Also - if you know how to add a matching quote for each image right underneath it, that would be awesome, but having the clickable image is more important right now - thank you all in advance! Am hoping you guys and gals are smarter than the other forums out there!

    Here is the code:

    <style type='text/css'>
    td.titlea {
    height: 174px;
    width: 160px;
    padding: 0px;
    border: 1px solid #eeeeee;
    vertical-align: bottom;
    margin-right:2px;
    }

    td.titleb {
    height: 174px;
    width: 160px;
    border: 1px solid #eeeeee;
    vertical-align: bottom;
    margin-right:2px;
    }

    td.titlec {
    height: 174px;
    width: 160px;
    border:1px solid #eeeeee;
    vertical-align: bottom;
    margin-right:2px;
    }

    td.titled {
    height: 174px;
    width: 160px;
    border: 1px solid #eeeeee;
    vertical-align: bottom;
    margin-right:2px;
    }
    </style>
    <script language="JavaScript" type="text/javascript"><!--

    var image = new Array();
    image[0] = 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg' ;
    image[1] = 'https://www.kqimageserver.com/pwimages/new/testimages/random2.jpg' ;
    image[2] = 'https://www.kqimageserver.com/pwimages/new/testimages/random3.jpg' ;
    image[3] = 'https://www.kqimageserver.com/pwimages/new/testimages/random4.jpg' ;
    image[4] = 'https://www.kqimageserver.com/pwimages/new/testimages/random5.jpg' ;
    image[5] = 'https://www.kqimageserver.com/pwimages/new/testimages/random6.jpg' ;
    image[6] = 'https://www.kqimageserver.com/pwimages/new/testimages/random.jpg' ;
    image[7] = 'https://www.kqimageserver.com/pwimages/new/testimages/random7.jpg' ;
    image[8] = 'https://www.kqimageserver.com/pwimages/new/testimages/random8.jpg' ;
    image[9] = 'https://www.kqimageserver.com/pwimages/new/testimages/random9.jpg' ;
    image[10] = 'https://www.kqimageserver.com/pwimages/new/testimages/random10.jpg' ;

    var index = Math.floor(Math.random() * (image.length - 1)) + 1;

    indexb = Math.floor(Math.random() * image.length);

    while (indexb == index)
    {
    indexb = Math.floor(Math.random() * image.length);
    }
    indexc = Math.floor(Math.random() * image.length);

    while (indexc == index || indexc == indexb)
    {
    indexc = Math.floor(Math.random() * image.length);
    }

    indexd = Math.floor(Math.random() * image.length);

    while (indexd == index || indexd == indexb || indexd == indexc)
    {
    indexd = Math.floor(Math.random() * image.length);
    }


    document.write('<style type="text/css"> td.titlea { background-image: url('+ image[index] +') } </style>');
    document.write('<style type="text/css"> td.titleb { background-image: url('+ image[indexb] +') } </style>');
    document.write('<style type="text/css"> td.titlec { background-image: url('+ image[indexc] +') } </style>');
    document.write('<style type="text/css"> td.titled { background-image: url('+ image[indexd] +') } </style>');

    //-->
    </script>

    <br /><br />

    <div style="width:650px; margin-left:9px";><p class="page_title">random image test</p>
    <table width='630' cellpadding='0' cellspacing='0' bgcolor="#ffffff" align="left" style="margin-left:6px;">
    <tr>
    <td class='titlea' style="width:157px"></td>
    <td class='titleb' style="width:157px"></td>
    <td class='titlec' style="width:157px"></td>
    <td class='titled' style="width:157px"></td></tr>

    </table>
    </div>

    If its a new array, please show me exactly how it looks and where it goes in reference to this code if you'd be so kind. Thanks, hope someone can help me with this.

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Umm.

    That's probably not a very efficient way of doing it. Just get your random numbers in a loop. And you can use JSON to store your array of image urls and their respective captions. And you don't need to put stuff in tables either; just float stuff.

    Here's another way. I've used JQuery, but the principle is the same.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    
    <style type="text/css">
        #images_container{
            overflow:hidden;
            width:640px;
        }
        #images_container .image_box{
            float:left;
            width:160px;
            text-align:center;
        }
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    
    var image_list = [
        {
            url:        'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg',
            caption:    'This is a random image 1'
        }
        ,{
            url:        'https://www.kqimageserver.com/pwimages/new/testimages/random2.jpg',
            caption:    'This is a random image 2'
        }
        ,{
            url:        'https://www.kqimageserver.com/pwimages/new/testimages/random3.jpg',
            caption:    'This is a random image 3'
        }
        ,{
            url:        'https://www.kqimageserver.com/pwimages/new/testimages/random4.jpg',
            caption:    'This is a random image 4'
        }
        ,{
            url:        'https://www.kqimageserver.com/pwimages/new/testimages/random5.jpg',
            caption:    'This is a random image 5'
        }
        ,{
            url:        'https://www.kqimageserver.com/pwimages/new/testimages/random6.jpg',
            caption:    'This is a random image 6'
        }
        ,{
            url:        'https://www.kqimageserver.com/pwimages/new/testimages/random7.jpg',
            caption:    'This is a random image 7'
        }
        ,{
            url:        'https://www.kqimageserver.com/pwimages/new/testimages/random8.jpg',
            caption:    'This is a random image 8'
        }
    ]
    
    $(function(){
        var used = [];
        var i = Math.floor(Math.random() * image_list.length);
        while (used.length < 4){
            while ($.inArray(i, used) > -1){
                i = Math.floor(Math.random() * image_list.length);
            }
            img = image_list[i];
            $('<div class="image_box"><img src="' + img.url + '" alt="' + img.caption + '"><p>' + img.caption + '</p></div>').appendTo('#images_container');
            used[used.length] = i;
        }
    });
    
    </script>
    
    </head>
    
    <body>
        
        <div id="images_container"></div>
        
    </body>
    </html>


  •  

    Posting Permissions

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