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 :

Comment remplacer une image par une autre au survol de la sourie ?


Sujet :

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

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    40
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Janvier 2008
    Messages : 40
    Points : 39
    Points
    39
    Par défaut Comment remplacer une image par une autre au survol de la sourie ?
    Bonjour,
    tout d'abord voici mon code css:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    img.accueil:hover
     {
     background: images2/accueil_cadre.jpg;
     border: 0;
     }
    puis mon code html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="register.html"><img class="accueil" src="images2/accueil.gif"></img></a>

    Or, ça ne marche pas. J'ai beau chercher je voit pas pourquoi ça ne marche pas
    quelqu'un pourrait il me dire pourquoi ?
    Je ne veut pas le faire en Javascript.

  2. #2
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    Au moins un problème de syntaxe:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    background: url(images2/accueil_cadre.jpg)
    Ensuite tu oublies les attributs de base minimum pour ton image:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img class="accueil" src="images2/accueil.gif" alt="Accueil" height="100" width="100" />
    Les alt correspond au texte alternatif qui sera visible en cas d'image non
    chargée pour une raison ou une autre, d'autre part celui-ci sera indéxable par les moteurs de recherche, accessible aux non voyant, etc.
    Si l'image est décorative et n'apporte aucune information mettre alt="".

    Toujours préciser la taille de tes images pour les petits écrans (PDA; smartphone...)

  3. #3
    Membre averti Avatar de htr999
    Profil pro
    Étudiant
    Inscrit en
    Février 2008
    Messages
    331
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2008
    Messages : 331
    Points : 394
    Points
    394
    Par défaut
    voir lien
    a+

  4. #4
    Nouveau membre du Club
    Inscrit en
    Mai 2008
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Mai 2008
    Messages : 25
    Points : 29
    Points
    29
    Par défaut code qui permet de modifier deux images tout en les ajustant par rapport à la page
    fichier html

    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
    28
    29
    30
    31
    32
    33
    34
     
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="synthese.css"> 
    </head>
     
    <body>
    <div> <a class="image" title="salut" href='page2.htm'></a></div>
    </body>
     
     
    </html>
     
    fichier synthése.css
     
    .image {
         width: 100px;
    	 height: 100px;
    }	  
    a.image {
         position:absolute;   
         display: block;
    	 top:230px;
    	 left:260px;
     
         background-image: url("img/heures1R.png");
         background-repeat: no-repeat;
    	 }
     
    a.image:hover {
                   background-image: url("img/heures1B.png");
    			  }

  5. #5
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 51
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    Citation Envoyé par alone Voir le message
    Or, ça ne marche pas. J'ai beau chercher je voit pas pourquoi ça ne marche pas
    quelqu'un pourrait il me dire pourquoi ?
    Tu attribues une image de fond à ton image, normal qu'on ne la voit pas puisqu'elle est cachée par ton image
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

Discussions similaires

  1. [Débutant] Comment remplacer un chiffre par une image
    Par jackdos dans le forum VB.NET
    Réponses: 10
    Dernier message: 08/05/2015, 15h32
  2. [Débutant] Manipulation d'images : intégrer une image dans une image
    Par noscollections dans le forum VB.NET
    Réponses: 2
    Dernier message: 17/10/2014, 12h51
  3. [FAQ] Comment remplacer une image par une autre lors du passage de la souris ?
    Par Invité dans le forum Contributions JavaScript / AJAX
    Réponses: 2
    Dernier message: 03/03/2013, 23h48
  4. Remplacer une image par une autre
    Par verbose dans le forum Wicket
    Réponses: 19
    Dernier message: 11/05/2011, 02h02
  5. Afficher / Remplacer une image par une autre
    Par dolf13 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/02/2007, 20h52

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