Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Rotating banner help?
New Posts  All Forums:Forum Nav:

Rotating banner help?

post #1 of 6
Thread Starter 
I want to do rotating banners on a webpage. Make them rotate every 5 seconds or so. It will go in my header.php I have been trying to use javascript, but I cannot get it to change banners every few seconds although it does change upon refreshing. Have a better way or fix what I have but either way HELP! lol Thanks in advance.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>City Glam Events</title>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/style/style.css" media="screen">
<script type="text/javascript">
var c=0
var s
function photoGallery()
{
if (c%5==0){

document.getElementById('photo-gallery').src = "site/banner/images/1.jpg";
}
if (c%5==1){

document.getElementById('photo-gallery').src = "site/banner/images/2.jpg";
}
if (c%5==2){

document.getElementById('photo-gallery').src = "photos/pic3.jpg";
}
if (c%5==3){
document.getElementById('photo-gallery').src = "photos/pic4.jpg";
}
if (c%5==4){
document.getElementById('photo-gallery').src = "photos/pic5.jpg";
}
c=c+1
s=setTimeout("photoGallery()",1000)
}
</script>

</head>
<body>
<div id="container">
    <div id="header">
        <a id="logo" href="index.php" title="City Glam Events"><img style="border:3px dotted #545565;" img src="style/images/logo.png" alt="City Glam Events"></a>
        
    </div>
<ul id="nav">
         <li><a class="contact" href="contact.php">|Contact|</a></li>
         <li><a class="contact" href="menu.php">|Menu|</a></li>
     <li><a class="services" href="photo.php">|Photos|</a></li>
 <li><a class="portfolio" href="services.php">|Services|</a></li>
 <li><a class="about" href="about.php">|About|</a></li>
         <li><a class="home" href="index.php">|Home|</a></li>
    </ul>


    <div id="content">
<body onload="photoGallery()"> 

</div>
<hr style="color:#503010;background-color:#503010;height:3px;border:none;"/>
</body>
</html>

Edited by A-E-I-Owned-You - 2/21/11 at 4:39pm
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
post #2 of 6
Use this for the photos

<img src="photos/pic1.jpg" id="photo-gallery" width="420" height="260">

Add this into the <head> tags

<script type="text/javascript">
var c=0
var s
function photoGallery()
{
if (c%5==0){

document.getElementById('photo-gallery').src = "photos/pic1.jpg";
}
if (c%5==1){

document.getElementById('photo-gallery').src = "photos/pic2.jpg";
}
if (c%5==2){

document.getElementById('photo-gallery').src = "photos/pic3.jpg";
}
if (c%5==3){
document.getElementById('photo-gallery').src = "photos/pic4.jpg";
}
if (c%5==4){
document.getElementById('photo-gallery').src = "photos/pic5.jpg";
}
c=c+1
s=setTimeout("photoGallery()",1000)
}
</script>

Change the number here for the delay in milliseconds

