+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [javascript] image clicable (/showthread.php?tid=3579)
[javascript] image clicable - Ter Rowan - 22-01-2009
coucou, je suis en train de me dire que j'ai fait une grosse cagade mais pas sur... donc j'aimerais avoir vos avis
je développe avec du javascript et de la gestion d'événement
et je crée des images clicables. Pour ce faire j'utilise le format
<a id="id" href="#toto"><img ..../></a>
je colle un événement sur la balise <a> et c'est parti.
j'ai fait ainsi dans une vision "accessibilité" : le <a> indicant qu'on peut cliquer. (bon mon site ne doit pas du tout être acccessible par un non voyant donc pas sur que ce soit si pertinent que cela mais voilà, les premiers posts de keke m'avaient sensibilisé, et j'ai tordu ça à ma sauce)
mais bon accessible ou pas, le système marche, j'ajoute un événement sur la balise <a> en initialisation de page, et lorsque le gestionnaire d'événément se déclenche, il se déclenche sur l'image (principe de bouillonnement je crois)
je me déplace donc dans le dom pour capter l'id de la balise <a> (soit le père de la balise <img>)
mais voilà... sous ff3 (et probablement d'autres) je me suis aperçu hier que je pouvais cliquer sur l'image mais aussi sur un pixel autour de l'image
or... quand je clique autour, je ne suis pas sur l'image mais sur le <a> ce qui me plante.. (car je cherche le père de la balise cliquée, donc le père de <a> et non <a>)
ainsi j'ai un traitement particulier pour ce cas mais je ne trouve pas cela propre. je me demandais donc si j'avais le droit d'utiliser directement l'image comme zone clicable (ajout de l'image dans le gestionnaire d'événement) sachant qu'il me faudrait rajouter dans la balise des id et classes.
<img id="toto" class="tutu titi" src..../>
est ce que c'est possible, propre, etc... ? ou vaut il mieux rester avec ma balise <a> et traiter l'exception du contour en javascript ?
ps si vous savez comment rajouter en css (si je survole la zone alors ej change d icone) ce serait sympa de me le filer ^^
RE: [javascript] image clicable - Hakushi - 22-01-2009
Je suis pas sur d'avoir tout compris, tu aurais un exemple?
Pour changer le pointer en css (si j'ai bien compris ton PS :x ):
Code :
img
{
cursor: pointer;
}RE: [javascript] image clicable - Allwise - 22-01-2009
Salut, c'est pas du tout crade que de mettre un event sur une balise image, rassure-toi
RE: [javascript] image clicable - Holy - 23-01-2009
(22-01-2009, 11:39 PM)Allwise a écrit : Salut, c'est pas du tout crade que de mettre un event sur une balise image, rassure-toiLe problème, c'est l'accessibilité ^^
La balise img ne compte pas de tabindex par défaut et je ne suis même pas sûr qu'il soit possible d'en lui attribuer un, mais dans tous les cas les tabindex c'est de la *****. Conséquence, les personnes qui naviguent au clavier ne peuvent pas avoir accès à l'évènement lié à ta balise <img>. C'est assez gênant.
J'ai eu le même type de problème que Ter Rowan, et j'ai décidé de conserver le tout sur ma balise <a>.
Par contre je ne comprends pas ton problème Ter Rowan, il te suffit pas simplement de dire que c'est sur la balise elle-même que tu dois agir plutôt que sur son père ? Enfin il faudrait un exemple précis.
RE: [javascript] image clicable - Ter Rowan - 23-01-2009
pffiou, j'ai commencé à faire une grosse réponse jusqu'au moment, où je me suis demandé que la connerie venait peut être de plus haut, donc laissez tomber mon soucis
simplement je constate que si j'ai un <a><img/></a>, la zone clicable n'est pas que l'image mais l'image (en bleu) ET la ligne de pixel en dessous de l'image(en rouge) :
IIIIIII
IIIIIII
IIIIIII
IIIIIII
xxxxx
c est bizarre quand meme non?
RE: [javascript] image clicable - keke - 23-01-2009
C'est pas un soucis lié au margin, padding ou celling ?
En tous les cas, Ter Rowan, je suis ravi d'avoir pu te sensibiliser à la problématique des non-voyants. Encore plus ravi de savoir que tu essaie de le prendre en compte dans tes développements.
Si tu as des exemples simples à montrer (qui tiennent en une page, sans connexion préalable ...) je serais ravi d'essayer de t'apporter mon expérience dans ce domaine. Certains de mes joueurs non-voyants m'ont toujours assurés de bien vouloir faire des tests pour mes propres projets. Je suis persuadé qu'ils pourraient aussi t'aider ... Par contre, il faut savoir correctement interpréter les réponses données ... C'est pas toujours facile de se comprendre.
kéké
RE: [javascript] image clicable - Ter Rowan - 23-01-2009
merci keke mais j ai dans mon équipe au boulot un déficient visuel. Pour avoir discuter avec lui, je sais que mon interface ne passera pas (html dynamique, drag and drop..) interface trop chiante quand on a ces soucis
alors je fais au plus propre (enfin j essaie) mais dans tous les cas, ce jeu ne touchera probablement pas ce public (en supposant qu il en touche un un jour ^^)
RE: [javascript] image clicable - Astrea - 23-01-2009
Pour ton problème, essai de mettre le contenu textuel de ta balise <a> à 1px.
Un style='font-size:1px;' devrait faire l'affaire.
RE: [javascript] image clicable - Argorate - 23-01-2009
C'est exact, sur ie tout du moins, il considère qu'il y a un retour a la ligne après ton image, et si tu met pas la police d'écriture toute petite, sa te fait une petit espace au dessous...
Après il je suppose que tu as mis border="0"
EDIT: je viens dallez voir, j'ai eu se problème la semaine dernière, j'avais une image dans un <td>, j'ai mis:
<td style="font-size:1px;> et c'était réglé
RE: [javascript] image clicable - Ter Rowan - 23-01-2009
oui pour le border :p
mais merci je vais tenter cela, c est bien possible que ça me résolve plusieurs petits soucis
merci à vous