Welcome to WebmasterWorld Guest from 34.204.173.36

Forum Moderators: open

Message Too Old, No Replies

monthly image rotator?

new image each month

     
3:12 pm on Jan 1, 2004 (gmt 0)

New User

10+ Year Member

joined:Jan 1, 2004
posts:5
votes: 0


I thought I could find one, and this would be simple; I need to show a new image each month, where a new image loads at the end of ea month (or beginning of new month).....should this be done in cgi/perl instead?
...all twelve images will be same size, and once I load them, I won't have to do again until next year!
7:32 pm on Jan 1, 2004 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts:1019
votes: 39


Hi there IggyG,

Try this...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta content="mshtml 6.00.2800.1264" name="generator" />
<title>Monthly Image</title>
<style type="text/css">
<!--
iframe#month_image
{
width:200px;
height:200px;
margin:0;
border:solid 1px #000000;
}
div#one
{
position:absolute;
top:20%;
left:20%;
}
//-->
</style>
<script type="text/javascript">
<!--
var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1;
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1;
var monthcontent=new Array()
monthcontent[0]="jan.jpg"; //January content
monthcontent[1]="feb.jpg"; //February content
monthcontent[2]="mar.jpg"; //March content
monthcontent[3]="apr.jpg"; //April content
monthcontent[4]="may.jpg"; //May content
monthcontent[5]="jun.jpg"; //June content
monthcontent[6]="jul.jpg"; //July content
monthcontent[7]="aug.jpg"; //August content
monthcontent[8]="sep.jpg"; //September content
monthcontent[9]="oct.jpg"; //October content
monthcontent[10]="nov.jpg"; //November content
monthcontent[11]="dec.jpg"; //December content

var mydate=new Date();
var mymonth=mydate.getMonth();
var present=mymonth;
function month_of_year()
{
if (ie¦¦dom)
{
var iframeobj=document.getElementById? document.getElementById("month_image") : document.all.month_image;
iframeobj.src=monthcontent[present];
}
}
//-->
</script>
</head>
<body onload="month_of_year();">
<div id="one"><iframe id="month_image" frameborder="0" marginheight="0"></iframe></div>
</body>
</html>

Just change the iframe css dimensions to suit your image and the div css to position it.

birdbrain

9:20 pm on Jan 1, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 17, 2002
posts:1189
votes: 6


I use perl & crontab. Crontab set's off the perl script once a week. The perl script just copies banners in a rotation system.

I have the live banners in /images and the queued banners in

/images/banners1
/images/banners2
/images/banners3
/images/banners4
/images/banners5

every monday morning the perl script copies the contents of /images/bannersX into /images where bannersX is an incremental number from 1 to 5.

It's just a basic copy / rotation method. The crontab does the timing, the perl script knows which subdir to copy to the main images dir and performs the copying.

11:42 pm on Jan 1, 2004 (gmt 0)

New User

10+ Year Member

joined:Jan 1, 2004
posts:5
votes: 0


Hey thanks.....the style script is getting there.....except i'm getting this error:
'ie¦¦dom' is undefined
where in the code you posted, you have:
{
if (ie¦¦dom)
{
....it's obvious i'm in first grade when it comes to js, but where am i supposed to define dom and how?
4:43 am on Jan 2, 2004 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts:1019
votes: 39


Hi there IggyG,

I am sorry about that...
I amended a script to fit your needs
but in my haste did not complete the job!
This has been tested in IE6 and Netscape 7.1
Just amend the div values to position the image.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta content="mshtml 6.00.2800.1264" name="generator" />
<title>Monthly Image</title>
<style type="text/css">
<!--
img#month_image
{
border:double 6px #000000;
}
div#one
{
position:absolute;
top:20%;
left:20%;
}
//-->
</style>
<script type="text/javascript">
<!--
function month_of_year()
{
var monthcontent=new Array()
monthcontent[0]="jan.jpg"; //January content
monthcontent[1]="feb.jpg"; //February content
monthcontent[2]="mar.jpg"; //March content
monthcontent[3]="apr.jpg"; //April content
monthcontent[4]="may.jpg"; //May content
monthcontent[5]="jun.jpg"; //June content
monthcontent[6]="jul.jpg"; //July content
monthcontent[7]="aug.jpg"; //August content
monthcontent[8]="sep.jpg"; //September content
monthcontent[9]="oct.jpg"; //October content
monthcontent[10]="nov.jpg"; //November content
monthcontent[11]="dec.jpg"; //December content

var mydate=new Date();
var mymonth=mydate.getMonth();
var present=mymonth;

var image=document.getElementById? document.getElementById("month_image") : document.all.month_image;
image.src=monthcontent[present];
}
//-->
</script>
</head>
<body onload="month_of_year();">
<div id="one"><img id="month_image"src=""alt=""/></div>
</body>
</html>

birdbrain

6:50 am on Jan 2, 2004 (gmt 0)

New User

10+ Year Member

joined:Jan 1, 2004
posts:5
votes: 0


That was it!
Your script works just great and is the icing on this cake of a page. Thanks very much.
4:20 pm on Jan 2, 2004 (gmt 0)

New User

joined:Dec 1, 2003
posts:37
votes: 0


*If* you have PHP support with your site's hosting then a php solution would be a whole lot simpler and considerably more reliable than using the javascript solutions posted so far.

Firstly, create your selection of images and name each one according to the month in which you wish it to appear (e.g. january.gif, february.gif, march.gif,...).
Make them all the same file format (e.g. gif, jpg or png).

Then, when it comes time to name the src of the image in your markup, simply use the php date() function to insert the image's name of the monthly image file.

<img src="images/<? echo(date('F'))?>.gif" />

The resulting markup (at time of posting) would be:

<img src="images/January.gif" />

The base name of the inserted image file (show here in red) would change automatically according to the current month.

This simpe method uses the php date() function which has a range of variables that can be used to insert date info into markup, amongst them the current month ("F").
This function can be used as above to automatically write the name of the monthly image file to the web page.

This means that by simply inserting a short snippet of php, the image that is ultimately delivered will automatically change each month.

Not only is this php method considerably shorter and more efficient than the previously posted javascript methods, but being server-side, it doesn't rely on the end user's browser having javascript enabled to work properly.
(Figures for javascript-disabled browsers range up to 15% of the general audience, so when available, a server-side php solution will always be a better, more reliable option than javascript for tasks such as this.)
The javascript method first requires that the end user's browser is javascript-enabled and then it also requires that the script be 100% x-platform/x-browser for it to work reliably.
Being server-side, this php is guaranteed to be 100% x-browser/x-platform as it dynamically generates simple html markup.

btw, no offense meant to those who posted javascript solutions.

More info on the php date() [uk2.php.net] function (and gmdate() [uk2.php.net] function).

Notw:
Pages that contain php instructions ( <? …?> ) need to use the replace the .html suffix with .php
This instructs the server to check the page for any php instructions and if process any that are present before delivering the page to the user's browser.
All this takes place in a split second, so no delay will be detectable to your visitors.

Hope that helps.

3:32 am on Jan 5, 2004 (gmt 0)

New User

10+ Year Member

joined:Jan 1, 2004
posts:5
votes: 0


Yep, I figured someone would have a better solution.
The js solution is fine right now; I expect as I set this up for 80 or so accounts, w/ almost 3000 individuals it will seem more tedious....as other things are, and will prompt me to learn more....as has always been the case!
I'll take the php recommendation as more fire under me to get into the php thing. Thanks to all.