Sur mon site, j'aimerais afficher mes boutons, qui comportent chacun trois images différentes : Une normale, une quand on passe a souris dessus, une quand on clique dessus.
Voici donc mon code.
J'ai pris ce code sur internet qui apparemment avait l'air de satisfaire des gens. Mais moi, l'image onclick ne marche pas, elle ne s'affiche pas. Donc j'aimerais qu'elle s'affiche. Je précise que je ne souhaite pas utiliser ni de CSS parce que ça fait charger les images, donc les images s'affichent pas tout de suite et c'est pas joli, ni de Javascript parce que c'est lourd, ça ferait du code en plus que je ne comprendrais même même pas.
Pourquoi ne pas le faire en HTML/CSS, tout simplement?
Une image en fond, une autre image quand :hover, une autre quand :focus. A priori ça fonctionne très bien.
Euh, je me trompe où les événements onclick, onmousout, onmouseover etc ... c'est du javascript Oo ?
Bah non vu que mon onmouseover marche avec ma balise img.
Citation : John-John
Pourquoi ne pas le faire en HTML/CSS, tout simplement?
Une image en fond, une autre image quand :hover, une autre quand :focus. A priori ça fonctionne très bien.
C'est ce que j'ai fait, sauf que j'ai précisé que justement je ne veux pas ce système là, les images mettent du temps à se charger, sur le coup. Bon après une fois que la page s'est bien chargée, ou a été actualisée, ça va, mais des visiteurs de mon site m'ont signalé que ça ne s'affichait pas bien. Donc je reste sur du HTML seulement.
Ensuite, la meilleure technique c'est pour moi le css avec les pseudo class
Citation : Kootoon
.... les images mettent du temps ....
Et là, je dis : vive le CSS Sprite, qui consiste à rassembler les images en une seule, une seule image chargée une fois, quand tu survoles, tu ne changes pas d'image, mais de position. Absolument aucun retard d'affichage n'est possible, et aucune monstruosité de blanc qui apparait lorsque tu survoles l'image pour la première fois.
Ensuite, la meilleure technique c'est pour moi le css avec les pseudo class
Citation : Kootoon
.... les images mettent du temps ....
Et là, je dis : vive le CSS Sprite, qui consiste à rassembler les images en une seule, une seule image chargée une fois, quand tu survoles, tu ne changes pas d'image, mais de position. Absolument aucun retard d'affichage n'est possible, et aucune monstruosité de blanc qui apparait lorsque tu survoles l'image pour la première fois.
Ensuite, la meilleure technique c'est pour moi le css avec les pseudo class
Citation : Kootoon
.... les images mettent du temps ....
Et là, je dis : vive le CSS Sprite, qui consiste à rassembler les images en une seule, une seule image chargée une fois, quand tu survoles, tu ne changes pas d'image, mais de position. Absolument aucun retard d'affichage n'est possible, et aucune monstruosité de blanc qui apparait lorsque tu survoles l'image pour la première fois.
Merci Thiht, c'est justement le tuto que je cherchais comme exemple, mais pas moyen de le retrouver (en fait, j'étais persuadé qu'il était sur alsacreation ).
Sinon, je ne dis pas le contraire Kootoon, l'attribut onclick existe, et comme le montre la page que tu m'as donnée, cet attribut prend comme valeur un script.
Pour moi qui dit script dans une page web, dis javascript (ou démonerie qui existerait sur Windows, comme les ActiveX si je ne me trompe pas, mais je suis très mal placé pour en parler, je connais pas du tout)
Ok, merci pour vos réponses, mais alors, pourquoi sur le lien que j'ai donné, ce qu'il y a marqué ne marche pas une fois dans une balise ?
Simplement car tu ne précises pas les extensions des images, à part pour le onMouseOut.
Ah oui nan mais ça c'est un erreur quand j'ai mis le code sur mon message, dans mon code les ".png" y sont tous bien.
Bon, au départ je voulais un code assez simple, j'aimerais pas trop utiliser les sprites css, m'enfin si il le faut vraiment, je le ferais, tant pis.
Y'a vraiment personne qui a une solution ?
Bon, au départ je voulais un code assez simple, j'aimerais pas trop utiliser les sprites css
Les sprites CSS sont bien plus puissants que l'utilisation de onmouseout et cie et le code est on ne peut plus simple.
Ensuite, pardonnez-moi si je me trompe, mais à chaque événement sur onmouseout et cie, il va effectuer un this.src = url; ce qui va produire une requête HTTP supplémentaire, et ce à chaque fois.
En plus, le fait de les utiliser n'arrangera en rien ton problème de survol : la prmeière fois que tu survoleras alors que tes images ne sont pas encore en cache, tu verras un gros blanc.
Pour terminer, avec les Sprite CSS, tu ne verras jamais ce problème, et en plus tu as un super tuto (avec l'auteur en prime sur le forum) sur le sdz
Vous recommandez tous l'usage des sprites CSS mais il y a un point important qui vous échappe: l'accessibilité.
Ici il s'agit de boutons, donc d'images porteuses d'informations qui doivent obligatoirement être dans le code HTML en prenant soin de bien renseigner l'attribut alt (qui sert à communiquer l'information véhiculée par l'image) et non pas en background CSS.
Mettre une image porteuse d'information en background CSS, c'est suicidaire pour un accès via un UA ne supportant pas (ou partiellement) CSS: Lecteurs d'écrans, robots d'indexations, navigateurs textuels en mode console, utilisateurs navigants avec CSS/images désactivées etc.
En conclusion: Laisse tes images dans le code HTML, javascript est le meilleur moyen pour gérer leurs effets interactifs tout en restant accessible.
mais si au lieu de coder en html une image avec un alt, il code son lien avec un title? Est ce que ça marche, ça?
(bon, j'avoue je pose aussi la question pour moi car beaucoup de mes liens ont une image en background et non pas en html )
mais si au lieu de coder en html une image avec un alt, il code son lien avec un title? Est ce que ça marche, ça?
L'attribut title sert (principalement) à identifier explicitement la cible d'un lien dans certains cas de figures, il n'est pas fait pour remplacer les alt (alternative textuelle).
Il ne s'agit pas d'un réel bouton mais bien d'un lien mis en image
Une image lien est une image porteuse d'information, ton exemple du sdz ne veut rien dire, c'est un texte ayant un fond dégradé lors du hover.
Je doute que ce soit le cas ici, à vérifier.
Vous recommandez tous l'usage des sprites CSS mais il y a un point important qui vous échappe: l'accessibilité.
Ici il s'agit de boutons, donc d'images porteuses d'informations qui doivent obligatoirement être dans le code HTML en prenant soin de bien renseigner l'attribut alt (qui sert à communiquer l'information véhiculée par l'image) et non pas en background CSS.
Mettre une image porteuse d'information en background CSS, c'est suicidaire pour un accès via un UA ne supportant pas (ou partiellement) CSS: Lecteurs d'écrans, robots d'indexations, navigateurs textuels en mode console, utilisateurs navigants avec CSS/images désactivées etc.
En conclusion: Laisse tes images dans le code HTML, javascript est le meilleur moyen pour gérer leurs effets interactifs tout en restant accessible.
Bonjour,
Question accessibilité, tu as tout à fait raison, les CSS Sprite ne sont pas recommandés
Entièrement d'accord pour les robots d'indexation, les navigateurs textuels.
Néanmoins, on ne sait pas à quoi va lui servir son rollover, et à quoi ce bouton ressemble. Pour moi je vois deux cas de figure :
Son bouton est purement visuel (ne contient aucun texte), est dans ce cas je suis d'accord, javascript + alt.
Son bouton contient du texte et là deux cas se présentent :
Ou il met le texte en dur dans l'image qu'il a crée.
Ou il crée le lien qui contient un background-image, et dans le lien, il écris son texte.
Dans la première solution, ok niveau accessibilité avec l'attribut alt, mais niveau texte dans l'image hum
Dans la seconde solution, CSS Sprite pour son rollover/clic, et puis pour tous les services que tu as cités (navigateurs textuels etc....) il y a toujours le texte dans le lien.
Après, tout dépend de son cas, je suis plus pour les CSS Sprite, après j'avoue que je n'ai pas envisagé dans un premier temps l'aspect accessibilité
Et pour terminer, je dois aussi t'avouer qu'entendre dire que le javascript reste un moyen accessible, ça me choque un peu
Bah, ce sont des boutons qui ne contiennent qu'une image, en fait c'est une galerie d'image, et il y a des icones de 100x100 qui montrent une petite partie de chaque image. Quand on clique dessus, l'image s'affiche, mais je veux aussi que l'icone se modifie au survol, et au clic de la souris. Aucun texte sinon.
@Loun4st4ck> Ouaip, j'ai relu son post d'origine, en effet il n'a pas prévu de texte, mais ça ne suppose pas que ses images contiennent du texte pour autant.
Pour le alt par contre, j'étais persuadé que si, pourtant je ne l'ai jamais utilisé...
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Est pour moi une image porteuse d'information qui doit rester dans le code HTML avec l'attribut alt, après c'est à l'auteur de la discussion de détailler sa demande.
Ceci dit, il ne faut pas recommander systématiquement l'usage des sprites CSS sans connaitre le contexte.
@isagaw: Oui, javascript aide à améliorer l'accessibilité dans certains cas de figures: menu déroulant, gérer les effets interactifs etc.
@warpShadow: Lis les spécifications HTML stp, l'attribut alt n'est pas autorisé sur les liens.
@Kootoon: aucun texte, ok, mais ton image est indispensable pour naviguer dans la galerie, c'est bien ça?
Pas de texte dans les images selon l'auteur donc ok pour le javascript.
loun4st4ck, encore une fois, d'accord avec toi, javascript permet de rendre interactif, mais un site peut-être interactif sans pour autant être accessible non ?
De même qu'un site peut-être accessible dans javascript.
Est pour moi une image porteuse d'information qui doit rester dans le code HTML avec l'attribut alt, après c'est à l'auteur de la discussion de détailler sa demande.
Ceci dit, il ne faut pas recommander systématiquement l'usage des sprites CSS sans connaitre le contexte.
@isagaw: Oui, javascript aide à améliorer l'accessibilité dans certains cas de figures: menu déroulant, gérer les effets interactifs etc.
@Kootoon: aucun texte, ok, mais ton image est indispensable pour naviguer dans la galerie, c'est bien ça?
C'est ça, oui. En fait, dans mon <a> y'a aussi : rel="lightbox" title="Le titre de mon image qui s'affichage sous l'image dans ma lightbox."
puisque j'utilise la lightbox, c'est aussi plus joli que d'afficher l'image dans une page blanche, et d'ailleurs, j'ai déjà 5 scripts javascript dans ma page, rien ne marche, normal ?
Ok, étant donné que ton image est indispensable pour naviguer dans la galerie et que l'absence de celle-ci provoque une perte d'information, n'oublie pas de renseigner l'attribut alt.
Ok, merci pour vos réponses, mais alors, pourquoi sur le lien que j'ai donné, ce qu'il y a marqué ne marche pas une fois dans une balise ?
Simplement car tu ne précises pas les extensions des images, à part pour le onMouseOut.
Ah oui nan mais ça c'est un erreur quand j'ai mis le code sur mon message, dans mon code les ".png" y sont tous bien.
Je l'ai déjà dis, en fait c'est quand j'ai recopié le code sur mon message, j'ai oublié de les mettre pour les autres. :$
J'ai mis l'attribut alt, mais ça ne résous toujours pas mon problème...
@warpShadow: Lis les spécifications HTML stp, l'attribut alt n'est pas autorisé sur les liens.
Je viens de te dire que j'ai vérifié et que j'étais persuadé du contraire alors que je n'avais pourtant jamais utilisé de propriétés alt dans un lien.
@Kootoon > question bête, mais tu n'aurais pas désactivé javascript ?
Bah, j'en sais rien, non je crois pas, j'sais même pas comment on fait, puis en fait j'ai un menu déroulant, et il marche sur les autres pages, donc je pense pas...
Ok, merci pour vos réponses, mais alors, pourquoi sur le lien que j'ai donné, ce qu'il y a marqué ne marche pas une fois dans une balise ?
Simplement car tu ne précises pas les extensions des images, à part pour le onMouseOut.
Ah oui nan mais ça c'est un erreur quand j'ai mis le code sur mon message, dans mon code les ".png" y sont tous bien.
Je l'ai déjà dis, en fait c'est quand j'ai recopié le code sur mon message, j'ai oublié de les mettre pour les autres. :$
J'ai mis l'attribut alt, mais ça ne résous toujours pas mon problème...
Edit: bon voilà j'ai modifié le code de mon premier message parce que ça fait trois fois que je le répète (oui oui je sais, c'est ma faute ^^')
Edit2: Bon, je vais paraître vraiment ridicule, mais en fait, j'ai recherché sur Google, et j'ai vu qu'il y avait un lien que j'avais pas encore visité. J'ai regardé, puis en fait j'ai vu que ce n'était pas onclick qu'il fallait mettre, mais onmousedown... Ce qui est pas trop logique quand même, enfin je sais pas, mais bon... Donc maintenant, ça marche parfaitement, mais j'ai un autre problème, comme je l'ai déjà dit, j'ai 5 scripts javascript intégrés sur ma page, mais ils ne marchent pas, tandis que sur les autres pages (il y en a moins de 5 sur les autres pages mais ce sont les mêmes) ils marchent.
Les 3 premiers, c'est pour la lightbox, le 4ème c'est jQuery, et le dernier, c'est un menu déroulant qui se roule/déroule quand on clique sur le titre du menu.
Y'a pas de limite de scripts JS par pages, j'espère ?
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !