All HTML
All HTML, le Webzine du HTML
Accueil Aide Avis Awards Actu Ecrivez-moi !! Recherche Menu
Décoder
Langage
Balises
Multimédia
JavaScript
Plug-in
F.T.P.
Conseils
Lexique
Download
Créer
Outils
Services
Gifs
Contacter
Liens
Kiosque
Ecrivez-moi !!
Hits - Stats
  Hit-Parade
Retour JavaScript
Exemples JavaScript (image).


Voici quelques exemples de script. Vous pouvez faire un copier - coller pour les introduire dans votre page.

  1. 1 jour, 1 dessin
  2. Images aléatoires
  3. Images alternatives (rollover)
  4. Préchargez vos images


1 jour, 1 dessin.

Ce script permet d'afficher à chaque jour de la semaine une image différente. Attention vos images doivent se nommer 0.gif pour le premier jour (dimanche), 1.gif pour le deuxième (lundi), etc ... jusqu'à 6.gif (samedi). Exemple du script en supposant que vos images se situent dans le répertoire image, avec une dimension de 50 pixels sur 50 pixels.

<SCRIPT LANGUAGE="JavaScript">
<!--
now=new Date();
day=now.getDay();
document.write("<IMG SRC='image/" + day + ".gif' WIDTH=131 HEIGHT=18 ALT='Image aléatoire'>");
//-->
</SCRIPT>


[TOP]


Images aléatoires.

Ce script permet d'afficher à une image au hasard (ici parmi dix images). Attention vos images doivent se nommer 0.gif pour le première image... jusqu'à 10.gif pour la dernière image. Exemple du script en supposant que vos images se situent dans le répertoire gif, avec une dimension de 50 pixels sur 50 pixels.

Note : Attention avec Netscape définissez aussi une image avec le nom NaN (NaN : Not a Number).


<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<IMG SRC='gif/" + parseInt(Math.random()*10) + ".jpg' WIDTH=187 HEIGHT=233 ALT='Image aléatoire'>");
//-->
</SCRIPT>


[TOP]


Images alternatives (rollover).

Ce script permet de créer une image qui sera déformée au passage de la souris. Script à insérer entre les balises HEAD et /HEAD pour déterminer si le navigateur peut lancer le script (car problème sous I.Explorer 3.0).

<SCRIPT LANGUAGE="JavaScript">
<!--
function VersionNavigateur(Netscape, Explorer)
{
if ((navigator.appVersion.substring(0,3) >= Netscape && navigator.appName == 'Netscape') ||
(navigator.appVersion.substring(0,3) >= Explorer && navigator.appName.substring(0,9) == 'Microsoft'))
return true;
else return false;
}
//-->
</SCRIPT>


Balise <A HREF=" ... à insérer où vous le voulez. Ici l'image test1.gif sera remplacée par test2.gif lorsque la souris survolera l'image de défaut (test1.gif).

<A HREF="exima01.htm" OnMouseOver="if (VersionNavigateur(3.0,4.0)) img1.src='gif/test2.gif' " OnMouseOut="img1.src='gif/test1.gif' "><IMG NAME="img1" WIDTH=97 HEIGHT=52 BORDER=0 SRC="gif/test1.gif" OnLoad="tempImg=new Image(0,0); tempImg.src='gif/test2.gif'"></A>


[TOP]


Préchargez vos images.

Avec ce script vous pouvez préchargez vos images, c'est à dire les placer à l'avance dans le cache du navigateur. Exemple pour une image se nommant image1.jpg et se trouvant sur le même répertoire des fichiers HTML.

<SCRIPT LANGUAGE="JavaScript">
<!--
if (navigator.appVersion.substring(0,1)>=3)
{
i1=new Image;
i1.src='image1.jpg';
}
//-->
</SCRIPT>


[TOP]