28172 sujets

CSS et mise en forme, CSS3

Question HOVER : survol image remplacée par autre image.

Bonjour!
Premier message ! Smiley smile

Je m'auto-forme depuis quelques temps au CSS/HTML avec PHP en ligne de mire. On y croit ! Smiley cligne
Donc on va dire que je suis pas trop confirmé encore.
Voilà je voulais tester un truc que j'ai vu sur un site:

Une image cliquable (jusque là pas de souci) mais qui lorsqu'elle est survolée par la souris (donc "a:hover" si j'me trompe pas) fait apparaître une autre image par dessus la première (en fait la même mais avec des variations de couleurs différentes).

Le site exemple en question pour vous donner une idée :
Lien exemple

Le problème c'est que lorsque je survole mon image "1", je vois que ça "réagit" comme il faut SAUF que l'image "2" qui devrait se mettre par dessus est en fait EN-DESSOUS de la première ! De l'image "2" on voit juste une toute petite bande qui apparait en bas de l'image "1" ! Et j'arrive pas à savoir ce qu'il faut modifier dans mon code HTML/CSS!! Smiley decu

Donc côté HTML j'ai mis ça :
 
<h2 id="image1">
	      <a href="http://www.xxxxx.com"><img src="/tests/images/DSCF4874.JPG" alt="My first photo" /></a>
</h2>


Et côté CSS, ceci!


#image1 a:hover {
  background-attachment:initial;
  background-clip:initial; 
  background-color: transparent;
  background-image:url("/tests/images/DSCF4874_SURVOL.JPG");
  background-origin:initial;
  background-position: 0 0;
  background-repeat:no-repeat no-repeat;
}


Merci beaucoup par avance pour vos lumières parce que là je sèche !
Modifié par Claw69 (15 Oct 2010 - 18:40)
Sur ton hover, tu modifies l'image de fond de ton lien et non l'image qui est englobé par ton lien.

Dans ton cas, tu mets en display:block; ton lien, tu lui donnes les dimensions de ton images et enfin l'image de fond comme tu l'as fais avec le hover. Tu retires totalement l'image <img /> de ton code.

ce qui donne quelque chose comme : <a href="ton lien"></a>

#image1 a {
 display:block;
 width:XXXpx;
 height:XXXpx;
 background:url(ton_url) __autre_paremetre__;
}
#image1 a:hover {
 background:url(nouvelle_url) __autre_paremetre__;
}
Merci Kenor pour les explications et la solution, ça marche nickel !! Smiley biggrin

Bonne fin de journée!

P.S.:
j'ai pas trouvé pour mettre "résolu"...p-e que c'est les modérateurs qui s'en chargent ?
Bonjour,

Je me permet d'intervenir malgré que tu considère déjà le problème comme étant résolu.

La solution proposée par kenor présente un désavantage majeur : elle est totalement inaccessible. Pour tester, il te suffit de désactiver les images. Tu sera ainsi dans la situation d'une personne qui a un problème de connexion ou qui utilise un lecteur d'écran. Tu constatera que comme l'image se trouve dans le CSS, sans texte alternatif (le alt que tu avais dans ton premier code), tu n'as plus de lien, du tout...

Pour rappel :
* Les images porteuses de contenu (avec du texte dessus) et/ou support de lien DOIVENT se trouver dans le code HTML, et non dans le CSS, avec un texte alternatif correctement rempli.

* Les effets de roll-over seront, de préférence, gérer en JavaScript. Sauf dans le cas où seul le fond doit changer (là :hover est le bon moyen).
A vrai dire, je n'ai pas été plus loin que la question, mais dans l'absolu, j'aurai ajouté un texte dans le lien avec un text-indent négatif très élevé. Pour le référencement, ça doit marcher, pour l'accessibilité, je pense aussi ? Qu'est ce que tu en dis Laurie-Anne ? (le JS pour faire juste ça a tendance à ne pas me plaire davantage, sauf exception)

J'en profite que tu sois modératrice pour te demander comment recevoir les réponses par email ?
Modifié par kenor (15 Oct 2010 - 17:48)
Une version accessible :


  <style>
  #image1 a {
    position:relative;
  }
  #image1 a img {
    position:absolute;
    width:Xpx;
    height:Ypx;
    z-index:2;
  }
  #image1 a span {
    z-index:1;
    position:absolute;
    display:block;
    width:Xpx;
    height:Ypx;
  }
  #image1 a:hover span {
    background:url(nouvelle_image);
    z-index:3;
  }
  </style>
  </head>
  <body>
        <h2 id="image1">
	      <a href="http://www.xxxxx.com"><img src="image_defaut" alt="Texte accessible" /><span></span></a>
        </h2>
  </body>


