Commentaires sur : Design, CSS : les rollover CSS, un must ! http://innovablog.com/design/design-css-rollover-css-image/ Le Web où l’Innovation ordinaire : design, ergonomie, interfaces riches, web 2.0, eCommerce,... Mon, 20 Feb 2012 02:48:49 +0000 http://wordpress.org/?v=2.3 Par : H-raf http://innovablog.com/design/design-css-rollover-css-image/#comment-81994 H-raf Wed, 05 Oct 2011 11:32:26 +0000 http://innovablog.com/design/design-css-rollover-css-image/#comment-81994 Merci :) Merci :)

]]> Par : Max http://innovablog.com/design/design-css-rollover-css-image/#comment-78081 Max Thu, 07 Apr 2011 09:07:36 +0000 http://innovablog.com/design/design-css-rollover-css-image/#comment-78081 Thanks ;) Thanks ;)

]]> Par : marpa http://innovablog.com/design/design-css-rollover-css-image/#comment-39695 marpa Sun, 07 Feb 2010 13:21:02 +0000 http://innovablog.com/design/design-css-rollover-css-image/#comment-39695 en fait j'avais cliquez sur "répondre" du message de <i>Marie ALHOMME</i>. ton code est très bien et compréhensible, mais la remarque de marie est intéressante. pour augmenter l'accessibilité, il est important de penser aux gens naviguant sans images. ceux ayant encore des connexions bas débit, notamment dans des pays dits "défavorisés", ont tendance à naviguer comme tel vu la lourdeur de la plupart des sites actuels ! hors si on désactive les images, les backgrounds disparaissent et c'est très dommageable quand c'est le menu de navigation ! sa technique semble résoudre ce problème : ajouter des span (avec le background appliqué dessus) qui viennent couvrir le texte du lien, qui lui apparait quand les images sont désactivés. j'ai essayé de le faire mais je n'y arrive pas et le css de Marie (<a href="http://www.pouipouidesign.net/blog/themes/pouipoui09/css/global.css" rel="nofollow">css de pouipouidesign.net</a>) est tellement complexe que je n'arrive pas à voir comment elle fait ! si quelqu'un voit comment faire je suis preneur ! en tout cas encore chapeau pour ton tuto il est bien clair et m'a bien servi... merci ;p en fait j’avais cliquez sur “répondre” du message de Marie ALHOMME.
ton code est très bien et compréhensible, mais la remarque de marie est intéressante.
pour augmenter l’accessibilité, il est important de penser aux gens naviguant sans images. ceux ayant encore des connexions bas débit, notamment dans des pays dits “défavorisés”, ont tendance à naviguer comme tel vu la lourdeur de la plupart des sites actuels !
hors si on désactive les images, les backgrounds disparaissent et c’est très dommageable quand c’est le menu de navigation !
sa technique semble résoudre ce problème : ajouter des span (avec le background appliqué dessus) qui viennent couvrir le texte du lien, qui lui apparait quand les images sont désactivés.
j’ai essayé de le faire mais je n’y arrive pas et le css de Marie (css de pouipouidesign.net) est tellement complexe que je n’arrive pas à voir comment elle fait !
si quelqu’un voit comment faire je suis preneur !

en tout cas encore chapeau pour ton tuto il est bien clair et m’a bien servi… merci ;p

]]> Par : Olivier Favre http://innovablog.com/design/design-css-rollover-css-image/#comment-39689 Olivier Favre Sun, 07 Feb 2010 09:22:38 +0000 http://innovablog.com/design/design-css-rollover-css-image/#comment-39689 @[PiX] : comment ça plus de lien ? La balise href disparaît ? @marpa : le plus simple, affiche le source de la page de démo (http://innovablog.com/wp-content/files/2007/12/css-rollover-css-02.html). Le CSS présent est uniquement celui qui concerne notre exemple. @[PiX] : comment ça plus de lien ? La balise href disparaît ?
@marpa : le plus simple, affiche le source de la page de démo (http://innovablog.com/wp-content/files/2007/12/css-rollover-css-02.html). Le CSS présent est uniquement celui qui concerne notre exemple.

]]> Par : marpa http://innovablog.com/design/design-css-rollover-css-image/#comment-39538 marpa Wed, 03 Feb 2010 05:35:13 +0000 http://innovablog.com/design/design-css-rollover-css-image/#comment-39538 ta technique semble intéressante... mais j'ai pas bien compris comment tu la mettais en application. j'ai essayé de comprendre sur ton site mais je me suis un peu perdu dans la masse des css ;p tu pourrais détailler comment tu appliques l'effet à ton span. merci d'avance ta technique semble intéressante… mais j’ai pas bien compris comment tu la mettais en application.
j’ai essayé de comprendre sur ton site mais je me suis un peu perdu dans la masse des css ;p
tu pourrais détailler comment tu appliques l’effet à ton span.

