Comment bouger une image en 3D en Javascript ?

 

par meltech1 |

     
Comment bouger une image en 3D en Javascript ?

Si vous avez sur votre site Internet une image que vous souhaitez déplacer en 3D, c'est-à-dire dans plusieurs positions dans votre site Internet alors ce programme est fait pour vous. En effet votre image va se déplacer sur différentes positions sur votre site Internet. Voici comment faire avec cet article.

Quelles sont les fournitures nécessaires ?

  • Une image
  • Internet Explorer
  • Logiciel Bloc Notes

Étapes de réalisation

1.

Commencez par ouvrir votre site Internet avec le logiciel Bloc Notes pour en obtenir le code source. C'est dans ce programme qu'il va falloir insérer ce qui suit. Veuillez trouver la balise <head>.

2.

Dans la balise <head> veuillez insérer ce script :
<script type="text/javascript">
var ph=100;// position horizontale de départ
var ph2=600;// position horizontale maximale
var pv=20;// position verticale de départ
var pv2=100;// position verticale maximale
var dh=2;// déplacement horizontal
var dv=1;// déplacement vertical
var delai=10;// délai du timer
function bouge() {
var ex=document.getElementById('cobaye');
if (ph < ph2){ex.style.left=(ph+=dh)+"px"}
else if (ph2 > 100){ex.style.left=(ph2-=dh)+"px";}
else{ph=100;ph2=600};
if (pv < pv2){ex.style.top=(pv+=dv)+"px"}
else if (pv2 > 20){ex.style.top=(pv2-=dv)+"px";}
else{pv=20;pv2=100};
setTimeout (bouge,delai)
}
window.onload = bouge;
</script>

3.

Ensuite veuillez trouver la balise <body> et y insérer le script suivant :
<div id="cobaye" style="left:100px;top:20px;color:lime;text-align:center;position:relative;width:100px">
<p>waouh! ça bouge en 3D</p>
<img src="image.gif" alt="image" />
</div>

4.

Pour terminer enregistrez le tout avec Bloc Notes et ouvrez IE. Vous remarquez que votre image maintenant se déplace en 3D sur votre site Internet.

Astuces et mises en garde

Astuce(s) :

Cela peut vous servir pour animer un site Internet.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on