Mon image en survol n'apparaît pas

[linkfacile]

Bonjour à tous et à toutes!

Je suis en train de mettre en place des cadres sur la page d'accueil de mon site, et sur le cadre Bijoux Coeur, je n'arrive pas à mettre ma deuxième image en survol.

Voici la page en question:

http://www.silverinparis.com/boutique/liste_rayons.cfm?#

J'ai fait un code css et j'ai ajouté ce qu'il faut en html mais je n'y arrive pas!

#bijouxcoeur a:hover img {
    visibility: hidden;
}

#bijouxcoeur a {
	display: inline-block;
	background: url(../site/medias/bijoux-coeur-argent-blanc.jpg) no-repeat;
}

#bijouxcoeur a:hover img {
	visibility: hidden;
}

Peut être que vous voyez tout de suite le problème? :roll:

 

[loubet]

#bijouxcoeur a {
   display: inline-block;
   background: url(../site/medias/bijoux-coeur-argent-blanc.jpg) no-repeat;
}

#bijouxcoeur a:hover img {
   background: url(../site/medias/monautreimmage.jpg) no-repeat;
}

 

[linkfacile]

Bonjour Loubet et merci!

J'ai mis le code CSS que tu m'as donné:

#bijouxcoeur a {
   display: inline-block;
   background: url(../site/medias/bijoux-coeur-argent.jpg) no-repeat;
}

#bijouxcoeur a:hover img {
   background: url(../site/medias/bijoux-coeur-argent-blanc.jpg) no-repeat;
}

Et en HTML voici mon code:

<!-- DEBUT - Widget image survol--> <link rel="stylesheet" href="../site/Survol/image-survol.css" type="text/css">
<div id="bijouxcoeur">
<a href="#">
<img src="../site/medias/bijoux-coeur-argent.jpg" alt="Bijoux en forme de Coeur" border="0" height="278px" width="200px">
</a>
</div>

Çà ne fonctionne toujours pas... :cry: :cry:

 

[p0k3]

CSS :

#bijouxcoeur a {
   display: inline-block;
   background: url(../site/medias/bijoux-coeur-argent.jpg) no-repeat;
}

#bijouxcoeur a:hover { /* ENLEVER LE img ICI */
   background: url(../site/medias/bijoux-coeur-argent-blanc.jpg) no-repeat;
}

 

[-Romu-]

Hello,

loubet te donne la technique CSS.
Il n'y a plus d'img dans le code... tout ce gère en css.

Pour ton code, si img devient hidden ton a n'a plus de repère de taille !
Donc peut être mettre en display: block width height

 

[linkfacile]

Et bien je crois que je suis pas très douée!!

 

[p0k3]

Ce que tu peux faire c'est ça :

<a href="mon-lien.html" id="mon-lien"><img src="defaut-img.jpg"></a>

Et en CSS :

#mon-lien:hover img{
  content: url('autre-img.jps');
}

 

[linkfacile]

ça ne fonctionne pas non plus...

 

[p0k3]

ça ne fonctionne pas non plus...

Peux tu copier/coller ton code ?

 

[linkfacile]

Re!

voici mes codes

<!-- DEBUT - Widget image survol-->
<link rel="stylesheet" href="../site/Survol/image-survol.css" type="text/css">
<a href="../boutique/liste_produits.cfm?type=58&amp;code_lg=lg_fr&amp;num=22" id="bijouxcoeur"><img src="../site/medias/bijoux-coeur-argent.jpg"></a>

et

#bijouxcoeur:hover img{
  content: url('../site/medias/bijoux-coeur-argent-blanc.jpg');
}

J'ai demandé à mon fournisseur CMS et je ne suis fait jêter comme un mal propre!!! :cry: :cry:

 

[p0k3]

Voici le code JSFiddle !

Il y a des chances pour que ça vienne de la référence de l'image dans ton CSS
http://jsfiddle.net/c12fmvy8/

 

[linkfacile]

Que veux tu dire exactement par "la référence de l'image dans ton css"?

 

[p0k3]

Que veux tu dire exactement par "la référence de l'image dans ton css"?

Est-ce que cette ligne conduit bien à ton image de substitution ??

 

[linkfacile]

Oui regarde: http://www.silverinparis.com/site/medias/bijoux-coeur-argent-blanc.jpg

 

[p0k3]

Tu peux afficher la hiérarchie des fichiers ?
Ton fichier CSS est dans le même répertoire que ton fichier source ?

 

[linkfacile]

Je n'ai pas les images et le css au même endroit, ça peut être ça?

 

[p0k3]

Oui !!
Dans ton CSS, tu fais '../site/medias/'
Cette ligne doit donner la position relative de l'image par rapport AU CSS !!

../ -> renvoi à un répertoire au dessus
../../ -> renvoi à 2 répertoires au dessus !
/ -> répertoire du fichier CSS

 

[linkfacile]

OK Je vais réessayer et je reviens te voir

 

[linkfacile]

Bonjour,
Bon j'ai réussi autrement à le faire, avec le cms que j'utilise on ne peut pas faire appel aux css disons "traditionnel" je ne sais pas pourquoi, en tout cas je te remercie de m'avoir aidé