Passer au contenu

Insérez un bouton animé dans une page Web

Vous trouvez que certaines pages de votre site Web manquent d’animation. Pourquoi ne pas les égayer en créant un effet animé sur les images ? Par…

Vous trouvez que certaines pages de votre site Web manquent d’animation. Pourquoi ne pas les égayer en créant un effet animé sur les images ? Par exemple : dès que le pointeur de la souris passe sur une image, celle-ci se modifie, et dès qu’il s’éloigne, elle reprend son aspect d’origine. Dans FrontPage, cet effet s’obtient avec le bouton sensitif. Nous vous conseillons de bien vérifier les paramètres Internet (étape 1) avant de créer le bouton, sinon l’effet ne fonctionnera pas
Patricia Frein (Carm2i)

Etape 1 : Vérifiez les paramètres Internet

1 Enregistrez les images dans un dossier que vous aurez créé dans le dossier contenant toutes les pages Web de votre site et nommé Images. Nommez-les Image 1 et Image 2, par exemple.2 Ouvrez Internet Explorer et choisissez, dans le menu Outils, la commande Options Internet.En haut de la fenêtre, cliquez sur l’onglet Avancé et cochez toutes les cases qui se situent dans la partie Microsoft VM :3 Toujours dans cet onglet, vérifiez que la partie Java (Sun) existe. Si c’est le cas, cochez la casePuis passez à l’étape 2 pour créer le bouton sensitif.Si ce n’est pas le cas, passez au point suivant.4 Si le langage Java recherché n’existe pas, téléchargez-le à l’adresse suivante : www.java.com/fr/down-load/manual.jspUne fois l’installation terminée, relancez Windows. Et effectuez de nouveau le point 3 ci-dessus.

Etape 2 : Créez le bouton animé

1 Ouvrez la page Web dans laquelle le bouton animé doit apparaître et, dans le menu Insertion, choisissez Composant Web.2 Dans la zone Type de composant, cliquez sur Effets dynamiques.Puis, dans la zone Choisir un effet, cliquez surCliquez ensuite sur le bouton Terminer.3 Dans la fenêtre qui apparaît, le logiciel propose par défaut un bouton avec du texte. Supprimez dans la zone Texte du bouton, le nom déjà tapé, et laissez-la vide. Puis cliquez sur le bouton Personnaliser.4 Dans la partie Image personnalisée, choisissez les images qui composent le bouton animé.Pour la première image, cliquez sur Parcourir à droite de la zone Bouton. Recherchez l’image, puis cliquez sur son nom, ici Image 1, et sur Ouvrir.Pour la seconde image, cliquez sur Parcourir à droite de la zone Au survol. Recherchez l’image, puis cliquez sur son nom, ici Image 2, et sur Ouvrir. Cliquez sur le bouton OK et à nouveau sur le bouton OK.5 Il est possible que l’image ne soit pas à la bonne taille :Si c’est le cas, placez le pointeur sur la poignée située en bas à droite :Effectuez un cliquer-glisser en diagonale vers l’extérieur de l’image pour l’agrandir.

Etape 3 : Enregistrez et vérifiez

1 Enregistrez les modifications effectuées dans la page en choisissant, dans le menu Fichier, l’option Enregistrer.2 Pour vérifier si le bouton fonctionne, choisissez dans le menu Fichier l’option Aperçu dans le navigateur.Dans la page Web, placez le pointeur sur l’image : la seconde image apparaît à la place de la première. Déplacez le pointeur à l’extérieur de l’image pour afficher de nouveau la première.3 Maintenant, vous pouvez publier la page Web sur votre site sans oublier d’intégrer les images et les fichiers fphover.class et fphoverx.class

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.


La rédaction