Auto-changing Images [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

View Full Version : Auto-changing Images

Pete33

12-26-2008, 06:47 AM

Hi guys, I hope everyone had an enjoyable Christmas.

I have been using a piece of script to automatically change the images on my home page once a day. It works pretty well, but I'm wondering if it can be adapted to change a picture just once a week, rotating between three or four pictures so that it takes a month to display them all.

What do you think?


<script>

</script>

JoeyDaly

12-26-2008, 07:43 AM

Hey Pete33,

Merry Xmas!

With your script great to see that you are adapting something new! So you want to change images depending on a week basis. So let's figure this out together! I'll do the logic you do the code :P A really realyl basic way to solve this is to say we have a maximum of 4 weeks (I know some years we can have 5 weeks - but for your script I don't think that really matters).

With JavaScript getDate() function all the hard work is done, since javascript returns the date (3, 15, 27, etc) - a simple way to get the week is to divide the date by 7 (seven being the maximum number of days in a week) the answer will then return your week!

var mydate = new Date(); // Create the date object
var week = mydate.getDate() / 7; // Divide the date by 7

switch (week)
{
case 1:
document.write('<img src="img1.jpg" />');
break;

.. etc..

}

Best to use a switch rather than if statements, since we know the values.

Let us know how you go! :)

Pete33

12-26-2008, 12:02 PM

Hi Joey

Thanks for the reply. I've had a try at implementing your idea, but at the moment all it delivers is a blank space where the picture should be.

To make it more complicated, the picture needs to be loaded within the <body> for the page, so this is what I have now:

</head>

<body>

<script>

</script><noscript><body bgcolor="#FFFFFF" style="background-image:url('images/image01.gif'); background-repeat: no-repeat; background-attachment: scroll; background-position: center bottom;"></noscript>

Pete33

01-04-2009, 12:59 PM

Unfortunately, it still doesn't work, despite a few days of testing and editing. Any ideas where it has gone wrong?

coothead

01-04-2009, 02:59 PM

Hi there Pete33,

unfortunately, JoeyDaly's week calculator is incorrect. :disagree:

Try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
body {
background-color:#fff;
background-image:url(images/image01.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center bottom;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',weeklyImage,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',weeklyImage);
}
}
function weeklyImage(){

/**************************** Add as many images as you like ****************************************/

myimages=['images/image01.gif','images/image02.gif','images/image03.gif','images/image04.gif'];

/****************************************************************************************************/

mod=myimages.length;

then=new Date(2009,0,1);
now=new Date(2009,0,22);

week=Math.floor(now/(1000*60*60*24*7)-then/(1000*60*60*24*7))%mod;

document.body.style.backgroundImage='url('+myimages[week]+')';
}
</script>

</head>
<body>

<div>

</div>

</body>
</html>

Pete33

01-04-2009, 04:23 PM

Aah, coothead, your version works straight out of the box. Many thanks for that. :)

Can you explain how the maths function works, please? Especially in terms of adjusting it for different periods of time.

then=new Date(2009,0,1);
now=new Date(2009,0,22);

week=Math.floor(now/(1000*60*60*24*7)-then/(1000*60*60*24*7))%mod;

coothead

01-04-2009, 04:59 PM

Hi there Pete33,

I just noticed that the code that I posted was in a test state used to confirm the image change. :o :o :o

This line...
now=new Date(2009,0,22);

...should be...
now=new Date();

These...
then=new Date(); and now=new Date();
...gives the date in milliseconds.

To change the values into weeks they have to be divided by...
1000*60*60*24*7

The variable then represents the beginning of the year, the variable now represents the present date.

The subtraction of then from now will, of course, give fractions of a week.

Math.floor will then reduce the values to the integers - 0, 1, 2, 3, 4, 5.......52

To rotate the images the modulus operator - % is set to the number of images to be rotated.

I hope that this helps. :agree:

Pete33

01-05-2009, 12:40 PM

That helps a lot, thanks. This is looking pretty good so far, but knowing more is always useful.

I've been trying to research how to change the values from weeks to months. What I've found so far suggests it is built up from the smallest unit into the biggest:

weeks = 1000 * 60 * 60 * 24 * 7

days = 1000 * 60 * 60 * 24

hours = 1000 * 60 * 60

mins = 1000 * 60

secs = 1000

No example I've found seems to offer a calculation for months so I'm guessing a little here. Does it mean that months will be 1000 * 60 * 60 * 24 * 7 * 30, or do you simply change the week figure instead, 1000 * 60 * 60 * 24 * 30?

coothead

01-05-2009, 01:27 PM

Hi there Pete33,

when it comes to month selection you have, of course, two choices, lunar and calendar. :agree:

calendar is simply...
calendar_month=new Date().getMonth()
...and lunar would be...
lunar_month=Math.floor(now/(1000*60*60*24*7*4)-then/(1000*60*60*24*7*4))

Pete33

01-08-2009, 05:05 AM

Hello there

Apologies for the late reply. I didn't receive a notification of your post.

Many thanks for that reply of yours. Unfortunately, the background picture seemed to be placed on the side of the screen instead of centered at the bottom of the page. I think for now, as I've decided to change the image only once a month, I'll go for an easier approach and just leave the path to the image as it is. I can change the image itself manually.

You can see it in use at www.historyfiles.co.uk.

The script will definitely come in useful somewhere else, though, so thanks for all your help with it. :)