Définition: Celà permet de créer des boutons qui affiche une image en période de repos, une autre image quand il y a la souris dessus, et aussi une image différente quand on
clique dessus
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 ...
- Choississer votre troisième image, et héberger là sur le même serveur ! Garder bien l'adresse de stockage de l'image 3 ...
Vous pouvez avoir 2 images identiques !
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.
<!-- Add this code to the <HEAD> </HEAD> section. -->
<script LANGUAGE="JavaScript">
Image1 = new Image();
Image1.src = 'adresse de stockage de l'image1';
Image2 = new Image();
Image2.src = 'adresse de stockage de l'image2';
Image3 = new Image();
Image3.src = 'adresse de stockage de l'image3';
function changeimage(imagenum,newfilename)
{
document.images[imagenum].src=newfilename;
}
</script>
<!-- End of header section -->
<!-- Add this code to the <BODY> </BODY> section. -->
<A HREF="adresse de direction"
onMouseOver="changeimage('aa170','adresse de stockage de l'image2');"
onMouseOut="changeimage('aa170','adresse de stockage de l'image1');"
onClick="changeimage('aa170','adresse de stockage de l'image3');"
><IMG src="adresse de stockage de l'image1" name=aa170 border="0"></A>
<!-- End of body section -->
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 ...
Cependant, il existe un deuxième code HTML, et qui ne nécessite pas le JavaScrip ^^
<a href="adresse de direction"><img name="bouton" src="adresse de stockage de l'image1" alt="" onmouseout=
"document.bouton.src='adresse de stockage de l'image2''"
onmouseover="document.bouton.src='adresse de stockage de l'image2''" id="bouton" /></a>
Voilà un exemple de rendu:
Par Sprite
-
Publié dans : Tutoriaux
1
-
Recommander
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 ...
Par Sprite
-
Publié dans : Tutoriaux
1
-
Recommander
