[Résolu] Modifier image HTML via le CSS

Hello,

Oui, le titre est un peu confus, mais moi aussi...

Je travail sur Joomla! et j'ai attribué des images pour chaque menus. Et donc dans le fichier source, chaque menu se présente de cette manière:

<li class="parent active item1">
<a href="/nomdusite/index.php/projets">
<img alt="projets" src="/nomdusite/images/stories/menu-projets.png">
</a>

Ce que je voudrais faire, c'est qu'en passant la souris, l'image change (effet rollover) mais l'idée serait que ça se passe via le CSS. Je crois que c'est possible, mais je cherche depuis plusieurs heures déjà

Donc si vous avez une idée, je suis preneur !

CorpsRompus
Modifié par corpsrompus (04 Nov 2010 - 11:10)

a:before {
  position:absolute;
  display:none;
  content:url(imageRollover.png);
}
a:hover:before {display:block}

Waah !
Merci beaucoup, tu m'avances bien !!


Il reste cependant un petit problème, l'image "originale" reste derrière, l'idée serait qu'elle soit masquée au passage de la souris, possible ?

Rajoute un a:hover img {display:none}

corpsrompus a écrit :
Il reste cependant un petit problème, l'image "originale" reste derrière, l'idée serait qu'elle soit masquée au passage de la souris, possible ?

Entendu parler de la propriété visibility?

Remarques:
- La technique de Benjamin ne marchera pas dans IE7 (ne gère pas les pseudo-classes :before et :after et la propriété content).
- Si un navigateur ne gère pas l'ajout de ton image en CSS, mais applique quand même un visibility:hidden, plus rien n'est affiché.
- Le temps que la deuxième image se charge, si la première est masquée avec visibility:hidden, plus rien n'est affiché.
- Problème d'accessibilité éventuel (problème de restitution du texte "projets" si l'image est masquée en visibility:hidden), c'est peut-être mineur mais ce serait à tester.
- Tout ça se gère assez simplement en JavaScript (en remplaçant la valeur de l'attribut src de l'image lors du survol).
Modifié par Florent V. (03 Nov 2010 - 12:17)

Benjamin D.C. a écrit :
Rajoute un a:hover img {display:none}

Plutôt visibility:hidden; le display:none va mettre à zéro la hauteur des liens faute de contenu dans le flux.

Florent V. a écrit :

Plutôt visibility:hidden; le display:none va mettre à zéro la hauteur des liens faute de contenu dans le flux.

Oui visibility c'est bien aussi (pas compris le "faute de contenu dans le flux" par contre).

Excellent ! Merci beaucoup !! C'est vrai que pour le a:hover img, j'aurais du y penser..
J'ai utilisé visibility plutôt que display.

Florent:

a écrit :
- Tout ça se gère assez simplement en JavaScript (en remplaçant la valeur de l'attribut src de l'image lors du survol).

Comment ça ?


Qu'est-ce que je hais cet I.E. ...
Modifié par corpsrompus (03 Nov 2010 - 13:13)

Hello,

J'en profite pour une question au passage :

Florent V. a écrit :
- Le temps que la deuxième image se charge, si la première est masquée avec visibility:hidden, plus rien n'est affiché.

Une image en visibility hidden n'est pas chargé de base?

Florian_R a écrit :
Une image en visibility hidden n'est pas chargé de base?

Je sais pas. Faut chercher et/ou tester.

corpsrompus a écrit :
Comment ça ?

Bah avec un petit script JS quoi. En JS et DOM «pur» tout en gérer le cas IE 7-8 qui implémente mal le DOM (IE9 corrigera enfin ça, c'est pas trop tôt), c'est éventuellement un peu pénible. Si tu utilises une librairie JS quelle qu'elle soit c'est l'affaire de quelques lignes. Exemple de tête avec jQuery:

function toggleSrc($img, pattern1, pattern2) {
    var imgSrc = $img.attr('src');
    var newSrc = imgSrc.replace(pattern1, pattern2);
    $img.attr('src', newSrc);
}
$('#menu a').hover(
  function(){ toggleSrc( $(this).find('img'), '_1.', '_2.' ) },
  function(){ toggleSrc( $(this).find('img'), '_2.', '_1.' ) }
);

En supposant que pour chaque image du menu tu as une image nommée blabla_1.ext et une image de rollover nommée blabla_2.ext par exemple (mais le pattern peut être changé...).

Quelque chose du genre.

OK. Après test à l'arrache, visiblement l'image est préchargé, du moins sous Firefox.

A voir sous les autres navigateurs...

En tout cas merci beaucoup à tous ! Mon problème est résolu même si j'ai encore quelques petits problèmes mais ça c'est une autre histoire !