merci d’avance

]]> Par : [PiX] http://innovablog.com/design/design-css-rollover-css-image/#comment-34129 [PiX] Sun, 27 Dec 2009 00:18:26 +0000 http://innovablog.com/design/design-css-rollover-css-image/#comment-34129 Salut et merci ! Super tutos, ils m'aident très souvent ! Mais ici, lorsque j'arrive a changer mon "background" en rollover, le lien disparait ! Enfin, plus de lien à cet endroit, ni de pages qui s'ouvre... Que faire ? Merci d'avance ;) [PiX] Salut et merci !
Super tutos, ils m’aident très souvent !
Mais ici, lorsque j’arrive a changer mon “background” en rollover, le lien disparait ! Enfin, plus de lien à cet endroit, ni de pages qui s’ouvre… Que faire ?
Merci d’avance ;)
[PiX]

]]> Par : Greg http://innovablog.com/design/design-css-rollover-css-image/#comment-31574 Greg Thu, 03 Dec 2009 20:08:43 +0000 http://innovablog.com/design/design-css-rollover-css-image/#comment-31574 Bon article merci ! J'en ai moi-même écrit un ici : 2 façons de mettre en cache le JavaScript, CSS et Image simplement (L’utilisation du cache de votre navigateur optimise le temps de chargement des pages d’un site) ici : http://bit.ly/6Y2l3k Bon article merci !
J’en ai moi-même écrit un ici :
2 façons de mettre en cache le JavaScript, CSS et Image simplement (L’utilisation du cache de votre navigateur optimise le temps de chargement des pages d’un site) ici : http://bit.ly/6Y2l3k

]]> Par : dYp http://innovablog.com/design/design-css-rollover-css-image/#comment-29945 dYp Thu, 12 Nov 2009 21:31:36 +0000 http://innovablog.com/design/design-css-rollover-css-image/#comment-29945 j'ai fait un essai et youpi !!! le site de mon frère http://www.echopromotion.com utilise ton tuto et ça fonctionne avec IE8 avec Virtualbox et Ubuntu. Ça devrait le faire sous Windows en vrai... Le seul défaut c'est que l'image n'est pas entièrement cliquable sous un seul navigateur: IE !!! :( heureusement je suis avec une Ubuntu dans le PC. :) j’ai fait un essai et youpi !!! le site de mon frère http://www.echopromotion.com utilise ton tuto et ça fonctionne avec IE8 avec Virtualbox et Ubuntu. Ça devrait le faire sous Windows en vrai…
Le seul défaut c’est que l’image n’est pas entièrement cliquable sous un seul navigateur: IE !!! :(
heureusement je suis avec une Ubuntu dans le PC. :)

]]> Par : Damien http://innovablog.com/design/design-css-rollover-css-image/#comment-11366 Damien Sun, 29 Mar 2009 15:58:09 +0000 http://innovablog.com/design/design-css-rollover-css-image/#comment-11366 Si j'peux me permettre, cette manière de faire ne permet le roulement que de deux images, position "off" et "over". La position "on" est délaissée... Toujours plus jolie comme effet, lorsque l'on a le bouton "off", puis "hover" la souris dessus, puis "on" quand on clique :) Mais sans javascript activé, c'est cool en effet ^^ Si j’peux me permettre, cette manière de faire ne permet le roulement que de deux images, position “off” et “over”. La position “on” est délaissée… Toujours plus jolie comme effet, lorsque l’on a le bouton “off”, puis “hover” la souris dessus, puis “on” quand on clique :)
Mais sans javascript activé, c’est cool en effet ^^

]]> Par : Olivier http://innovablog.com/design/design-css-rollover-css-image/#comment-132 Olivier Fri, 14 Dec 2007 08:40:01 +0000 http://innovablog.com/design/design-css-rollover-css-image/#comment-132 Merci pour toutes vos remarques toutes plus pertinentes les unes ques les autres. @François : tu peux être plus précis sur tes 2500 pixels de largeur ? @serial : merci ! ;) @Marie : bel exemple, merci à toi ! J'ai voulu faire le plus simple possible pour éviter de perdre du monde. Evidemment, on peut complexifier la bestiolle :) Merci pour toutes vos remarques toutes plus pertinentes les unes ques les autres.

@François : tu peux être plus précis sur tes 2500 pixels de largeur ?
@serial : merci ! ;)
@Marie : bel exemple, merci à toi ! J’ai voulu faire le plus simple possible pour éviter de perdre du monde. Evidemment, on peut complexifier la bestiolle :)

]]>