random banners

  • Minne
  • Student
  • Student
  • Minne
  • Posts: 94
  • Loc: Small Sports

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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.
  • Minne
  • Student
  • Student
  • Minne
  • Posts: 94
  • Loc: Small Sports

Post 3+ Months Ago

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
  • Minne
  • Posts: 94
  • Loc: Small Sports

Post 3+ Months Ago

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
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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:
  • Minne
  • Student
  • Student
  • Minne
  • Posts: 94
  • Loc: Small Sports

Post 3+ Months Ago

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
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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.
  • Minne
  • Student
  • Student
  • Minne
  • Posts: 94
  • Loc: Small Sports

Post 3+ Months Ago

its still being blank. look at it now http://www.smallsports.com
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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

//I have edited it.


I'm getting a little bit punchy.
  • Minne
  • Student
  • Student
  • Minne
  • Posts: 94
  • Loc: Small Sports

Post 3+ Months Ago

i'll try it tommarow after my drivers ed drive

Post Information

  • Total Posts in this topic: 14 posts
  • Users browsing this forum: No registered users and 34 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.