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 :

Problème d'affichage : image hover


Sujet :

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

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Février 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 27
    Par défaut Problème d'affichage : image hover
    Bonjour à tous,

    J'ai une question bête,

    Je voudrais que lorsque l'on passe le curseur sur mon image (qui est un lien), celle ci change pour affichier une autre image.

    J'ai essayé sur une page "bidon" ici : http://funkybearz.com/series/index2.html

    Tout le code est dispo en affichant la source ou tout tiens simplement ici :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <html>
    <head>
    <title>HuReeKo signs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <style type="text/css">  
    a.heures:hover 
    img { 	background: url(http://funkybearz.com/series/img/24heures2.jpg); } 
    </style>
    <div class="heures">
    <a href="http://funkybearz.com"><img src="http://funkybearz.com/series/img/24heures.jpg" border="0" /></a>
    </div>
    Je voudrais savoir ou j'ai fait une erreur car l'image "hover" ne s'affiche pas

    Merci de votre aide

  2. #2
    Membre éclairé Avatar de mLk92
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    527
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 527
    Par défaut
    salut, tu as je pense mal écris ta déclaration de style, peut etre comme ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    .heures a:hover{ background: couleur url(' ...') no-repeat; }
    Vu la déclaration que tu as faites, tu devrais revoir les notions de CSS et voir comment les propriétés CSS sont généralement déclarées.

    voir ces sites:

    www.developpez.com
    www.w3schools.com/css/default.asp

    Bon courage

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Février 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 27
    Par défaut
    C'est gentil pour les sites mais ça va j'ai pourtant de bonnes notions en css, j'ai déclaré ma classe un peu à l'arrache c'est vrai.

    Je vais essayer ta solution mais justement je l'avais déja essayé de cette manière il me semble.

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Février 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 27
    Par défaut
    C'est étrange, cela ne fonctionne toujours pas :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <html>
    <head>
    <title>HuReeKo signs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <style type="text/css">  
    .heures a:hover{ background: #FFF url('http://funkybearz.com/series/img/24heures2.jpg') no-repeat; }
    </style>
    <div class="heures">
    <a href="http://funkybearz.com"><img src="http://funkybearz.com/series/img/24heures.jpg" border="0" /></a>
    </div>

  5. #5
    Membre éclairé Avatar de mLk92
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    527
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 527
    Par défaut
    Tu as de la chance, j'avais mon bouquin Css avec moi, voici comment déclarer une image réactive (un lien image donc):

    code hmtl:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a class='image' href='..' alt='..'></a>
    code Css:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    a.image {
      display: block;
      width: ..;
      height: ..;
      background: url(...) no-repeat 0 0;
    }
     
    a.image:hover{
      background-image: url(..);
    }
    En espérant que ça t'aide.

  6. #6
    Membre éclairé Avatar de mLk92
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    527
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 527
    Par défaut
    Tes balises <style></style> doivent être déclaré entre les balise <head></head> et non <body></body>.

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Février 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 27
    Par défaut
    Ah oui c'est pas con pour les balise style

    Merci pour ton aide en tout cas, j'essaie ça dessuite, mais il n'y a plus de raison que ça ne marche pas, merci à toi

  8. #8
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Par défaut
    Salut,

    Pour aller un peu plus loin, tu peux aussi faire une seule image réunissant tes deux images initiales
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    +-------------+
    |      1      |
    +-------------+
    |      2      |
    +-------------+
    pour l'exemple, on va dire que chaque zone de l'image fait 100px*50px (donc l'image que tu utiliseras fera 100px*100px)
    puis:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    a.image {
      display: block;
      width: 100px;
      height: 50px
      background: transparent url(...) left top no-repeat;
    }
     
    a.image:hover{
      background-position: left -50px;
    }
    l'interêt?
    Comme tu n'as qu'une image, tu n'auras pas de temps de latence lors du survol car l'image sera entièrement chargée. Si tu utilises deux images, le chargement de l'image pour le survol n'aura lieu que lors du survol.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

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

Discussions similaires

  1. Problème d'affichage image
    Par mouss4rs dans le forum Balisage (X)HTML et validation W3C
    Réponses: 12
    Dernier message: 04/02/2012, 14h58
  2. Problème d'affichage images
    Par L1011 dans le forum Word
    Réponses: 2
    Dernier message: 16/02/2009, 14h31
  3. Problème d'affichage Image
    Par mappy dans le forum ASP.NET
    Réponses: 3
    Dernier message: 26/06/2008, 22h28
  4. problème d'affichage image
    Par Invité dans le forum AWT/Swing
    Réponses: 6
    Dernier message: 03/06/2008, 10h08
  5. Probléme d'affichage image d'empreinte
    Par usto2005 dans le forum Powerpoint
    Réponses: 1
    Dernier message: 26/05/2008, 19h53

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