animation lorsque on passe la souris sur une image ??

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

madtom
Arias
Messages : 13
Inscription : 01 mars 2012, 19:47

animation lorsque on passe la souris sur une image ??

Message par madtom »

Bonjour,
j'aimerai savoir s'il était possible de faire apparaitre un image différente de celle qui est en place sur une page internet lorsque le curseur passe dessus.
J'utilise Kompozer et n'ai pas encore trouver le moyen pour arriver à mes fins, si cela est possible comment svp ?

Merci beaucoup
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: animation lorsque on passe la souris sur une image ??

Message par Ymai »

Bonjour
A priori, la solution la plus simple passe par un peu de CSS.
C'est décrit là, par exemple: http://css.mammouthland.net/boutons-en-css-rollover.php
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
madtom
Arias
Messages : 13
Inscription : 01 mars 2012, 19:47

Re: animation lorsque on passe la souris sur une image ??

Message par madtom »

Ymai a écrit :Bonjour
A priori, la solution la plus simple passe par un peu de CSS.
C'est décrit là, par exemple: http://css.mammouthland.net/boutons-en-css-rollover.php
Merci beaucoup !
madtom
Arias
Messages : 13
Inscription : 01 mars 2012, 19:47

Re: animation lorsque on passe la souris sur une image ??

Message par madtom »

Votre lien m'a mis sur la bonne voie mais le problème c'est que je n'utilise pas de bouton dans ce cas là mais d'image et je n'arrive pas a transposé le code pour qu'il fonctionne avec une image, pouvez-vous m'aidez un peu plus svp ?

Merci beaucoup
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: animation lorsque on passe la souris sur une image ??

Message par Ymai »

Re-bonjour
madtom a écrit :Votre lien m'a mis sur la bonne voie mais le problème c'est que je n'utilise pas de bouton dans ce cas là mais d'image
Effectivement, la solution que je pointais n'utilise pas des boutons mais des images. Elles sont appelées "boutons", mais n'en sont pas au sens du HTML.
On y utilise un bloc

Code : Tout sélectionner

<div class="bouton">
  <p><a href="#">Bouton</a></p>
 </div>
dont l'arrière plan est une image en forme de "bouton".
Peut-être faut-il cibler la recherche de la solution du côté de l'exploration des CSS.
Là, on propose deux images différentes (l'une est gris foncé, l'autre est noire-clair) pour le même objet. L'un est exposé quand la souris survole la zone, l'autre est exposé dans tous les autres cas.
Voilà l'idée qu'il faut choper.
Ça a peut-être l'air compliqué, mais quand on a compris, c'est d'une limpidité affolante. C'est comme rouler à vélo.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
madtom
Arias
Messages : 13
Inscription : 01 mars 2012, 19:47

Re: animation lorsque on passe la souris sur une image ??

Message par madtom »

Bonjour, malgré tout je n'arrive toujours pas a faire ce que je veux... je n'arrive pas à m'y retrouvé dans mes codes html, voila le code de la cellule avec l'image si vous savez y jetter un oeil et me dire ce que je peux en faire pour arriver à mes fins cela m'aiderai énormément, merci.

voila le code : <th style="vertical-align: middle; height: 100%; width: 12%; text-align: center; color: black; white-space: nowrap; background-color: white;"><img style="width: 100%; height: 30px;" alt="" src="../Images/Menu/LB2.jpg" align="middle"><br>
</th>
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: animation lorsque on passe la souris sur une image ??

Message par Ymai »

Bonjour
Comme je l'indiquais précédemment, il n'y a pas d'image dans le code source HTML

Code : Tout sélectionner

<div class="bouton">
      <p><a href="#">Bouton</a></p>
    </div>
Tout se passe en CSS.
À mon sens, sauf à faire appel à du Javascript (solution vraiment pas plus simple), il faut vraiment aller se frotter à la méthode qui utilise CSS.
Avec les explications qui sont là: http://info.sio2.be/kpz/4/1.php et l'adresse donnée plus haut, tout devrait se clarifier.
Mais il n'est pas possible de refaire toute l'explication ici. Par contre, il est souvent possible de lever une difficulté sur un point de détail.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités