IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Décaler une image au survol de la souris


Sujet :

Survol d'un élément en CSS (:hover)

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    Août 2007
    Messages
    684
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2007
    Messages : 684
    Points : 153
    Points
    153
    Par défaut Décaler une image au survol de la souris
    Bonjour à tous,

    Ce que le source fait :
    - Un RollOver sur l'image
    - Au click, appel d'un lien
    - Au survol de l'image curseur (Main)

    Ce que je voudrais en plus, c'est qu'au survol de l'image,
    celle-ci se déplace de 30 pixels sur la droite et revenir
    a sa place d'origine quand plus de survol.

    N'y arrivant pas avec le CSS, le JavaScript pourai
    peut être le faire.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <style type="text/css">
    #bouge:hover
    {
     margin-left: 30px;
    }
     
    #bouge
    {
     cursor:pointer; 
    }
     
    </style>
    </head>
    <body>
     
    <table border="1" width="382" cellpadding="0" style="border-collapse: collapse" height="23" bordercolor="#0000FF">
    <tr onClick="parent.frames['bas_droite'].location.replace('menu.php')">
    <td bordercolor="#0000FF"><img id="bouge" border="0" onmouseover="this.src='../images/mg2-01-c.gif'" src="../images/mg2-01-f.gif"
    alt=" Avec lien mais ne décale pas a droite."
    onmouseout="this.src='../images/mg2-01-f.gif'"></a>
    </td></tr>
    </table>
    </body></head>
    Je ne sais pas si cela est faisable,
    et si oui, comment ?

  2. #2
    Membre émérite Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Points : 2 589
    Points
    2 589
    Par défaut
    Sauf erreur de ma part, pour que cela fonctionne via CSS, il faut :
    • Passer l'image en display:block; (de base en inline)
    • Lui donner une taille
    • Appliquer le margin-left:30px;


    Pour apprendre facilement CSS regarde ces excellents tutoriels et cours de formation CSS : http://css.developpez.com/cours/

  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    Août 2007
    Messages
    684
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2007
    Messages : 684
    Points : 153
    Points
    153
    Par défaut
    Bonjour HiRoN,

    J'ai modifié, mais le décalage s'applique tout de
    suite mème sans survol !
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    #bouge
    {
     display:block;
     cursor:pointer; 
     margin-left: 30px;
    }

  4. #4
    Membre émérite Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Points : 2 589
    Points
    2 589
    Par défaut
    Citation Envoyé par malabarbe Voir le message
    J'ai modifié, mais le décalage s'applique tout de
    suite mème sans survol !
    A ne mettre que sur le hover... (attention pour ie6 qui ne gère le hover que sur un <a>)

    Il me semble que dans ton cas, une construction plus propre aurait été :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <table>
    <tr>
    <td>
    <a href="" title="">
    <img src ... />
    </a>
    </td>
    </tr>
    </table>

  5. #5
    Membre habitué
    Profil pro
    Inscrit en
    Août 2007
    Messages
    684
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2007
    Messages : 684
    Points : 153
    Points
    153
    Par défaut
    Ok,

    Mais je ne veut pas employer le href

    Une autre solution ?

  6. #6
    Membre émérite Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Points : 2 589
    Points
    2 589
    Par défaut
    Citation Envoyé par malabarbe Voir le message
    Une autre solution ?
    La même sans le <a>... (mais ne fonctionneras pas sous ie6, ou avec un correctif genre hover:whatever)

  7. #7
    Membre habitué
    Profil pro
    Inscrit en
    Août 2007
    Messages
    684
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2007
    Messages : 684
    Points : 153
    Points
    153
    Par défaut
    J'ai regardé correctif genre hover:whatever

    Mais, je n'y comprends rien !

    Comment l'adapter a mon code ?

  8. #8
    Membre émérite Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Points : 2 589
    Points
    2 589
    Par défaut
    Citation Envoyé par malabarbe Voir le message
    Comment l'adapter a mon code ?
    Il suffit de récupérer le fichier csshover3.htc et de le placer sur ton site (à la racine par exemple) et de mettre dans ton CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    * html body { behavior:url(csshover3.htc); /* Voir même juste sur body */ }
    Mais il y a d'autre façon de l'implémenter...

  9. #9
    Membre habitué
    Profil pro
    Inscrit en
    Août 2007
    Messages
    684
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2007
    Messages : 684
    Points : 153
    Points
    153
    Par défaut
    Bonsoir HiRoN,

    Je n'ai pas réussi
    D'après les nombreuses infos que j'ai consultées,
    c'est un vrai pannier de crabes.

    Comme quoi une piste en amène sur une autre,
    j'ai trouvé un moyen simple qui sera compris par
    tous les navigateurs du monde !!!

    J'ai simplement ajouté un blanc transparant a gauche
    en plus de mon image au survol et cela tourne Nikel.

    Un grand merci pour tous vos conseils

    @ +

  10. #10
    Membre émérite Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Points : 2 589
    Points
    2 589
    Par défaut
    Citation Envoyé par malabarbe Voir le message
    J'ai simplement ajouté un blanc transparent a gauche en plus de mon image au survol et cela tourne Nikel.
    Mais le hover ne passera pas sous ie6 (vu qu'il ne gère le hover que sur la balise <a>)...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CSS 3] Apparence d'une image à son survol par la souris
    Par findjo dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 09/04/2015, 20h53
  2. Réponses: 2
    Dernier message: 20/04/2010, 13h56
  3. changer d'image au survol de la souris sur une zone
    Par ced-46 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 31/12/2009, 15h50
  4. Décaler une image au survol de la souris
    Par malabarbe dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 28/08/2009, 14h43
  5. Réponses: 4
    Dernier message: 12/06/2008, 18h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo