Effets d'images

Mettre des images flottantes intéractives

Avoir plusieurs images qui se promènent sur la page d'un site, peut être interactif en y ajoutant des liens. Nous verrons cela plus bas. Commençons:

Étape 1:

Commencez par créer un répertoire sur votre bureau, nommez le "moveobjet".

Étape 2:

Télécharger le texte suivant: "moveobj.js" et le copier dans votre répertoire "moveobjet".

Étape 3:

Dans votre répertoire "moveobjet". Créez une page HTML avec le bloc note en la nommant : moveobj.html

Code HTML :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>
 
<body>
 
</body>
 
</html>

Étape 4:

Ajouter le texte suivant entre les balises <head>...</head> de votre page:

Code HTML :

 
<script type="text/javascript" src="/wiki/moveobj.js"> </script>
<script type="text/javascript">
 
/***********************************************
* Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)
* Modified by Dynamic Drive for various improvements
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2, flyimage3
 
function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
 flyimage1=new Chip("flyimage1",47,68);
 flyimage2=new Chip("flyimage2",47,68);
 flyimage3=new Chip("flyimage3",47,68);
 
 
//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");
 
}
 
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
 
</script>

Étape 5:

Ajouter le texte suivant entre les balises <body>...</body> de votre page, en dehors de toutes les autres balises. Il contient le code HTML utilisé pour afficher les images elles-mêmes:

* Pour bien faire mettez ces lignes juste avant la fermeture du body : </body>

Code HTML :

 
<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:19; height:19;">
<A HREF="http://easy-design.net"><IMG SRC="bee1.gif" BORDER=0></a>
</DIV>
 
<DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:19; height:19;">
<A HREF="http://easy-design.net"><IMG SRC="bee2.gif" BORDER=0></a>
</DIV>
 
<DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:19; height:19;">
<A HREF="http://easy-design.net"><IMG SRC="bee3.gif" BORDER=0></a>
</DIV>

Modifiez les href avec vos liens bien entendu. Enregistrez votre page HTML.

Étape 6:

Toujours dans le dossier "moveobj", téléchargez les 3 images suivantes en passant par le clic droit : "Enregistrer sous..."

Astuces & conseils :

Vous pouvez mettre un nombre illimité d'images flottantes en rajoutant et en changeant les ID="flyimage1"
Chaque image est identifiée dans l'ensemble du script avec le nom "flyimageX". Par exemple, la première image est appelée "flyimage1", le second "flyimage2", etc...

Rechercher dans les codes. Voici les codes modifiés sur L'étape 4.[ (exemple pour 6 Images):

Code HTML :

 
 
//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2, flyimage3,  flyimage4, flyimage5, flyimage6
 
function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
 flyimage1=new Chip("flyimage1",19,19);
 flyimage2=new Chip("flyimage2",19,19);
 flyimage3=new Chip("flyimage3",19,19);
 flyimage3=new Chip("flyimage4",19,19);
 flyimage3=new Chip("flyimage5",19,19);
 flyimage3=new Chip("flyimage6",19,19);

Procédez aussi à la multiplication des images et le changement de ID sur L'étape 5.
Et n'oubliez pas de rajouter les images manquantes.

Étape 1:

Étape 2:

Étape 3:

Étape 4:

Étape 5:

Étape 6:

Astuces & conseils :

Testez :