Back To Website Design Forum

random banners

  • Minne
  • Student
  • Student
  • No Avatar
  • Joined: Jun 21, 2003
  • Posts: 94
  • Loc: Small Sports
  • Status: Offline

Post October 9th, 2003, 4:14 pm

see my site is smallsports.com

and i want my top logo to switch back and forth with this one http://www.smallsports.com/header.jpg

so can ya help by viewing that source like u guys did before to fix the alignment and give me the code or something
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 9th, 2003, 4:14 pm

  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post October 9th, 2003, 4:49 pm

If you have them in the same format and name them header1.gif and header2.gif you could use this where you want the image to show:

Code: [ Select ]
<script language="JavaScript"><!--
document.write('<img src="header' + (Math.round(Math.random()*(2-1))+1) + '.gif" width="750" height="100">');
//--></script>
  1. <script language="JavaScript"><!--
  2. document.write('<img src="header' + (Math.round(Math.random()*(2-1))+1) + '.gif" width="750" height="100">');
  3. //--></script>


This is like tossing a coin in that you may get heads several times in a row - the same image may show several times before switching - but over 100 shows it should be roughly 50/50 I think. If you need them in different formats let me know and I'll see what else I can come up with.
Free Programming Resources
  • Minne
  • Student
  • Student
  • No Avatar
  • Joined: Jun 21, 2003
  • Posts: 94
  • Loc: Small Sports
  • Status: Offline

Post October 9th, 2003, 5:37 pm

so will this show both of them? or will i have to enter it twice or sumthin?

Please help. i wanna get this up and workin
  • Minne
  • Student
  • Student
  • No Avatar
  • Joined: Jun 21, 2003
  • Posts: 94
  • Loc: Small Sports
  • Status: Offline

Post October 9th, 2003, 5:45 pm

Code: [ Select ]
<td width="60%" height="100" bgcolor="#ADADAD" background="themes/subSystem/images/bg.gif" valign="top"><a href="index.php"><img src="themes/subSystem/images/logo.gif" border="0" alt="Welcome to Small Sports" style="positioning: absolute; top: 0px;"></a></td>



thats what my code is right now. i need to keep the bg.gif b/c it extends the bg on larger screens. i need to keep the td width and stuff.
Code: [ Select ]
themes/subSystem/images/logo.gif
that is url to the first banner i wanna switch and the other one is above in my first post
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post October 9th, 2003, 6:14 pm

Ok, keep in mind that this will only work if both of your images are in the same format and they are named header1.gif and header2.gif. I've made the script for gifs but you can change it to jpg if you want just by changing it in the script. However, this little script will only work if they are both in the same format.

Before you make any changes, you might want to see it in action, so I made a test page on my website. Click the link below then hit the refresh button a bunch of times to see it swap back and forth. Note that because it is random it doesn't necessarily change every time.

http://www.freeprogrammingresources.com ... andom.html


After looking at your code, I would do it like this:



Code: [ Select ]
<td width="60%" height="100" bgcolor="#ADADAD" background="themes/subSystem/images/bg.gif" valign="top"><a href="index.php">
<script language="JavaScript"><!--
document.write('<img src="themes/subSystem/images/header' + (Math.round(Math.random()*(2-1))+1) + '.gif"' + ' border="0" alt="Welcome to Small Sports" style="positioning: absolute; top: 0px;">');
//--></script>
<noscript>
<img src="themes/subSystem/images/header1.gif" border="0" alt="Welcome to Small Sports" style="positioning: absolute; top: 0px;">
</noscript>
</a></td>
  1. <td width="60%" height="100" bgcolor="#ADADAD" background="themes/subSystem/images/bg.gif" valign="top"><a href="index.php">
  2. <script language="JavaScript"><!--
  3. document.write('<img src="themes/subSystem/images/header' + (Math.round(Math.random()*(2-1))+1) + '.gif"' + ' border="0" alt="Welcome to Small Sports" style="positioning: absolute; top: 0px;">');
  4. //--></script>
  5. <noscript>
  6. <img src="themes/subSystem/images/header1.gif" border="0" alt="Welcome to Small Sports" style="positioning: absolute; top: 0px;">
  7. </noscript>
  8. </a></td>


