Vous n'êtes pas identifié(e).
- Contributions : Récentes | Sans réponse
Pages :: 1
#1 09-12-2011 05:16:11
- stoneyanick
- Membre
- Inscription : 09-12-2011
- Messages : 1
traiter des image css
Salut, quelqu'un pourrait me dire comment modifier une image par une autre au passage de la souris en HTML et CSS?:cool:
Hors ligne
#2 09-12-2011 15:23:14
Re : traiter des image css
Bonjour,
Sans Javascript ou vbscript tu ne peux pas. En effet le passage de la souris sur une image sans autre interaction de l'utilisateur relève du pur évènementiel et donc n'est pas du ressort de HTML / CSS. Par contre CSS peut modifier l'affichage si tu à modifié l'état d'un objet du dom (click sur un lien, changement de focus, etc...) mais qu'après pas pendant.
++
POO PHP+Ajax en MVC avec PDO et Bases de données épaisses : What else?
Hors ligne
#3 10-12-2011 06:54:30
- Maljuna Kris
- Infantimigulo
- Lieu : Douarnenez 29100 Breizh Izel
- Inscription : 08-05-2009
- Messages : 2 453
- Site Web
Re : traiter des image css
Saluton,
Inspire-toi de ce qui est proposé dans ce post.
Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy
Hors ligne
#4 14-12-2011 12:28:29
Re : traiter des image css
Bonjour,
Sans Javascript ou vbscript tu ne peux pas. En effet le passage de la souris sur une image sans autre interaction de l'utilisateur relève du pur évènementiel et donc n'est pas du ressort de HTML / CSS. Par contre CSS peut modifier l'affichage si tu à modifié l'état d'un objet du dom (click sur un lien, changement de focus, etc...) mais qu'après pas pendant.
++
Alors là, je ne suis absolument pas d'accord ! Je t'invite a refouiller dans les coins du css !
C'est en fait tout simple, il suffit d'utiliser le selecter :hover , qui est fait pour ça, qui fonctionne très bien pour les liens, souvent pour les images, et parfois pour les éléments de tableaux (en fait pour les tableaux ca dépend de la version de IE que l'on autorise sur le site 
).
Exemple :
#monimage {
background: url(/images/mon_image_normale.png) top left no-repeat;
}
#monimage:hover {
background: url(/images/mon_image_survol.png) top left no-repeat;
}
Après il existe également des ruses pour éviter le lag de l'effet lors de son premier usage (le temps que la navigateur récupère l'image), ainsi qu'optimiser le temps de chargement initial de la page, a condition qu'on ait au moins une dimension fixe (hauter ou largeur, dans mon exemple cela sera la hauteur, qui sera de 10px)
Exemple 2
#monimage {
background: url(/images/mon_image_double.png) top left no-repeat;
}
#monimage:hover {
background: url(/images/mon_image_double.png) 0 10px no-repeat;
}
Il suffit alors que mon_image_double.png soit une image contenant les deux images l'une au dessus de l'autre.
Hum, pas sur que ca soit bien clair tout cela, mais on trouve ce genre de chose expliquées assez facilement : http://www.zonecss.fr/style_css/feuille_css_hover.html
@+
la v2, c'est tabou, on en viendra tous a bout
Hors ligne
#5 14-12-2011 13:43:50
Re : traiter des image css
Bonjour,
Merci Manicow, un oubli de ma part. Je n'utilise hover que pour les liens en fait, ce qui fait que je l'ai zappé complètement pour une approche de programmation générale.
Tu avoueras quand même que les inconvénients côté image ne sont pas à négliger, car le plus propre serait de passer par un preload en js ou alors par css.
++
POO PHP+Ajax en MVC avec PDO et Bases de données épaisses : What else?
Hors ligne
#6 14-12-2011 13:49:11
Re : traiter des image css
En fait cela dépend un peu de ce qu'il y a comme serveur derrière aussi, j'utilise la technique du css hover sur quelques sites depuis longtemps, il est vrai que ca fait au debut un petit scintillement, c'est pour ça que quand je les refait, je passe sur la deuxième technique que j'ai indiqué, ce qui correspond en fait a une sorte de preload en css.
J'avoue ne pas être fan du js pour la manipulation des images (voir même du js en général, mais parce qu'il a été si souvent mal utilisé). Donc tout ce que je peux faire en css, je le fais en css. Surtout que le js inactif sur les navigateurs, c'est plus courant que ce qu'on croit (j'ai déjà eut des IE qui d'un seul coup ne voulait plus interpréter le moindre js 
) .Par contre j'avoue que le mélange js + css permet des trucs sympa.
@+
la v2, c'est tabou, on en viendra tous a bout
Hors ligne
#7 14-12-2011 14:07:42
Re : traiter des image css
Le problème en effet avec js, c'est qu'il tolère très mal les erreurs et que pour la plupart d'entre elles le parseur s'arrête à la première (principalement erreurs de syntaxe) et le reste n'est pas chargé dans le navigateur. Quand tout le code est chargé, cela viens souvent du fait que certaines erreurs ne sont pas gérées dans le code ou que des valeurs ou non valeurs possibles de certaines variables/objets ne sont pas pris en compte dans le code, je suppose parcequ'elles ne sont pas censées les prendre.
Sur mes navigateurs je suis toujours en mode débogage actif, et c'est fou le nombre de sites "pro" ou de grands comptes (y compris les banques) pour lesquels j'ai des erreurs en chaîne qui m'empêchent parfois d'utiliser le site.
++
POO PHP+Ajax en MVC avec PDO et Bases de données épaisses : What else?
Hors ligne
#8 14-12-2011 16:17:06
- Maljuna Kris
- Infantimigulo
- Lieu : Douarnenez 29100 Breizh Izel
- Inscription : 08-05-2009
- Messages : 2 453
- Site Web
Re : traiter des image css
c'est fou le nombre de sites "pro" ou de grands comptes (y compris les banques) pour lesquels j'ai des erreurs en chaîne qui m'empêchent parfois d'utiliser le site.
C'est parce qu'elles méritent un triple Z 
Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy
Hors ligne
Pages :: 1