www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] How can I create random images

  1. #1
    Join Date
    Oct 2008
    Posts
    6

    resolved [RESOLVED] How can I create random images

    This has been confusing me forever and I can't figure it out. I have a website with a header image that contains the login box (see screenshot attached). I want to rotate my header image so that a new one appears randomly everytime I refresh my page. The current code I have for the header image is:

    Code:
    <div style="background-image: url({$image_dir}hdr01.jpg); background-repeat: no-repeat; vertical-align:top; width:100%; height:179px;">
    The part in red grabs the image "hdr01.jpg" from my images directory and makes it the header image. How can I make this random? This code is contained in a .tpl file. So what would I do? In the screenshot below, the lady lying down is the header image (as a banner type image). I can change them individually but can't figure out how to randomize it with the above code??
    Attached Files Attached Files

  2. #2
    Join Date
    Oct 2008
    Posts
    6
    Just bumping this thread to see if anyone has an answer? Or if this is even possible??

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Plenty of random image scripts: http://www.alistapart.com/articles/randomizer/

  4. #4
    Join Date
    Oct 2008
    Posts
    6
    Thanks fang for your reply! Here is my dilemma. When I insert the code like this:

    Code:
    <div style="background-image: url(localhost/public_html/images/rotate.php); background-repeat: no-repeat; vertical-align:top; width:100%; height:179px;">
    I get a blank header image. However, when I look at my files everything seems to be in place. So I'm assuming I'm just doing something wrong in the call to rotate.php. Did I write the url(XXX) part correctly?

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    What is the generated code for the div?

  6. #6
    Join Date
    Oct 2008
    Posts
    6
    Fang, I'm not sure what you mean by that? This is how the code looks now:

    Code:
    <div style="background-image: url({$image_dir}hdr01.jpg); background-repeat: no-repeat; vertical-align:top; width:100%; height:179px;">
    and I want to change the background-image: url part to point to the rotate script. However, I get no image when I do it the way I thought I was supposed to.

    This code resides in a .tpl file so I don't know if that makes a difference in calling a php file. Any ideas?

  7. #7
    Join Date
    Aug 2007
    Location
    Leeds, Yorkshire, England
    Posts
    387
    Don't use an html file, use a php script that accesses a random image e.g. hdr01.jpg, hdr02.jpg. hdr03.jpg etc etc

    <php $n = rand(1,9); ?>

    <div style="background-image: url({$image_dir}hdr0<?php echo $n?>.jpg); background-repeat: no-repeat; vertical-align:top; width:100&#37;; height:179px;">

  8. #8
    Join Date
    Oct 2008
    Posts
    6
    Hi guys,

    I want to thank both of you for helping. In fact, both of your methods work. Fang, my problem was in fact the path in the URL, I had to add the ./ to make it work. And Yelgnidroc, your method worked out of the box! I appreciate both of your help, great community here!

  9. #9
    Join Date
    Aug 2007
    Location
    Leeds, Yorkshire, England
    Posts
    387
    You're welcome.

    Just remember to keep checking into this site and helping others as you gain more knowledge and experience.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles