hover css sans passer par le background

hover css sans passer par le background - HTML/CSS - Programmation

Marsh Posté le 05-05-2010 à 13:30:23    

Bonjour.
Je voudrais créer une permutation d'image avec css (:hover), mais sans passer par le changement de background; Je voudrais que ce soit l'image insérée dans la page html qui change au passage de la sourie; Pourriez-vous m'expliquer comment faire svp?
Merci et bon apetit.
 

Reply

Marsh Posté le 05-05-2010 à 13:30:23   

Reply

Marsh Posté le 05-05-2010 à 16:33:46    

Ce n'est pas possible en css de changer la source d'une image en ligne.
Tu dois employer du javascript pour cela


Message édité par David Boring le 05-05-2010 à 16:34:22
Reply

Marsh Posté le 05-05-2010 à 17:05:48    

On peut faire cela en CSS et garder le même background.
 
Par exemple, on peut utiliser un background contenant deux images l'une en dessous de l'autre, et faire apparaitre l'une ou l'autre en jouant sur le background-position. C'est une technique utilisée notamment pour les options des menus qui changent d'aspect au survol de la souris.
 
Ou bien, on peut utiliser d'autres techniques décrites dans http://css.mammouthland.net/rollov [...] -hover.php
 

Reply

Marsh Posté le 05-05-2010 à 17:30:14    

Le monsieur a dit qu'il ne voulais pas que ce soit une image de background en css, mais bien une image en ligne

Reply

Marsh Posté le 06-05-2010 à 08:03:41    

Primo, s'il vous plait, M. David Boring, et les autres intervenants du même acabit, arrêtez de critiquer les réponses. Si une réponse ne plait pas, c'est à l'auteur de la question de le dire. Nous sommes là pour aider, et partager nos connaissances, pas pour nous battre entre nous. Si quelque chose vous choque réellement, envoyer un MP.
 
Secundo, puisque vous voulez une commencer une discussion sur la place publique, je vais vous répondre sur le forum, et vous dire que c'est vous qui avez tort.

Citation :

sans passer par le changement de background

Si vous connaissiez un tout petit peu la grammaire, vous sauriez, que la négation ne s'applique pas au "background", mais au "changement". Il n'est donc pas exclu qu'il y ait un background, et un changement de position n'est pas un changement de background. Par ailleurs, le mot "background" est ambigu car il semble que l'auteur parle de l'image du fond de la page, alors que le "background" peut aussi être l'image du fond d'une div, et donc le" background" concerne les "images en ligne" comme vous les appelez de manière vague.
 
La technique, que je propose, parfois appelée, technique des portes coulissantes, marche bien, mais n'est pas connue par tout le monde. Si l'auteur de la question ne la connait pas, je la lui signale car elle est intéressante, et elle est surement applicable dans sa situation.
 
Tertio, si M. David Boring, vous éditez votre message et retirez votre critique, contre moi, j'éditerais ce message et retirerais la mienne contre vous.
 

Reply

Marsh Posté le 06-05-2010 à 11:22:29    

Bonjour, je suis un intervenant du même acabit  [:maxmaker]
Intitulé du sujet

Citation :

hover css sans passer par le background
 


Et précisé dans le 1e post :

Citation :

Je voudrais créer une permutation d'image avec css (:hover), mais sans passer par le changement de background. Je voudrais que ce soit l'image insérée dans la page html qui change au passage de la sourie


Tous les lecteurs (du même acabit [:mullet] ) vont comprendre la même chose que David... et considérer ta réponse inappropriée (bien qu'intéressante au demeurant) au regard de l'énoncé.

 

Et aucune règle ne dit que les intervenants ne peuvent répondre qu'à l'initiateur du sujet.

 

Pour répondre à la question ya bien une possibilité un peu sur le principe des sprites d'ailleurs.
Condition, les images doivent avoir la même dimensions sinon le comportement risque de laisser à désirer.

 

Le principe est d'avoir un div conteneur dimensionné selon la taille des image en overflox:hidden.
A l'intérieur un div qui contient les images et qui va "coulisser" au survol grace à position: relative;

 

http://sifr.free.fr/Gfx/html/test_hover_img.html

  



Message édité par Skopos le 06-05-2010 à 11:23:00
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed