Sujet Précédent Sujet Suivant

Changer d'image au survol

Fermé
juju - Modifié le 10 juil. 2017 à 11:42
 juju - 13 juil. 2017 à 17:31
Bonjour,

Comment allez-vous ?

Je viens vous voir car j'ai un problème sur mon site Jimdo, voilà j'aimerais qu'au survol de la souris, l'image sur laquelle je me trouve change, pour inviter l'utilisateur à cliquer...
comme par exemple l'affichage d'une autre image avec du texte : "CLIQUER ICI"


J'ai testé un bon moment de faire des manip en CSS mais je n'arrive vraiment pas à ajouter le bon bout de code.

J'ai parcouru pas mal de forum donnant comme solution l'utilisation de 
a:hover {
ou de 
onmouseover="this.src='IMAGEHOVER.png'" onmouseout="this.src='IMAGE.png

Mais je ne sais pas comment faire pour l'appliquer à mon website :/

voici la partie de mon code sur laquelle je veux changer l'image au survol: 

<div class="cc-m-gallery-stack-item" id="gallery_thumb_4570743062" data-sort="1" style="margin-bottom: 7px;">
            
<a href="/départements/bouches-du-rhône-13/" rel="nofollow noopener noreferrer" target="_blank">    <img src="blabla.jpg" data-orig-width="1920" data-orig-height="1275" alt="blabla" style="height: 227px;">
</a>        
</div>


Si vous pouviez m'aider je vous en serai très reconnaissant :)

Cordialement.


ps : je viens d'essayer des bouts de code comme : 

#gallery_thumb_4570742962 a { background-image:url(https://image.jimcdn.com/app/cms/image/transf/dimension=682x2048:format=jpg/path/s720532a5ff7f8ce4/image/icb1129b6a2b21fd8/version/1498904612/image.jpg) no-repeat ;}
                        #gallery_thumb_4570742962 a:hover { background-image:url(https://image.jimcdn.com/app/cms/image/transf/dimension=682x2048:format=jpg/path/s720532a5ff7f8ce4/image/i06943658348a9f6c/version/1498904612/image.jpg) no-repeat ;}

mais rien ne change :'(

A voir également:

9 réponses

Réponse 1 / 9
Utilisateur anonyme
10 juil. 2017 à 22:53
Bonjour


- ton div a l'id gallery_thumb_4570743062, et dans le CSS tu mets #gallery_thumb_4570742962… Cherchez l'erreur.

-Tu ne peux pas utiliser no-repeat dans background-image. Soit tu utilises background tout court pour mettre les deux attributs à la fois, soit tu utilises un background-image et un background-repeat séparés.

Enfin, tu appliques une image de fond à une balise <a> qui contient une image. Si l'image de la balise <img> n'est pas transparente, elle va cacher l'image que tu mets en background (sauf peut-être sur les bords) et tu ne verras pas l'image de fond, qu'elle change ou non.
0
Réponse 2 / 9
juju
11 juil. 2017 à 14:50
Salut à toi !

Merci d'avoir pris le temps de me répondre !

1°) Oui c'est vrai ils sont différents mais c'est juste une erreur de copier/coller :/

2°) Ok je ne savais pas ceci...bon en même temps je ne suis pas développeur de métier ^^ lol

3°) Ok ... mais du coup une solution à ce problème de transparence ?

Cordialement.
Bonne journée
0
Réponse 3 / 9
Utilisateur anonyme
11 juil. 2017 à 17:37
1-Oui c'est vrai ils sont différents mais c'est juste une erreur de copier/coller :/
Dans le code que tu as donné, il n'y avait pas d'étiquette pour distinguer les erreurs d'origine de celles que tu avais ajoutées en recopiant.

2-je ne savais pas ceci Je ne connais pas non plus les syntaxes par cœur, mais quand quelque chose ne se comporte pas comme prévu, je relis le manuel. C'est ce que j'ai fait pour trouver cette erreur, que je n'avais pas vue au départ. J'ai relu la page sur background-image et j'ai vu que no-repeat ne faisait pas partie des options possibles.
je ne suis pas développeur de métierMoi non plus, comme la plupart des helpeurs de ce site, je pense.

3-une solution à ce problème de transparence
Il n'y a pas de problème de transparence mais tu as un problème de logique. Tu veux mettre une image en fond, mais tu la recouvres avec une autre image. Alors que veux-tu faire en réalité ? Si tu veux voir l'image de fond, pourquoi en mets-tu une par-dessus ? Et si tu veux voir celle de ta balise <img>, à quoi sert-il de mettre une image de fond cachée en-dessous ?
Compte-tenu de ce que tu sembles chercher à faire, j'aurais tendance à penser que tu n'as pas besoin d'image de fond, mais que c'est l'image de ta balise img qu'il faut modifier lors du :hover.
0
Réponse 4 / 9
juju
11 juil. 2017 à 19:00
Resalut !

Alors pour expliquer ce que je veux faire voici l'exemple d'un site : http://www.australia.com/fr-fr

Lorsque tu es dessus, tu peux voir que par exemple pour Sydney, lorsque tu passes la souris sur l'image du Pont, une image tout simple bleu avec inscrit Sydney apparaît...bah c'est exactement ce que je veux faire :D

Pour mon cas je veux garder l'image en fond dont l'Url est donnée dans le code précédent...

