Wanted: Service Automated changing banner

SF · Jul 14, 2010

Hi Guys,

I am building my own website and I am trying to figure out how to change the main picture at the top of the website so that it keeps changing every few seconds, ie keeping a fresh feel to the website.

Can anyone help?

Thanks
DB

EnglishTeacher · Jul 14, 2010

For Example Make A GIF File

For example make a GIF file - I use SWISH Max3, but there are easier and cheaper ones out there that focus on GIFs and not other areas. Alternatively, if you are using a CMS like Joomla, there will be free components for this.

Regards,

Philip

alex · Jul 14, 2010

Do you mean it changes each time the page loads, or do you mean it changes in front of the person viewing the page every few seconds?

If it is each time the page loads then I use the php include function and randomly select files. This removes the need to use JavaScript which I tend to avoid if I want it to be accessed by mobiles etc, but obviously there are JavaScript and other solutions that work fine. I do the following:

PHP:

<?php
$select = rand(1,3);
if ($select == 1)
include("url1.php");
else if ($select == 2)
include("url2.php");
else if ($select == 3)
include("url3.php");
?>

There are probably much better ways, but hopefully this is of use.

edit: you don't have to randomly select files either, it was just an example. You could link it to a database and bring up different banners, images etc based on the information you have on specific users, location, landing page etc.

You could also do it like this:

PHP:

<?php
$select = rand(1,3);
switch ($select)
	{
	case '1':
		include("url1.php");		
		break;
		
	case '2':
		include("url2.php");		
		break;
	
	case '3':
		include("url3.php");
		break;
		
	default:
		include("url1.php");
	}
?>

SF · Jul 14, 2010

Hi Alex,

Yes I am trying to get it to change even if the user stays on the home page,

so if i want random this image what do i do

<img src="img/strawberries.jpg" class="float_right" alt="Strawberries" />

alex · Jul 14, 2010

I don’t think I’m going to be too helpful here because I don’t have a script to hand, but if you look on Google for a JavaScript image rotator there are plenty of examples. The example I posted was for each time a page loads rather than a rotation every few seconds. I’ve just looked a few scripts on Google, but I haven’t tested them. I’ll have a look through them now. Once example I found was:

http://www.re-vision.com/webwork/22_javascript/random-images/randomimagerotator.html

SF · Jul 14, 2010

Hi Alex.

ive looked in css code and found this,

#page_header {
height: 120px;
background: #9ACD34 url('../img/header.jpg') top right no-repeat;
clear: both;

where do i put that code that you showed me?

SF · Jul 14, 2010

what about if i sent you the index file and css could you implent it?

alex · Jul 14, 2010

Sure, I'll have a look and see what I can do.

Aaron Clifford · Jul 17, 2010

One example:
http://visitmix.com/labs/glimmer/samples/sequence.html#

Or it could be done with this

http://medienfreunde.com/lab/innerfade/

PM me if you need a hand.

nullnet · Jul 17, 2010

STEP 1 - Insert this into the <head> section of your page. Configure the images and corresponding links

Code:

//specify interval between slide (in mili seconds)
var slidespeed=3000

//specify images
var slideimages=new Array("image1.gif","image2.gif","image3.gif")

//specify corresponding links
var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com")

var newwindow=1 //open links in new window? 1=yes, 0=no

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

//-->
</script>

STEP 2 - Insert the below into the <body> section of your page

Code:

<a href="javascript:gotoshow()"><img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

<script language="JavaScript1.1">
<!--

var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()

//-->
</script>

<p align="center"><font face="arial" size="-2">This free script provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

Inside the code, modify the HTML so the src property correctly points to the first image within the slide.

Hope this helps

SF · Jul 19, 2010

Thanks mate your a star cheers

nullnet · Jul 21, 2010

no problem

domainer10 · Aug 6, 2010

DB said:
Hi Guys,

I am building my own website and I am trying to figure out how to change the main picture at the top of the website so that it keeps changing every few seconds, ie keeping a fresh feel to the website.

Can anyone help?

Thanks
DB

you can use an xml to configure its changes