28172 sujets

CSS et mise en forme, CSS3

[Résolu] Lien avec image, changer au survol

Bonjour,

Une question que je me pose...j'ai ce code:


<a href="" title="">
    <img src="min-imge.jpg" alt="Mon image" />
</a>


J'aimerais tout simplement faire que quand on passe dessus avec la souris, que l'image change.

Il y a quelques années on faisait cela en javascript avec des onmouseover onmouseout....mais aujourd'hui en 2010, y-a-t-il pas moyen de faire ça plus facilement? en CSS?

Ou on est toujours obliger de le faire en javascript, si oui quel est la meilleure méthode? il me semble que les onmousehover et onmouseout est déconseillé?

Merci d'avance
Modifié par Blogger (11 Nov 2010 - 13:20)
Bonjour,

Blogger a écrit :
Il y a quelques années on faisait cela en javascript avec des onmouseover onmouseout....mais aujourd'hui en 2010, y-a-t-il pas moyen de faire ça plus facilement? en CSS?

Ou on est toujours obliger de le faire en javascript, si oui quel est la meilleure méthode? il me semble que les onmousehover et onmouseout est déconseillé?
JavaScript est toujours la meilleure solution à mettre en place, par contre on préfèrera onFocus et onFocusOut à onMouse...

Kenor : ta solution est toujours autant problématique, voir répliques dans le sujet.
Je suis désolé mais je ne suis pas d'accord avec votre réplique, faites le test par vous-même.
Laurie-Anne a écrit :
Bonjour,

JavaScript est toujours la meilleure solution à mettre en place, par contre on préfèrera onFocus et onFocusOut à onMouse...

Kenor : ta solution est toujours autant problématique, voir répliques dans le sujet.


Bonjour,

Pourquoi la solution de Kenor est problèmatique? cette solution ic: http://forum.alsacreations.com/topic-4-51653-1.html#p358252

Ca me parait bien, il y a une image en html, donc pas de problème d'accessibilité? Je me trompe?

Merci

Merci
Le problème de cette solution est qu'elle implique un positionnement absolu pas vraiment nécessaire : une couche de complexité supplémentaire, qui risque de provoquer des bugs.
Accessible et sans JS:
a:before {
  position:absolute; 
  display:none; 
  content:url(imageRollover.png); 
}
a:hover img {visibility:hidden}
a:hover:before {display:block}
Laurie-Anne a écrit :
Le problème de cette solution est qu'elle implique un positionnement absolu pas vraiment nécessaire : une couche de complexité supplémentaire, qui risque de provoquer des bugs.

position:absolute c'est une couche de complexité ? Je ne vois pas pourquoi, mais je n'insisterai pas Smiley smile Perso je trouve que c'est plutôt le fait d'ajouter du JS là où ce n'est pas indispensable qui est une couche de complexité. ça reste mon point de vue.

@banjamin D.C. : attention, d'après : http://www.quirksmode.org/css/contents.html :before n'est pas compatible IE (IE 8 compris).
kenor a écrit :
attention, d'après : http://www.quirksmode.org/css/contents.html :before n'est pas compatible IE (IE 8 compris).

IE8 implémente :before et :after pour la propriété content (mais pas sous la notation ::before et ::after par contre), regarde un peu plus loin dans la page.
Modifié par Benjamin D.C. (10 Nov 2010 - 14:54)
@Benjamin D.C.: Et IE7 ? j'ai tester la méthode de Fenor, c'est nikel et en plus avec le span dans le <a> je peux mettre du texte sous mon image, c'est droit ce qui me fallait Smiley smile

Merci pour votre aide
J'ai essayer ce code:


<div class="domaine">
    <a href="" title="">
        <img src="domaine-1.jpg" alt="Domaine 1" />
        <span>Domaine 1</span>
    </a>
</div>

<div class="domaine">
    <a href="" title="">
        <img src="domaine-2.jpg" alt="Domaine 2" />
        <span>Domaine 2</span>
    </a>
</div>

<div class="domaine">
    <a href="" title="">
        <img src="domaine-3.jpg" alt="Domaine 3" />
        <span>Domaine 3</span>
    </a>
</div>


Et ce CSS:


.domaine {
    position: relative;
}

.domaine a img {
    position:absolute;
    width: 180px;
    height:162px;
    z-index:2;
    border: none;
}

.domaine a span {
    position:absolute;
    display:block;
    width: 180px;
    min-height: 0px;
    padding-top: 162px;
    z-index: 1;
}

.domaine a:hover span {
    background: url("test.jpg") no-repeat;
    z-index:3;
}


Et je me retrouve avec mes 3 div l'une dessus les autres...pourtant elles sont en relative?
Je comprend pas pourquoi cette affichage, quelqu'un peut m'expliquer?

Merci
Benjamin D.C. a écrit :

IE8 implémente :before et :after pour la propriété content (mais pas sous la notation ::before et ::after par contre), regarde un peu plus loin dans la page.

En effet Smiley smile

@Blogger : tu dois définir la taille en dure de tes .domaine (vu que le contenu à l'intérieur est en absolute) donc rajoute le même width/height dans le ".domaine" que tu as mis dans ".domaine a img" (je ne suis pas sûr d'être très claire Smiley smile )
Mais je pige pas pourquoi je dois mettre une taille à mon .domaine, la logique veut que ma div .domaine doit "s'adapter" suivant la taille de son contenu, et comme dans ma div .domaine je met une largeur et hauteur, pourquoi elle ne prend pas cette taille?

Maintenant alors j'ai un autre soucis, parce si je dois mettre une taille fixe à ma div .domaine ça pose un problème parce dans mon <span> mon texte n'a pas toujours la même longueur, dès fois il est plus long que les autres et donc prend plus de place, l'idéal serait que ma div .domaine soit extensible en hauteur, est-ce possible dans ce cas ici?

Merci
Tu dois placer une taille parce que justement ton élément à l'intérieur est en absolu, donc il n'est pas vraiment "dans" le bloc .domaine.

Pour ton texte, je ne sais pas, ça me parait pas possible tel que tu me le dis.
Oui je crois que c'est pas possible, alors j'ai mis une hauteur fixe ma fois...on fais avec Smiley smile

Vivement CSS3 Smiley smile

Merci pour votre aide

Je met en résolu
Modifié par Blogger (11 Nov 2010 - 13:20)
Sujet clos
Aller à