Defaut, il faut rajouter <span></span> (qui est en faites le bloc qui accueil la seconde image)
Merci à vous 2.
Je suis presque déçu, moi qui pensait que ça marchait, d'ailleurs ça marche mais pas dans les règles de l'art si j'ai bien compris. Smiley decu

@Laurie-Anne:
J'ai désactivé mes 2 images comme tu me le proposais (pour constater le "défaut") mais même si mes images ont effectivement disparues, j'ai bien toujours mon lien "texte" de disponible et qui fonctionne bien....car par rapport à la solution de Kenor, j'avais ajouté le libellé "Texte image" au niveau du HTML comme ci-dessous:


<a href="http://www.xxxxxxx.com">Texte image</a>


J'ai bien un lien "Texte image" qui apparait toujours et qui marche.

Dois-je vraiment me tourner vers une autre solution ? Smiley ohwell

Surtout que vous l'avez compris je suis encore plutôt "débutant" et Javascript je connais pas du tout. Smiley decu
@Kenor, je vais regarder ta solution (merci bien), le problème c'est que je ne comprends pas toute la logique because pas assez confirmé . Smiley cligne
Modifié par Claw69 (15 Oct 2010 - 18:41)
Je vais essayer d'expliquer en quelques mots.

Tu as l'image qui est bloc contenant la première image, tu as le <span></span> qui contient la seconde image qui est un second bloc SOUS la premier bloc (donc non visible).

Dès lors que la souris passe sur le lien, on met le bloc <img> sous le bloc <span>, du coup c'est le bloc <span> qui est visible (la seconde image) et non la première. Le tout grâce au z-index (permet de définir quelle "fenetre passe au dessus de l'autre" en gros, plus le chiffre est élevé, plus ça passe au dessus).
kenor a écrit :
Je vais essayer d'expliquer en quelques mots.

Tu as l'image qui est bloc contenant la première image, tu as le &lt;span&gt;&lt;/span&gt; qui contient la seconde image qui est un second bloc SOUS la premier bloc (donc non visible).

Dès lors que la souris passe sur le lien, on met le bloc &lt;img&gt; sous le bloc &lt;span&gt;, du coup c'est le bloc &lt;span&gt; qui est visible (la seconde image) et non la première. Le tout grâce au z-index (permet de définir quelle &quot;fenetre passe au dessus de l'autre&quot; en gros, plus le chiffre est élevé, plus ça passe au dessus).


OK merci Kenor pour ton explication ! Smiley smile
Ma route est longue encore ! Smiley cligne
kenor a écrit :
A vrai dire, je n'ai pas été plus loin que la question, mais dans l'absolu, j'aurai ajouté un texte dans le lien avec un text-indent négatif très élevé. Pour le référencement, ça doit marcher, pour l'accessibilité, je pense aussi ? Qu'est ce que tu en dis Laurie-Anne ? (le JS pour faire juste ça a tendance à ne pas me plaire davantage, sauf exception)
Que le problème reste le même, si l'image ne s'affiche pas (pour une raison ou une autre) mais que les CSS restent d'application, il n'y a plus rien qui s'affiche. Personnellement, je trouve cette solution pire que la première : elle donne une fausse impression d'accessibilité (ou de conception universelle, car le terme est plus approprié).

kenor a écrit :
J'en profite que tu sois modératrice pour te demander comment recevoir les réponses par email ?
Ce n'est possible qu'à la création du topic (donc pas pour les topic où tu réponds) (je crois que c'est un des points de la to-dew list, mais pas sûr).

@Claw69 : Si tu as du contenu textuel dans le code HTML et que ce contenu n'est, d'aucune manière que ce soit, masqué/déplacé/autre alors la solution est accessible et ne devrait pas poser de problème en cas de non possibilité d'affichage des images.
a écrit :
@Claw69 : Si tu as du contenu textuel dans le code HTML et que ce contenu n'est, d'aucune manière que ce soit, masqué/déplacé/autre alors la solution est accessible et ne devrait pas poser de problème en cas de non possibilité d'affichage des images.


Merci Laurie-Anne! Smiley smile
Donc si j' ai bien suivi, la première solution proposée par Kenor est bonne au détail prêt qu'il fallait ajouté comme je l'ai fait un contenu textuel au niveau HTML (voir ci-dessous). 

<a href="http://www.xxxxxxx.com">Contenu textuel de l'image</a>


Peux-tu confirmer stp ou puis-je me permettre de te demander, si tu as le temps bien sûr, quelle serait la solution ?

Merci par avance.
Modifié par Claw69 (19 Oct 2010 - 10:29)
Sujet clos
Aller à