Nyeste it-job

Flere it-job

Javascript banner rotation

af Jonas Astrup, HTML.dk
Sidst opdateret d. 29. maj 2001

Med dette script kan du rotere et antal bannere på dit websted. Det vil sige at et tilfældigt banner eksponeres hver gang en side vises. Det er simpelt at tilføje flere bannere til scriptet - indsæt blot henvisninger til nye bannere på det sted i koden hvor det er markeret.

Det anbefales at placere javascriptet som en .js fil - derved kan du styre alle dine bannere centralt fra ét sted. Se længere nede på siden hvordan du gør.

Vis som eksempel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>Javascript banner rotation</title>
<script type="text/javascript">
<!-- Dette script og mange flere --> 
<!-- findes hos http://www.html.dk --> 
<!-- Start 

bannerpics=new Array; 
bannerurls=new Array;

bannerpics[1]="banner1.gif"; 
bannerurls[1]="http://www.html.dk/tutorials";

bannerpics[2]="banner2.gif"; 
bannerurls[2]="http://www.html.dk/artikler"; 

bannerpics[3]="banner3.gif"; 
bannerurls[3]="http://www.html.dk/scripts"; 

bannerpics[4]="banner4.gif";
bannerurls[4]="http://www.html.dk/faq"; 

bannerpics[5]="banner5.gif"; 
bannerurls[6]="http://www.html.dk/nyhedsgrupper";

// Nye bannere kan indsættes her
// Følg blot samme form som for de ovenstående bannere

function ShowBanner() {

num = Math.random();
num = 1 + ( num * ((bannerpics.length - 1)-1));
num = Math.round(num);

document.write("<div><a href='" + bannerurls[num] + "'>");
document.write("<img src='" + bannerpics[num] + "' border='0' ");
document.write("alt='Click here to find out more!'>");
document.write("</a></div>");
}
// Slut -->
</script>
</head>
<body>

<-- Bannervisning start -->
<script type="text/javascript">
ShowBanner();
</script>
<-- Bannervisning slut -->

<h1>På denne side roteres bannere</h1>
</body>
</html>

Vis som eksempel

Tip: Styr dine bannere centralt

Hvis du gerne vil kunne styre dine bannere centralt fra én fil, skal du blot lægge ovenstående kode ud som en .js fil - og derefter kalde denne fil fra dine sider.

Helt konkret laver du en fil, som f.eks. kaldes banner.js - filen skal have følgende indhold:

banner.js :

<!-- Dette script og mange flere --> 
<!-- findes hos http://www.html.dk --> 
<!-- Start 

bannerpics=new Array; 
bannerurls=new Array;

bannerpics[1]="banner1.gif"; 
bannerurls[1]="http://www.html.dk/tutorials";

bannerpics[2]="banner2.gif"; 
bannerurls[2]="http://www.html.dk/artikler"; 

bannerpics[3]="banner3.gif"; 
bannerurls[3]="http://www.html.dk/scripts"; 

bannerpics[4]="banner4.gif";
bannerurls[4]="http://www.html.dk/faq"; 

bannerpics[5]="banner5.gif"; 
bannerurls[6]="http://www.html.dk/nyhedsgrupper";

// Nye bannere kan indsættes her
// Følg blot samme form som for de ovenstående bannere

function ShowBanner() {

num = Math.random();
num = 1 + ( num * ((bannerpics.length - 1)-1));
num = Math.round(num);

document.write("<div><a href='" + bannerurls[num] + "'>");
document.write("<img src='" + bannerpics[num] + "' border='0' ");
document.write("alt='Click here to find out more!'>");
document.write("</a></div>");
}
// Slut -->

Sådan viser du bannere fra den centrale fil

Herefter er det nemt at kalde den centrale .js fil fra webstedets øvrige dokumenter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>Javascript banner rotation</title>
<script type="text/javascript" src="banner.js"></script>
</head>
<body>

<-- Bannervisning start -->
<script type="text/javascript">
ShowBanner();
</script>
<-- Bannervisning slut -->

<h1>På denne side roteres bannere</h1>
</body>
</html>