Results 1 to 5 of 5

Thread: random images in a table plus links

  1. #1
    Join Date
    Dec 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default random images in a table plus links

    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! : )

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

    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 for links (or captions/quotations), 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. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Hm, this wouldn't be the way that I would go about doing this. Does your server support PHP? If so, then I'd be glad to remake all this code for you.
    Jeremy | jfein.net

  3. #3
    Join Date
    Dec 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That would be great, thanks -- I'm sure it supports php or if not, can.
    The other thing is it has to work in an asp.net page like this:

    http://newpw.delphi-ts.net/test/test99final.aspx

    As you can see, what I have up there isn't working, though it worked perfect before putting it into the asp.net framework.

    http://newpw.delphi-ts.net/test99.aspx
    ^^ as you can see here. ALL I really just want the 4 random images to pull from a folder of about a dozen, and be able to click them to the products...(and kind of don't care how I get there at this point, as long as I can get it as fast as possible .. )
    any help you can offer is greatly appreciated. I've put a lot of time into many different suggestions and still have nothing to show for it. Thanks!

  4. #4
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    I would have thought to wrap the images in a clickable link then give them a id and make an array out of the links. But I'm not sure if it's the best way to go about it.

  5. #5
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Give this a try:
    PHP Code:
    <style type="text/css">
    .img { float: left; width: 157px; height: 168px; }
    .img img { border: 0px; }
    .img a { border: 0px; color: #000; text-decoration: none; }
    </style>
    <?php
    $images 
    = array(
        
    "images/random1.jpg" => array("image1 details""#1"),
        
    "images/random2.jpg" => array("image2 details""#2"),
        
    "images/random3.jpg" => array("image3 details""#3"),
        
    "images/random4.jpg" => array("image4 details""#4"),
        
    "images/random5.jpg" => array("image5 details""#5"),
        
    "images/random6.jpg" => array("image6 details""#6"),
        
    "images/random7.jpg" => array("image7 details""#7"),
        
    "images/random8.jpg" => array("image8 details""#8"),
        
    "images/random9.jpg" => array("image9 details""#9"),
        
    "images/random10.jpg" => array("image10 details""#10"));
    $random array_rand($images4);
    foreach (
    $random as $key => $value){
      echo 
    '<div class="img"><a href="'.$images[$value][1].'"><img src="'.$value.'" />'.$images[$value][0].'</a></div>';
    }
    ?>
    Jeremy | jfein.net

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
  •