I added the noscript tag in case the user has javascript disabled.
Free Programming Resources
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post October 9th, 2003, 6:29 pm

I just made an edit to that because a quotation mark was missing. If you copied the code before this message appeared you may need to recopy it. Sorry about that. :oops:
Free Programming Resources
  • Minne
  • Student
  • Student
  • No Avatar
  • Joined: Jun 21, 2003
  • Posts: 94
  • Loc: Small Sports
  • Status: Offline

Post October 9th, 2003, 6:31 pm

well it just shows the bg.gif with no image on it. i dont think its reading the header.jpg and the other one
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post October 9th, 2003, 6:36 pm

You would have to convert header.jpg to a gif and rename it header2.gif and rename logo.gif header1.gif. It won't work unless they are both in the same format and named header1.gif and header2.gif.
Free Programming Resources
  • Minne
  • Student
  • Student
  • No Avatar
  • Joined: Jun 21, 2003
  • Posts: 94
  • Loc: Small Sports
  • Status: Offline

Post October 9th, 2003, 6:42 pm

its still being blank. look at it now http://www.smallsports.com
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post October 9th, 2003, 6:58 pm

I think I'm reading this thread as you are in the midst of playing with it Minne, because I keep seeing multiple changes as I try to view things. Double check your relative links for the pictures and make sure you are referencing the correct directories. If not change them all to absolute links just to be on the safe side.

Overall the page looks great except for you little glitch.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post October 9th, 2003, 7:05 pm

Well, I'm not sure why it didn't work because the script worked for me and it's fairly straitforward. If you want to try using the existing images logo.gif and header.jpg you could try this instead. Copy this first part into the <head></head> tag:

Code: [ Select ]
<script language="JavaScript"><!--
var imageName;
var num = (Math.round(Math.random()*(2-1))+1);
if(num==1)imageName="logo.gif";
else imageName="header.jpg";
//--></script>
  1. <script language="JavaScript"><!--
  2. var imageName;
  3. var num = (Math.round(Math.random()*(2-1))+1);
  4. if(num==1)imageName="logo.gif";
  5. else imageName="header.jpg";
  6. //--></script>


then replace the earlier code with this:

Code: [ Select ]
<td width="60%" height="100" bgcolor="#ADADAD" background="themes/subSystem/images/bg.gif" valign="top"><a href="index.php">
<script language="JavaScript"><!--
document.write('<img src="themes/subSystem/images/'+ imageName + '" border="0" alt="Welcome to Small Sports" style="positioning: absolute; top: 0px;">');
//--></script>
<noscript>
<img src="themes/subSystem/images/logo.gif" border="0" alt="Welcome to Small Sports" style="positioning: absolute; top: 0px;">
</noscript>
</a></td>
  1. <td width="60%" height="100" bgcolor="#ADADAD" background="themes/subSystem/images/bg.gif" valign="top"><a href="index.php">
  2. <script language="JavaScript"><!--
  3. document.write('<img src="themes/subSystem/images/'+ imageName + '" border="0" alt="Welcome to Small Sports" style="positioning: absolute; top: 0px;">');
  4. //--></script>
  5. <noscript>
  6. <img src="themes/subSystem/images/logo.gif" border="0" alt="Welcome to Small Sports" style="positioning: absolute; top: 0px;">
  7. </noscript>
  8. </a></td>


You'll have to move header.jpg into the same directory as logo.gif
Free Programming Resources
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post October 9th, 2003, 7:55 pm

If he does that
RichB wrote:
You'll have to move header.jpg into the same directory as logo.gif

he'll have to make sure the relative link for header.jpg in the javascript follows the correct path also.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post October 9th, 2003, 8:04 pm

You're right, I should have put the relative path there as well.

//I have edited it.


I'm getting a little bit punchy.
Free Programming Resources
  • Minne
  • Student
  • Student
  • No Avatar
  • Joined: Jun 21, 2003
  • Posts: 94
  • Loc: Small Sports
  • Status: Offline

Post October 11th, 2003, 7:23 pm

i'll try it tommarow after my drivers ed drive

Page 1 of 1

Post Information

  • Total Posts in this topic: 14 posts
  • Users browsing this forum: No registered users and 109 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.