du coup "c'est l'image de ta balise img qu'il faut modifier lors du :hover." qu'entends-tu par là ? serait-ce juste dans cette partie 
 #gallery_thumb_4570742962 a:hover { background-image:url(https://image.jimcdn.com/app/cms/image/transf/dimension=682x2048:format=jpg/path/s720532a5ff7f8ce4/image/i06943658348a9f6c/version/1498904612/image.jpg) no-repeat ;}
que je dois modifier quelque chose ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
Utilisateur anonyme
11 juil. 2017 à 21:39
Un moyen simple de faire ce que tu veux, c'est de mettre une des images en fond et l'autre dans l'<img>.
Lors du hover, tu rends l'<img> transparente en passant son opacity à 0.

Par exemple : 

css:
#gallery_thumb_4570742962 {
  background-image:url(https://image.jimcdn.com/app/cms/image/transf/dimension=682x2048:format=jpg/path/s720532a5ff7f8ce4/image/i06943658348a9f6c/version/1498904612/image.jpg);
  background-repeat:no-repeat;
}
#gallery_thumb_4570742962 a:hover {
  opacity:0;
  }

html:
<div class="cc-m-gallery-stack-item" id="gallery_thumb_4570742962" data-sort="1" style="margin-bottom: 7px;">
<a href="/départements/bouches-du-rhône-13/" rel="nofollow noopener noreferrer" target="_blank"><img src="https://image.jimcdn.com/app/cms/image/transf/dimension=682x2048:format=jpg/path/s720532a5ff7f8ce4/image/icb1129b6a2b21fd8/version/1498904612/image.jpg" alt="" />
</a>
</div>
0
Réponse 6 / 9
juju
12 juil. 2017 à 10:46
Bonjour,

Merci pour le bout de code mais ceci n'a pas fonctionné quand j'ai essayé de l'appliquer :/

Je te laisse l'adresse de mon site pour que tu puisses peut-être y voir un peu plus clair : https://www.paca-decouverte.fr/

Ce serait pour les 6 petites images des départements que tu peux voir plus bas ...

Le soucis ne viendrait-il pas du fait que ces petites images sont cliquables ?

Merci.
Bonne journée.
0
Réponse 7 / 9
juju
12 juil. 2017 à 11:34
Désolé pour le double message mais j'ai adapté ton code pour la carte de France en bas de mon site, et celà fonctionne parfaitement...je te laisse regarder par toi-même :/

Du coup le problème doit venir du fait que ces images si situent dans une galerie d'image probablement non ?
0
Réponse 8 / 9
Utilisateur anonyme
12 juil. 2017 à 14:31
J'ai mis un peu de temps à comprendre.
La structure de ta page est beaucoup plus compliquée que le simple exemple que tu as montré.
Il y a du CSS dans tous les sens et il n'est pas facile de savoir quelles règles s'appliquent à quel moment.
Dans la règle 
#gallery_thumb_4570742962 a:hover {
  opacity:0;
  }

que je t'ai indiquée, je rends la balise <a> transparente, mais le but était de rendre l'image transparente, car normalement, l'opacity est transmise aux descendants.
Il doit y avoir quelque part une règle qui empêche cet héritage.
Le plus simple et, en fait, le plus logique, est d'appliquer l'opacité à l'image elle-même : 
#gallery_thumb_4570742962 a:hover img {
  opacity:0;
  }


Ça marche comme ça, même si, à la réflexion, jouer sur la transparence n'est pas la solution la plus rationnelle non plus.
0
Réponse 9 / 9
juju
13 juil. 2017 à 09:03
Salut,
Parfait merci beaucoup pour ton aide si précieuse...maintenant à moi d'adapter et de modifier la transition entre les deux images, mais ça je pense y arriver tout seul ou du moins je garde la convers sous le coude au cas où... ;)

Bonne journée et encore merci :D
-1
Utilisateur anonyme
13 juil. 2017 à 10:33
De rien :-)
0
juju
Modifié le 13 juil. 2017 à 15:37
Ah oui une petite dernière question peut-être...si je veux que cet effet ne s'applique qu'aux écrans d'ordi et non pas aux smartphones car je viens d'aller voir sur mon tel ça ne rend pas bien du tout...lol

Dois-je inclure toute ceci dans un @Media ... ? ou faire autre chose :/
0
Utilisateur anonyme > juju
13 juil. 2017 à 15:46
Il faudrait que tu poses une nouvelle question. Je ne me suis jamais intéressé aux smartphones et je n'ai aucune compétence dans ce domaine, ce n'est pas moi qui pourrai t'aider.
Mais à vue de nez, je crains que ce soit le principe qui soit à changer. Actuellement, pour donner l'impression d'un changement d'image, on en utilise deux de nature très différentes puisqu'une est l'arrière-plan d'un <div> et l'autre une <img> à l'intérieur d'un lien. Pas étonnant que sur certains appareils les rendus soient très différents. C'est ce que je pressentais dans mon message #8 en disant que ce n'était pas très rationnel.
0
juju
13 juil. 2017 à 17:31
Oui je pense aussi poser la question...quoique je viens de trouver un truc @media all and (min-device-width: 1280px) { blabla } et ça a l'air de fonctionner...j'ai inclus tout ce qu'on a fait précédemment plus ce que j'ai amélioré, je ne sais pas si tu as vu...mais j'ai testé sur plusieurs smartphones et ça fonctionne :D

En tout cas merci encore énormément...c'est tellement agréable de trouver de l'aide...je faisais comme toi il y a 4/5ans mais pour la partie Virus/Sécurité et voir des personnes heureuses c'était parfait :D
bref
Bonne continuation
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses