PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

#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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

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

ManicoW
Cowrespondant
Lieu : Tours
Inscription : 08-05-2009
Messages : 190
Site Web

Re : traiter des image css

Jc a écrit :

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 wink).

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

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

ManicoW
Cowrespondant
Lieu : Tours
Inscription : 08-05-2009
Messages : 190
Site Web

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 big_smile) .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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

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

Jc a écrit :

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 lol


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

Pied de page des forums