City Hunter
Utilisateur : anonyme   Vendredi 18 Octobre 2019 
     
Provenance géographique des visiteurs


SOFUN - Blog, article : Roll-Over à 10000 Yen dimanche 06 novembre 2005 - 16:56
Roll-Over à 10000 Yen


 
J'ai pu constater dernièrement sur les blogs environnants que la question sur la mise en place d'un roll-over intéresse quelques personnes.
Voici donc un petit article pour détailler ce procédé.

D'abord, nous mettons en place notre image de base :

<img src="http://mon.serveur.fr/.../image1.jpg">


Cette image va devoir ensuite être capable de détecter le passage de la souris. Pour cela, nous disposons de deux événement, onMouseOver et onMouseOut, qui sont solicités lorsque le curseur de la souris entre et sort de la zone image.

L'utilisation de ces deux événements est assez simple :
  • onMouseOver="action1"
  • onMouseOut="action2"
    action1 va permettre de faire afficher la nouvelle image et action2 va permettre de faire afficher l'image initiale.

    Bon, j'espère que je ne vais pas embrouiller les esprits.

    Les deux instructions vont donc ressembler à ça :
  • onMouseOver="this.src='http://mon.serveur.fr/.../image2.jpg'"
  • onMouseOut="this.src='http://mon.serveur.fr/.../image1.jpg'"

    Afin d'éviter toute mauvaise surprise, il faut bien faire attention d'encadrer les deux URLs de simples guillemets (apostrophes) pour ne pas causer de problème avec les doubles guillemets qui encadrent l'action.

    Il ne reste plus qu'à intégrer les deux événements à l'intérieur même de la balise permettant l'affichage de l'image :
    <img src="http://mon.serveur.fr/.../image1.jpg" onMouseOver="this.src='http://mon.serveur.fr/.../image2.jpg'" onMouseOut="this.src='http://mon.serveur.fr/.../image1.jpg'">

    Bien entendu, il est préférable d'éviter le s retours à la ligne.

    Pour mon exemple concrêt, voici ce que ça donne :

    <img src="http://so.fun.free.fr/modules/blog/photos/10000yen_face1.jpg" width="400" onMouseOver="this.src='http://so.fun.free.fr/modules/blog/photos/10000yen_face2.jpg'" onMouseOut="this.src='http://so.fun.free.fr/modules/blog/photos/10000yen_face1.jpg'" border="3">


    Je pense qu'il s'agit de la plus simple manière de faire car elle ne nécessite pas l'appel de fonctions.
    J'espère que cela vous sera utile.
  •  
    publié par Forrest
    Ajouter un commentaire

    Voir les commentaires (23)





    Nombre de surfeurs égarés en ce moment : 8
    SOFUN - Le Site Où il Fallait Un Nom