Partager l'article ! Créer une bannière rotative: Définition: Une bannière rotative est une bannière qui comporte au minimum 2 images qui sont affichées aléatoi ...
Catégories
Articles récents
Recommander
Dimanche 26 août 2007
7
26
/08
/Août
/2007
18:36
Définition: Une bannière rotative est une bannière qui comporte au minimum 2 images qui sont affichées aléatoirement à chaque chargement de la page.
1ère étape:
- Choississer votre première image, et héberger là sur un serveur ! Garder bien l'adresse de stockage de l'image 1 ...
- Choississer votre deuxième image, et héberger là sur le même serveur ! Garder bien l'adresse de stockage de l'image 2 ...
2eme étape:
Copier le code ci-dessous ... et mettez-y l'adresse de vos 2 images à l'emplacement indiqué. Tous les textes en rouges sont à modifier.
<BODY onload="loadrandomimage()">
<script language="JavaScript">
<!--
var randnum = (Math.round((Math.random() * 1 ) ));
var bannerlink = "adresse de stockage de l'image1"
var banlink = ""
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
links = new initArray(
"lien de direction quand on clique sur l'image1",
"lien de direction quand on clique sur l'image2"
)
images = new initArray(
"adresse de stockage de l'image1",
"adresse de stockage de l'image2"
)
alttext = new initArray(
"image1",
"image2"
)
function loadrandomimage() {
randnum = (Math.round((Math.random() * 1 ) ));
document.BannerAd.src=images[randnum]
document.BannerAd.alt=alttext[randnum]
bannerlink = links[randnum]
banlink.href=links[randnum]
}
// -->
</script>
<script language="JavaScript">
<!--
function changelink() {
location = bannerlink
}
function openWin() {
windowHandle = window.open(bannerlink,'windowName');
}
// -->
</script>
<a href="#" name="banlink" onclick="javascript:openWin()" ><img src="adresse de stockage de l'image1" name="BannerAd" alt="" ></a>
3eme étape:
Coller le code dans votre page HTML, et regarder le résultat !
Attention cependant à ce que le JavaScipt sois autorisé ! Ce qui n'est pas le cas sur Over-blog ...
1ère étape:
- Choississer votre première image, et héberger là sur un serveur ! Garder bien l'adresse de stockage de l'image 1 ...
- Choississer votre deuxième image, et héberger là sur le même serveur ! Garder bien l'adresse de stockage de l'image 2 ...
2eme étape:
Copier le code ci-dessous ... et mettez-y l'adresse de vos 2 images à l'emplacement indiqué. Tous les textes en rouges sont à modifier.
<BODY onload="loadrandomimage()">
<script language="JavaScript">
<!--
var randnum = (Math.round((Math.random() * 1 ) ));
var bannerlink = "adresse de stockage de l'image1"
var banlink = ""
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
links = new initArray(
"lien de direction quand on clique sur l'image1",
"lien de direction quand on clique sur l'image2"
)
images = new initArray(
"adresse de stockage de l'image1",
"adresse de stockage de l'image2"
)
alttext = new initArray(
"image1",
"image2"
)
function loadrandomimage() {
randnum = (Math.round((Math.random() * 1 ) ));
document.BannerAd.src=images[randnum]
document.BannerAd.alt=alttext[randnum]
bannerlink = links[randnum]
banlink.href=links[randnum]
}
// -->
</script>
<script language="JavaScript">
<!--
function changelink() {
location = bannerlink
}
function openWin() {
windowHandle = window.open(bannerlink,'windowName');
}
// -->
</script>
<a href="#" name="banlink" onclick="javascript:openWin()" ><img src="adresse de stockage de l'image1" name="BannerAd" alt="" ></a>
3eme étape:
Coller le code dans votre page HTML, et regarder le résultat !
Attention cependant à ce que le JavaScipt sois autorisé ! Ce qui n'est pas le cas sur Over-blog ...
merci beaucoup pour ce post extrêmement intéressant. J'ai essayé d'ajouter plus que 2 images et seulement 2 s'affiche.. Sauriez-vous pourquoi ?
Voici le code utilisé :