28112 sujets

CSS et mise en forme, CSS3

Remplacement d'une image au survol

Salut,

Petit débutant que je suis, je cherche à remplacer une image pas une autre au survol de la souris en css. J'ai essayé le tuto d'Emmanuel B. (http://www.emmanuelbeziat.com/blog/changer-une-image-au-survol/) mais ça ne fonctionne pas, je pense que ça ne fonctionne qu'avec les div, problème mon image n'est pas dans une div. Je ne peu pas modifier le code html car c'est la partis d'un autre développeur, moi je ne m'occupe que du css.

Voici le code html : 

<img class="image_astre" src="images/astre/lune.png">


Voila le code css que j'ai fait à partir du tuto : 

.image_astre { 
display: inline-block;    
        position:relative;
        bottom:  80px;
        right: 120px;
    }
      
    .image_astre {
display: inline-block; 
        background: url(../images/astre/soleil.png);
        background-repeat: no-repeat;
    }
      
    .image_astre:hover {
        visibility: hidden;
    }


L'image clignote au passage de la souris et celle du background n'apparaît pas.

J'ai aussi essayé ce code :

.image_astre {     
        position:relative;
        bottom:  80px;
        right: 120px;
    }
     
    .image_astre {
        background: url(../images/astre/soleil.png);
        background-repeat: no-repeat;
    }
     
    .image_astre:hover {
        opacity: 0;
    }


Ce coup ci l'image disparaît bien mais celle du background n'apparaît pas non plus.

Voila trois jours que je suis dessus, donc j’espère, que dis-je, je prie pour avoir une piste qui fonctionne. Merci
connecté
Modérateur
Bonjour,

Effectivement tu ne pourras pas modifier l'image comme ca s'il s'agit d'une balise <img>.
En effet tu tente de modifier le background de l'élément donc derrière l'image. Pour utiliser cette technique il faut que l'image soit en background et qu'en css tu change ce background au survol.

EDIT : quelques options

- Tu demandes a ton collègue de changer le code html pour mieux coller a tes besoins
- Au hover tu fais "apparaitre" ta seconde image par dessus avec un pseudo élément ::before ou ::after
- Faire de lune.png une image transparente et tu insère les backgrounds derrières (mais c'est tellement moche que j'ai hésité a te le proposer !)
Modifié par _laurent (30 Jul 2014 - 11:06)
Merci. Pour le coup je pense que je vais demander au collègue de changer son code html (ça ne va pas lui plaire, mais bon). Je dois donc lui demander de placer l'image dans une div ?
connecté
Modérateur
mmmmmh j'allais te dire qu'une div avec une class allait suffire mais le fait d'afficher une image en dehors d'une balise <img> soulève des problématiques récurrentes de sémantique etc...

Je n'avais pas vu l'article que tu as suivi, il propose un compromis pas trop moche entre hover et garder une balise img effectivement. Donc si tu veux faire ce qu'il conseille il te faut un conteneur <div> ou <a> si l'image est un lien comme dans son exemple.
Modifié par _laurent (30 Jul 2014 - 11:16)
Arrh ! Voila tout le problème, mon image n'est pas un lien et ne le sera pas. C'est une jute une image qui va subir deux changement au passage de la souris, la lune de base, le soleil au survol et un nuage au clic (c'est un site sur la météo).

L'image de base le Lune est déclaré en html et je dois me débrouillé avec ça. Je vais donc voir avec le développeur il peu créer une div juste pour une image, ce qui est dommage, mais bon, pas le choix je crois.
connecté
Modérateur
Ha et tu t'es attaqué au clic ?! Smiley lol
Parce que en full CSS tu vas ramer aussi !

Le plus simple sinon ça serait du coup de passer par du javascript (j'ai pas dit JQuery j'ai dit javascript hein) qui pourra changer le src de la balise img dynamiquement au survol et au clic ! Smiley murf
Modifié par _laurent (30 Jul 2014 - 11:31)
Je vais ramer, ça promet Smiley bawling

Javascript, euh, là le dév va dire non, c'est clair. Il travaille exclusivement html/php et il a encore pas mal de boulot donc je pense que ce n'est même pas la peine de lui demander.

Sinon, j'ai fait un test en mettant le code html de l'image entre une div :
<div id="astres">.................<div>


Et ça fonctionne. Je ne trouve pas super de d'avoir une div juste pour une image mais bon là c'est inévitable. Concernant le clic et bien je ne sais pas, comme je débute en css je vais découvrir ça. Mais si le code est entre une div le clic dois se faire tout comme pour le hover, non ?!
Modifié par Kazuya76 (30 Jul 2014 - 11:42)
_laurent a écrit :
Ha et tu t'es attaqué au clic ?! Smiley lol
Parce que en full CSS tu vas ramer aussi !
Le plus simple sinon ça serait du coup de passer par du javascript (j'ai pas dit JQuery j'ai dit javascript hein) qui pourra changer le src de la balise img dynamiquement au survol et au clic ! Smiley murf
Smiley jap
Ce ne sont a priori pas des images décoratives si j'en crois ton discours, elles n'ont donc rien à faire dans une feuille de styles.
JavaScript est donc LA solution pour produire ce changement d'état.
Le mieux serait de nous montrer une page d'exemple en ligne que l'on comprenne bien et sans équivoque, de quoi il retourne Smiley cligne
Mais a priori, l'image reste dans le code HTML, le survol et/ou le clique se font grâce à JavaScript.

Bon courage.
Kazuya76 a écrit :
Je vais ramer, ça promet Smiley bawling
Javascript, euh, là le dév va dire non, c'est clair. Il travaille exclusivement html/php et il a encore pas mal de boulot donc je pense que ce n'est même pas la peine de lui demander.

Si tu t'occupes de l'intégration, ce n'est pas son boulot, c'est le tien, d'ailleurs, sauf contraintes particulière, le code HTML devrait également être de ton fait.
Kazuya76 a écrit :

Sinon, j'ai fait un test en mettant le code html de l'image entre une div :
<div id="astres">...............</div>

Et ça fonctionne. Je ne trouve pas super de d'avoir une div juste pour une image mais bon là c'est inévitable. Concernant le clic et bien je ne sais pas, comme je débute en css je vais découvrir ça. Mais si le code est entre une div le clic dois se faire tout comme pour le hover, non ?!

De l'utilité de l'usage d'un conteneur supplémentaire il doit être possible de discuter, mais sans voir une page d'exemple, c'est difficile.
Encore une fois, cela doit théoriquement se faire via JavaScript, ce n'est pas le travail de CSS (à moins que ce ne soit juste qu'un effet décoratif, mais sur un site de météo, j'en doute)

Bon courage.
connecté
Modérateur
Amen a tout ce qu'a dit 6|20 ! Smiley smile

Kazuya76 a écrit :
Mais si le code est entre une div le clic dois se faire tout comme pour le hover, non ?!

Le CSS ne gère pas un changement d'état au clic. Le seul moyen de le faire c'est en Js.
Modifié par _laurent (30 Jul 2014 - 11:58)
Bon et bien après discussion avec le dév l’utilisation outrancière de la div est voté Smiley fache .Concernant le changement d'état au clic je verrais avec lui ce que l'on peu mettre en place, quelque chose de propre surtout.

Dans tout les cas merci beaucoup pour votre coup de main et vos conseils avisés. Ca fait plaisir de voir qu'il y a encore des programmeurs avec une âmes charitable dans ce monde. Merci Smiley cligne
Sujet clos
Aller à