Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Dec 2008
    Posts
    1
    Member #
    17835
    Hi,

    I'm trying to create a website for the Scout Troop i'm involved in. As part of the website i'd like the main image (on the top of the page) to reload and show a different image each time the page is reloaded but am not sure how to do it. I've had a look through some of the similar posts but not really too clear!

    I'm doing the website in HTML.

    Thanks for your help!!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    You didn't say if the image could be randomly selected from several images.

    You can use Javascripting, like this:
    http://www.computerhope.com/j18.htm

    Or use PHP (server-side scripting).
    With PHP, you would either need to change your file extension from .html to .php
    or use the .htaccess file to process all .html files as PHP.


  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Hi rob, I used to be a Venture Scout!

    Anyway...

    This is quite simple to do, but you have to decide if you want a client side solution or a server side solution.

    By client side I mean JavaScript, as HTML cannot do this on its own.
    By server side I mean PHP, ASP/ASP.NET, Perl (list is longer than my arm).

    The solution also depends on how many images are going to be rotated. If you decide to go server side you will need to decide if the image paths are stored

    • In a data structure (Array)
    • In a file
    • In a database/other storage medium.


    I am a fan of using an Array for jobs such as this, but again this depends on how many images we are talking about and how often the paths will need updated.

    Below is a client side solution:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    	<title>Client side Image rotate</title>
    
    </head>
    
    <body>
    	
    	<p><img src="image1.jpg" width="200" id="slideshow" height="200" alt="Default image" /></p>
    
    	<script type="text/javascript">
    
    		var images = new Array();
    		images[0] = "image1.jpg";
    		images[1] = "image2.jpg";
    		images[2] = "image3.jpg";
    
    		if(document.getElementById)
    		{
    			var elem = document.getElementById('slideshow');
    			if(elem)
    			{
    				var rand = Math.floor(Math.random()*images.length);
    				elem.src = images[rand];
    			}
    		}
    
    	</script>
    
    </body>
    </html>
    You will note that the image is set to image1.jpg in the HTML. You should make sure that the image defined in your HTML is also defined in your JavaScript array.

    Also note the image paths are relative to the HTML page that this code is on.

    One final thing to note is, the images you want to change to may have different dimensions. This is where the client side version loses it's appeal. You could of course define the dimensions in separate arrays but your work load is increasing.

    Hope this helps.

    Edit: One final, final point. You should of course save the JavaScript code into an external JS file.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com