SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2000
    Location
    Peterborough, England
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I get a number of pictures to alternate between each other? It would be similar to that of an animated gif, but i want to do it all in HTML. I think the pictures will all have to be the same size, am i correct?

    i look forward to your reply,

    internationally

  2. #2
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are several ways to do it with javascript from rotating like a banner to pulling them in randomly to pulling them in on a schedule basis.

    http://javascript.com/

    http://www.hotscripts.com/JavaScript/
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a script setup that I use for one of my sites...it works beautifully!

    This goes in your head tag...

    <script language="JavaScript">
    <!--

    function randomImage() {
    pic = new Array();
    pic[0] = 'images/hdr_green.jpg';
    pic[1] = 'images/hdr_purple.jpg';
    pic[2] = 'images/hdr_yellow.jpg';
    pic[3] = 'images/hdr_blue.jpg';
    randomNum = Math.floor(Math.random()*pic.length);
    newImage = pic[randomNum];
    }

    // -->
    </script>

    This would go anywhere you want the image to appear.

    <script language="javascript">
    randomImage();
    document.write('<img src="' + newImage + '" width="642" height="224" border="0" alt="">');
    </script>

    Note...you can also wrap any combination of HTML around the document.write statement.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  4. #4
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey andy..can put itonline with the images and let us see? I'm curious as to how it actually works...hmm...

    thanks!
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    www.nashvillecvb.com/dev

    Just hit the refresh button a few times as there is only 3 images in the array.

    I actually have it set up to change the background color of a table cell AND the image. Look at the very top of that first page.

    For what it';s worth, a much better way to do it would entail using PHP or ASP or Cold Fusion. Less code and it would not rely on the users browser to do it.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm..so this alternating picture is just randomly selected images and display? like your nashville image?
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yuppers
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Enthusiast Damage's Avatar
    Join Date
    Apr 2001
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here's one I used

    <script>
    var numAvail = 14;

    var quux = 1 + (Math.round(Math.random() * 100)) % numAvail;

    var imgTxt ="<img src=someimage-"
    + quux
    + ".gif"
    + " border=0>"

    document.write(imgTxt);
    </script>

    ===================================

    The thing you need to change is 14 to the actual number of images you have. The other one is the "someimage-" part. I had images named "clients-1.gif" to "clients-14.gif". So the someimage text was "clients-". The script adds the number in and the .gif extension. I think this code is as clean and simple as it gets for image randomizing.
    Last edited by Damage; Apr 21, 2001 at 07:10.

  9. #9
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regarding this issue,
    Why don't you just use php or cgi etc. to randomly select what to show? Thats whats currently being done on my site.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  10. #10
    SitePoint Enthusiast Damage's Avatar
    Join Date
    Apr 2001
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    He might not have PHP installed on his server

    Not all webhosts have PHP installed (they should) and using a a perl script for this small task would be overkill and more CPU intensive than a few lines of javascript.

  11. #11
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. Guess so.

    I use PHP as my page is already built extensively with PHP.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  12. #12
    SitePoint Enthusiast jyoung123's Avatar
    Join Date
    Jan 2001
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PHP version?

    Could you post the PHP script you use to achieve this? (or a link to a site that would have it)

    Thanks.

  13. #13
    SitePoint Enthusiast jyoung123's Avatar
    Join Date
    Jan 2001
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PHP version--answer


  14. #14
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL
    Well, Mine is a little different.
    I have a data file which contain entries for random(ing)
    each new line is a new entry.
    it can contain html code etc.

    so what it'll do it random select one line and show it.
    this is done server-side
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  15. #15
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using ASP i did it as followed,
    i have 6 images
    they are called img1,img2,img3 ect..
    its pretty easy to follow even if you dont know asp


    <%Dim RndNum
    Randomize
    Rndnum = int(Rnd * 6)+1%>
    <img src="/images/img<%=Rndnum%>.gif" width="169" height="128">

  16. #16
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just caught this thread.

    Lyon...the reason why I am not using a PHP script to do this is because this was a really quick mockup, plus the host that was using there did not support PHP.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  17. #17
    PHP Developer W1LL's Avatar
    Join Date
    Apr 2001
    Location
    Leicester, UK
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrote my own JavaScript for this... for 14 images.

    <script language="javascript">
    var a = (Math.round(Math.random()*13));
    document.write("img src='img_"+a+"' border='0'>");
    </script>

    NOTE: You multiply by 13 because it includes numbers from 0-13 (ei. 14 numbers). So images must be named "img_0" to "img_13".
    Hope this helps.

    - Will


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
  •