Partage
  • Partager sur Facebook
  • Partager sur Twitter

(XHTML) Image : Onclick

Marche pas ? :(

14 juillet 2010 à 21:01:27

Bonjour à tous les zéros ^^

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.
<a href="http://www.monlien.com"><img src="imagenormale.png" onmouseover="this.src='imageséléctionnée.png'"  onmouseout="this.src='imagenormale.png'" onclick="this.src='imagecliquée.png'" /></a>


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. :-°

Voilà, merci :)
  • Partager sur Facebook
  • Partager sur Twitter
14 juillet 2010 à 21:16:57

Euh, je me trompe où les événements onclick, onmousout, onmouseover etc ... c'est du javascript Oo ?
  • Partager sur Facebook
  • Partager sur Twitter
14 juillet 2010 à 21:20:54

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.
  • Partager sur Facebook
  • Partager sur Twitter
14 juillet 2010 à 21:30:32

Citation : isagaw

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. :)
  • Partager sur Facebook
  • Partager sur Twitter
14 juillet 2010 à 21:35:22

Bon alors :
<img src="monimage.jpg" onclick="alert('salut');"/>


Si je ne me trompe pas, ça c'est du javascript

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.

Un exemple

Après, ça sous entend de se baser sur des images de fond, et non plus des balises img.
  • Partager sur Facebook
  • Partager sur Twitter
14 juillet 2010 à 21:52:07

Citation : isagaw

Bon alors :

<img src="monimage.jpg" onclick="alert('salut');"/>



Si je ne me trompe pas, ça c'est du javascript

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.

Un exemple

Après, ça sous entend de se baser sur des images de fond, et non plus des balises img.



http://www.w3schools.com/tags/tag_img.asp
Regarde en bas...

Pour le CSS Sprite, j'en ai déjà entendu parler mais je sais pas m'en servir. T'as pas un tuto ou un truc comme ça ? :)
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
14 juillet 2010 à 21:54:00

Citation : Kootoon

Citation : isagaw

Bon alors :

<img src="monimage.jpg" onclick="alert('salut');"/>



Si je ne me trompe pas, ça c'est du javascript

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.

Un exemple

Après, ça sous entend de se baser sur des images de fond, et non plus des balises img.



http://www.w3schools.com/tags/tag_img.asp
Regarde en bas...

Pour le CSS Sprite, j'en ai déjà entendu parler mais je sais pas m'en servir. T'as pas un tuto ou un truc comme ça ? :)



http://www.siteduzero.com/tutoriel-3-2 [...] ites-css.html ...
  • Partager sur Facebook
  • Partager sur Twitter
14 juillet 2010 à 22:05:43

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 :p ).

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) :o
  • Partager sur Facebook
  • Partager sur Twitter
14 juillet 2010 à 22:12:09

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 ?
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
14 juillet 2010 à 23:25:55

Citation : Kootoon

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. ;)
  • Partager sur Facebook
  • Partager sur Twitter
15 juillet 2010 à 21:47:45

Citation : Thiht

Citation : Kootoon

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. :euh:

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 ? :'(
  • Partager sur Facebook
  • Partager sur Twitter
15 juillet 2010 à 21:50:27

Bonjour,

Pourquoi préférer ne pas utiliser le css ? C'est pourtant fait pour ça ;)
Le javascript ne devrait jamais être utilisé dans le cadre d'une mise en forme.
  • Partager sur Facebook
  • Partager sur Twitter
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
15 juillet 2010 à 22:00:51

Citation : Kootoon

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 :o 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 :D

Bonne soirée ;)
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 12:09:42

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.
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 12:46:32

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? :euh:
(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 :-° )
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 13:50:02

Citation : pantoume

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? :euh:


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).
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 14:10:17

On peut mettre un attribut alt également dans un lien.
  • Partager sur Facebook
  • Partager sur Twitter
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
16 juillet 2010 à 14:14:37

Citation : warpShadow

On peut mettre un attribut alt également dans un lien, pas besoin d'avoir une image pour ça.



D'où tu sors ça? Commence par lire la spec http://www.la-grange.net/w3c/html4.01/ [...] tributes.html

Citation : warpShadow


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.
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 14:23:01

Citation : loun4st4ck

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 :o
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 :euh:
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 14:31:54

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.
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 14:33:36

@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é...
  • Partager sur Facebook
  • Partager sur Twitter
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
16 juillet 2010 à 14:34:12

<a href="http://www.monlien.com"><img src="imagenormale.png" onmouseover="this.src='imageséléctionnée'"  onmouseout="this.src='imagenormale.png'" onclick="this.src='imagecliquée'" /></a>


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?
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 14:39:27

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.
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 14:40:19

Citation : loun4st4ck

<a href="http://www.monlien.com"><img src="imagenormale.png" onmouseover="this.src='imageséléctionnée'"  onmouseout="this.src='imagenormale.png'" onclick="this.src='imagecliquée'" /></a>



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 ?
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 14:51:22

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.

Pour ton pb:
<a href="http://www.monlien.com"><img src="imagenormale.png" onmouseover="this.src='imageséléctionnée'"  onmouseout="this.src='imagenormale.png'" onclick="this.src='imagecliquée'" /></a>


Il manque l'extension des images.
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 15:02:58

Citation : Kootoon

Citation : Thiht

Citation : Kootoon

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. :euh:



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...
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 15:05:11

Citation : loun4st4ck

@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. :lol:

@Kootoon > question bête, mais tu n'aurais pas désactivé javascript ? :lol:
  • Partager sur Facebook
  • Partager sur Twitter
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
16 juillet 2010 à 15:10:30

Citation : warpShadow

Citation : loun4st4ck

@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. :lol:

@Kootoon > question bête, mais tu n'aurais pas désactivé javascript ? :lol:



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...
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 15:35:46

1
<a href="http://www.monlien.com"><img src="imagenormale.png" onmouseover="this.src='imageséléctionnée'"  onmouseout="this.src='imagenormale.png'" onclick="this.src='imagecliquée'" /></a>


Il manque les extensions de fichiers pour ton onMouseOut et onClick je pense tout simplement , tu as testé ?
  • Partager sur Facebook
  • Partager sur Twitter
16 juillet 2010 à 15:37:34

Non, je l'ai déjà dis, regarde :

Citation : Kootoon

Citation : Kootoon

Citation : Thiht

Citation : Kootoon

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. :euh:



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.

<script src="js/prototype.js" type="text/javascript"></script>
	   <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
	   <script src="js/lightbox.js" type="text/javascript"></script>
	   <script src="js/jquery.js" type="text/javascript"></script>
       <script src="js/ascenseur.js" type="text/javascript"></script>

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 ? :(
  • Partager sur Facebook
  • Partager sur Twitter

(XHTML) Image : Onclick

× 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.
  • Editeur
  • Markdown