Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Daily Background Image

Status
Not open for further replies.
budgy

budgy

Programmer
Jan 4, 2005
73
GB
Hi Guys, i really hope you can help me here, im designing a new website, and i want the banner to display a new image for each day of the week. Ive found the code to make this happen, but my image is a background image, does anyone know how this can be achieved?... all suggestions will be much appreciated. The following is the code i have, but how do i apply it to a background image? :-

-------------------------------------------------------
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
today = new Date();
day = today.getDay();
arday = new Array("sunday.jpg", "monday.jpg", "tuesday.jpg", "wednesday.jpg", "thursday.jpg", "friday.jpg", "saturday.jpg");
document.write("<img src='" + arday[day] + "'>");
// End -->
</script>

-----------------------------------------------------------

Current coding for image :-

<td height="126" valign="top" style="background:url(home/images/banner/banner_back_2.gif) #ffffff no-repeat" >

-----------------------------------------------------------

Thank in advance.
 
Sort by date Sort by votes
put 7 jpg files into directory home/images/banner, and try the following
Code: 
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
today = new Date();
day = today.getDay();
arday = new Array("sunday.jpg", "monday.jpg", "tuesday.jpg", "wednesday.jpg", "thursday.jpg", "friday.jpg", "saturday.jpg");
document.write('<table><tr><td>');
document.write('<td height="126" valign="top" style="background:url(home/images/banner/' + arday[day] + ')" >');
document.write('</td></tr></table>');
// End -->
</script>
hope it helps.
 
Upvote 0 Downvote

Much better than using document.write would be to give your td an id and target it that way:

Code: 
<script type="text/javascript">
<!--
	today = new Date();
	day = today.getDay();
	arday = new Array("sunday.jpg", "monday.jpg", "tuesday.jpg", "wednesday.jpg", "thursday.jpg", "friday.jpg", "saturday.jpg");
	document.getElementById('todaysBanner').style.background = 'url(home/images/banner/' + arday[day] + ') #FFFFFF no-repeat';
//-->
</script>

...

<td id="todaysBanner" height="126" valign="top">

Hope this helps,
Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Thank u so much for ur help guys!! honestly very much appreciated!!

Although i understand what the codes are doing, im having trouble applying it to my current code.

This is how the banner code currently looks:

-----------------------------------------------------
<table width="100%" height="126" border="0" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="#999999">
<td height="126" valign="top" style="background:url(home/images/banner/banner_back_2.gif) #ffffff no-repeat" ><div align="left"><img src="home/images/banner/click_logo.gif" alt="Click to...logo" width="341" height="110"></div></td>
</tr>
</table>

---------------------------------------------------------

my question guys is how can i apply the code u guys have kindly supplied to the code above?, so that the format of the page is not changed. Like always all the help is much appreicated!
 
Upvote 0 Downvote

Using the code I gave you, the format of the page would not be changed. All you need to do it give your td an id, and then put the script somewhere appropriate - I would suggest in a function in your head section.

Then, simply call the function when the body has loaded to update the banner.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
im so sorry to be a pain, but im still having problems, the background image is not appearing :(. this is how my code looks

-----------------------------------------------------------

</script>
<script type="text/javascript">
<!--
today = new Date();
day = today.getDay();
arday = new Array("banner_back_1.gif", "banner_back_2.gif", "banner_back_3.gif", "banner_back_4.gif", "banner_back_5.gif", "banner_back_1.gif", "banner_back_2.gif");
document.getElementById('todaysBanner').style.background = 'url(home/images/banner/' + arday[day] + ') #FFFFFF no-repeat';
//-->
</script>


</head>

<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<!-- page layout templates v2.62 --><!-- GLOBAL NAVIGATION --><!-- toolbar 1.42 header.page ffffff -->
<!-- end toolbar 1.42 -->
<!-- End of GLOBAL NAVIGATION -->
<br>
<br>
<div align="center">
<table cellpadding="0" cellspacing="0" border="0" class="padH">
<tr>
<td
colspan="2" valign="top"> <table width="100%" height="126" border="0" align="center" cellpadding="0" cellspacing="0">

<td id="todaysBanner" height="126" valign="top"><div align="left"><img src="home/images/banner/click_logo.gif" alt="Click to...logo" width="341" height="110"></div></td>
</tr>
</table> </td>

-----------------------------------------------------------

If its any use, i have a style sheet which is linked to this page, do u think theres a conliction perhaps?

Once again any advise will be muchly appreciated.
Thank u so much
 
Upvote 0 Downvote

You should pay more attention to advice given:

BillyRayPreachersSon said:
put the script somewhere appropriate - I would suggest in a function in your head section

...

Then, simply call the function when the body has loaded
Click to expand...

You are not putting it in a function, or waiting until the body has loaded to call it. This means that the code is probably erroring as it is executing before the target element has loaded.

Follow the suggestions I gave in my last post, and you should find it works.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
:( im so sorry BillyRayPreachersSon i dont know which funtion it should go in. Im fairly new to this. I am trying to take it as much as possible. I really do appreciate u helping me.

 
Upvote 0 Downvote

OK - you're almost there. Try this for size. In your head section, put:

Code: 
<script type="text/javascript">
<!--
    function setBanner() {
        today = new Date();
        day = today.getDay();
        arday = ["sunday.jpg", "monday.jpg", "tuesday.jpg", "wednesday.jpg", "thursday.jpg", "friday.jpg", "saturday.jpg"];
        document.getElementById('todaysBanner').style.background = 'url(home/images/banner/' + arday[day] + ') #FFFFFF no-repeat';
    }
//-->
</script>

Give your TD an id (which you already have done, I think):

Code: 
<td id="todaysBanner" height="126" valign="top">

and then modify your body element to have an onload attribute:

Code: 
<body onload="setBanner();" bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

Incidentally, you might consider updating your body tag to use CSS for the margins and colour by adding a style sectin into your head section, and modifying your body tag again:

Code: 
<style type="text/css">
    body {
        background-color: #FFFFFF;
        margin: 0px;
        padding: 0px;
    }
</style>

...

<body onload="setBanner();">

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Thank you so much BillyRayPreachersSon, uve been fantastic. Ive managed to get it working. [thumbsup2]
 
Upvote 0 Downvote
If it is of any help to you...
Although this solution with javascript does work, a more robust solution would be to go with a server side script.

From the perspective of which solution is best for a particular situation, a sever side script would be the best choice in this particular situation. It would be more fool-proof and would work on more people's computers.
 
Upvote 0 Downvote
Along the lines of what KevinAr18 wrote, I worked on a computer once where the calendar was several years and months off. While that's less likely now with more computers running Windows XP, it's not unlikely that 2 different computers will have 2 different dates set, and the backgrounds will be different because of that. If you use server-side scripting, then the only computer calendar being used is the server's, so everyone gets the same image each day.

Lee
 
Upvote 0 Downvote
Appreciate the advise guys. May god bless you all [afro]
 
Upvote 0 Downvote

That won't be necessary / likely IMHO (some of us are atheists), but thanks for the thought anyway.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
212
waubain
waubain
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
100
gmmastros
gmmastros
DougP
  • Locked
  • Question
Newbie question about making functions to pass image names for viewing larger
Replies
7
Views
132
vacunita
vacunita
tyutghf
  • Locked
  • Question
Image replacement script stopped working
Replies
2
Views
83
tyutghf
tyutghf
alanatabz
  • Locked
  • Question
Alignment of image
Replies
2
Views
75
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top