s=setTimeout("photoGallery()",1000)
My Rig
(16 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core 2 Duo E7600 @ 3.06Ghz Asus P5N-D 750i SLI ATi Radeon HD 6770 4 x 2GB Corsair Dominator DDR3 
Hard DriveHard DriveOptical DriveOS
2 x 500Gb Seagate Barracuda RAID 0 2TB Seagate Barracuda DVD+CD-RW Combo, DVD-RW Windows 8 Professional X64 
OSMonitorMonitorKeyboard
Ubuntu 12.10 x64 AOC F22S+ 22" HD 1080p 17" Monitor Logitech 
PowerCaseMouse
Powercool 850W Antec 902 Logitech 
  hide details  
Reply
My Rig
(16 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core 2 Duo E7600 @ 3.06Ghz Asus P5N-D 750i SLI ATi Radeon HD 6770 4 x 2GB Corsair Dominator DDR3 
Hard DriveHard DriveOptical DriveOS
2 x 500Gb Seagate Barracuda RAID 0 2TB Seagate Barracuda DVD+CD-RW Combo, DVD-RW Windows 8 Professional X64 
OSMonitorMonitorKeyboard
Ubuntu 12.10 x64 AOC F22S+ 22" HD 1080p 17" Monitor Logitech 
PowerCaseMouse
Powercool 850W Antec 902 Logitech 
  hide details  
Reply
post #3 of 6
Thread Starter 
I am doing it all really sloppy in my header. Maybe you can explain how to use it to my needs a little better. I am lost and it doesnt work how I did it lol. ?_?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>City Glam Events</title>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/style/style.css" media="screen">
<script type="text/javascript">
var c=0
var s
function photoGallery()
{
if (c%5==0){

document.getElementById('photo-gallery').src = "site/banner/images/1.jpg";
}
if (c%5==1){

document.getElementById('photo-gallery').src = "site/banner/images/2.jpg";
}
if (c%5==2){

document.getElementById('photo-gallery').src = "photos/pic3.jpg";
}
if (c%5==3){
document.getElementById('photo-gallery').src = "photos/pic4.jpg";
}
if (c%5==4){
document.getElementById('photo-gallery').src = "photos/pic5.jpg";
}
c=c+1
s=setTimeout("photoGallery()",1000)
}
</script>

</head>
<body>
<div id="container">
    <div id="header">
        <a id="logo" href="index.php" title="City Glam Events"><img style="border:3px dotted #545565;" img src="style/images/logo.png" alt="City Glam Events"></a>
        
    </div>
<ul id="nav">
         <li><a class="contact" href="contact.php">|Contact|</a></li>
         <li><a class="contact" href="menu.php">|Menu|</a></li>
     <li><a class="services" href="photo.php">|Photos|</a></li>
 <li><a class="portfolio" href="services.php">|Services|</a></li>
 <li><a class="about" href="about.php">|About|</a></li>
         <li><a class="home" href="index.php">|Home|</a></li>
    </ul>


    <div id="content">
<img src="site/banner/images/1.jpg" id="photo-gallery" width="778" height="292"> 

</div>
<hr style="color:#503010;background-color:#503010;height:3px;border:none;"/>
</body>
</html>
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
post #4 of 6
Thread Starter 
Bumps! :0
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
post #5 of 6
You need to call your photogallery() function, otherwise it will not run. Add a onload="javascripthotograllery()" or something similar to your body tag
post #6 of 6
Thread Starter 
I dont know the proper way to do that. I have never used javascript. This is my sloppy ass header lol. Help? The banner goes right above the bottom horizontal line.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>City Glam Events</title>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/style/style.css" media="screen">
<script type="text/javascript">
var c=0
var s
function photoGallery()
{
if (c%5==0){

document.getElementById('photo-gallery').src = "site/banner/images/1.jpg";
}
if (c%5==1){

document.getElementById('photo-gallery').src = "site/banner/images/2.jpg";
}
if (c%5==2){

document.getElementById('photo-gallery').src = "photos/pic3.jpg";
}
if (c%5==3){
document.getElementById('photo-gallery').src = "photos/pic4.jpg";
}
if (c%5==4){
document.getElementById('photo-gallery').src = "photos/pic5.jpg";
}
c=c+1
s=setTimeout("photoGallery()",1000)
}
</script>

</head>
<body>
<div id="container">
    <div id="header">
        <a id="logo" href="index.php" title="City Glam Events"><img style="border:3px dotted #545565;" img src="style/images/logo.png" alt="City Glam Events"></a>
        
    </div>
<ul id="nav">
         <li><a class="contact" href="contact.php">|Contact|</a></li>
         <li><a class="contact" href="menu.php">|Menu|</a></li>
     <li><a class="services" href="photo.php">|Photos|</a></li>
 <li><a class="portfolio" href="services.php">|Services|</a></li>
 <li><a class="about" href="about.php">|About|</a></li>
         <li><a class="home" href="index.php">|Home|</a></li>
    </ul>


    <div id="content">
<body onload="photoGallery()"> 

</div>
<hr style="color:#503010;background-color:#503010;height:3px;border:none;"/>
</body>
</html>

Edited by A-E-I-Owned-You - 2/21/11 at 4:36pm
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
Caseless Wonder
(13 items)
 
  
CPUMotherboardGraphicsRAM
q6600 650i Ultra 9600 512 4gb 
Hard DriveOptical DriveOSMonitor
4x500gb caviar black dvd burner Windows 7 x64 19inch 
KeyboardPowerCaseMouse
G15 revision 1 700watt? N/A mx518 
Mouse Pad
none 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Rotating banner help?