[HTML] Curseurs sur map>area

[NicoMSEvent]

Alors voilà, j'ai trois petits problèmes à vous exposer.

Premièrement, sous FF : La case "a34" (déplacement vers le nord-est) n'a pas de curseur personnalisé, alors que je lui en donné un comme les cinq autres cases de déplacement. (les curseurs GIF sous bien reconnus sous FF) -> mot clé paradite dans la balise "style", j'ai corrigé le code ci dessous

Deuxièmement, sous IE(6 et 7) : impossible de faire apparaitre un curseur sur ce type d'élément (apparemment, les GIF posent problème, comme second choix, il prends un CUR. J'ai testé, ça marche sur les balises A HREF).

Troisièmement, sous FF : Les accesskey fonctionnent la première fois. Il y a une modification du code source via AJAX, et après ça, les accesskey ne fonctionnent plus (la case reste sélectionnée/active, on voit un liseré autour de la zone) -> http://www.jeuweb.org/board/jouer-au-cla...-5939.html (j'ai contourné, mais je trouve ça pas propre)

Voilà le code incriminé

Code :

<map name="testmap" id="zoneclick">
<!--        pt1 pt2
    pt6         pt3
        pt5 pt4
                   pt1     pt2     pt3     pt4     pt5     pt6         -->
<area shape="poly" coords="310, 89,397, 89,438,132,397,175,310,175,267,132" id="a23" href="?action=default&amp;case=23" alt="Se d&eacute;placer vers le nord" style="cursor:url(n.gif),url(n.cur),n-resize;" accesskey="z" />
<area shape="poly" coords="185,133,266,133,309,176,266,220,185,220,142,176" id="a32" href="?action=default&amp;case=32" alt="Se d&eacute;placer vers le nord-ouest" style="cursor:url(no.gif),url(no.cur),nw-resize;" accesskey="a" />
<area shape="poly" coords="439,133,528,133,570,176,528,220,439,220,398,176" id="a34" href="?action=default&amp;case=34" alt="Se d&eacute;placer vers le nord-est" style="cursor:url(ne.gif),url(ne.cur),ne-resize;" accesskey="e" />
<area shape="poly" coords="185,222,266,222,309,265,266,308,185,308,142,265" id="a52" href="?action=default&amp;case=52" alt="Se d&eacute;placer vers le sud-ouest" style="cursor:url(so.gif),url(so.cur),sw-resize;" accesskey="q" />
<area shape="poly" coords="439,222,528,222,570,265,528,308,439,308,398,265" id="a54" href="?action=default&amp;case=54" alt="Se d&eacute;placer vers le sud-est" style="cursor:url(se.gif),url(se.cur),se-resize;" accesskey="d" />
<area shape="poly" coords="310,266,397,266,438,300,397,353,310,353,267,300" id="a63" href="?action=default&amp;case=63" alt="Se d&eacute;placer vers le sud" style="cursor:url(s.gif),url(s.cur),s-resize;" accesskey="s" />
</map>

Quelqu'un a déjà eu le problème? si oui, comment l'avez-vous résolu?

[Sephi-Chan]

Essaye en définissant plusieurs curseurs dans ton CSS :

element {

  cursor: url(browsers.png), url(ie.cur), default;

}

Sephi-Chan

[NicoMSEvent]

Tout d'abord, merci d'avoir regardé (ça fait plaisir quand on a une ch'tite réponse ^^)

c'est déjà ce que je fais

j'ai l'impression qu'on ne peut pas changer les curseurs des balises <map><area> sous IE... ça m'embête vraiment
(j'ai passé toute l'après-midi sur google a chercher, et je ne trouve rien de satisfaisant)

autre petit truc, j'ai un curseur relativement grand, je me demande si on ne peux pas mettres les coordonnées du pointeur en plein centre au lieu de "haut-gauche" (c'est pas très ergonomique comme ça)

Edit : donc, j'ai mis ceci dans le css, a la place de changer l'attribut "style"

Code :

area {
  cursor: url(n.gif), url(n.cur), default;
}

ça fonctionne parfaitement sous FF, mais pas du tout sous IE.
il n'y a que l'élément "area" qui ne fonctionne pas...
l'élément "a" par exemple marche bien sous IE

[Sephi-Chan]

Hm… Tu peux toujours faire une solution à base de Javascript, ainsi, ça reste dégradable simplement et élégamment. Il suffit de t'arranger pour remplacer le curseur par une image minuscule et vide, avec un curseur discret (genre crosshair ou text) par défaut.

Je te conseille de tester aussi sous Webkit et c'est un bon élève en terme d'interprétation des standards.


Sephi-Chan

[NicoMSEvent]

Webkit? je ne connaissais pas... je viens de le télécharger, et pas moyen de l'installer/lancer

Dégradable, dégradable, ça marche pas du tout sous IE, alors ça ou rien, c'est pareil sous IE :p

Je persévère, j'y arriverai

[Sephi-Chan]

Webkit, c'est le moteur de rendu. Celui qui est utilisé par Safari, Chome et pas mal d'autres petits (sur Linux, il y a Epiphany, entre autre).

C'est le navigateur le plus respectueux des standards (il tape le 100% à Acid3 depuis longtemps), mais aussi le plus avancé (support du HTML 5, support des CSS3 transforms, des CSS animations, des deux en même temps, etc.). Bien sûr, pour voir ces exemples, il faut un navigateur basé sur Webkit.

Au final, ces choses ne sont pas encore utilisable (puisque les concurrents sont tous à la ramasse), mais les navigateurs basés sur Webkit sont une sorte de référence : si ce que tu fais ne fonctionne pas dessus, c'est que tu as merdé quelque part.
Donc si tu fais bien les choses, tu ne passeras pas de temps en plus à les rendre compatible avec Webkit.

Il est également utilisé dans pas mal de smartphones (les iPhone, les Palm Pré, ceux sous Android, ceux sous Windows Mobile (avec Iris)) donc il a tendance à prendre de l'ampleur.


Sephi-Chan

[NicoMSEvent]

ouaip, j'ai lu ça sur wikipedia ^^

je respecte déjà a 100% de le xHTML 1.0 strict et pareil pour le CSS 2.0... j'ai juste une erreur en javascript due a la librairie prototype qui réagit bizarrement, mais rien de catastrophique vu que le script ne plante pas.

J'ai déjà laissé tombé la compatibilité IE 6 (trop de hacks à utiliser pour que ça ai un rendu convenable, même si c'est jouable)

Je crois que je vais aussi laisser tomber cet aspect graphique pour IE 7 (pas testé sous le 8, p-e que le 8 le supporte, je ne suis pas sur)

Bref, les développeurs sont toujours limité par le maillon le plus faible lors de leurs développements (dans ce cas ci IE), et donc on ne profite jamais de tout ce qu'apporte les meilleurs browsers parce que ce serait pas pris en charge pas les plus mauvais :-s
(a moins d'utiliser des hacks a la pelle et de ne plus respecter entierement les standards )

pour moi, que IE aille de faire... réencoder chez Billou (pour rester poli :p )

[Sephi-Chan]

Si tu fais des jeux avec lesquels tu ne compte pas gagner d'argent, la meilleure alternative est à mon sens d'ignorer complètement IE. C'est comme ça qu'on fera le mieux avancer IE. :p


Sephi-Chan

[NicoMSEvent]

Pour moi, c'est d'abord me faire connaitre un peu dans ce domaine là

Je n'ai pas encore réfléchi a comment rentabiliser, je sorts tout de ma poche pour le moment (serveur de développement : 250 euro sans compter l'électricité, hébergement : 28 euro par an)

Si je peux rendre IE compatible facilement (sans trop travailler), je le fais, je ne vais pas totalement ignorer IE non plus, je ne vais pas me tirer une balle dans le pied, mais si ça commence a trop se compliquer, je rendre ça compatible en dégradant la fonctionnalité. Si vraiment ce n'est pas compatible, soit si c'est blocant, je n'utilise pas la technologie (j'ai abandonne SVG comme ça), soit je prends une plus vieille technologie (GIF transparent a la place des PNG, ou gif animé a la place des MNG).

---

ha la belle affaire, j'ai téléchargé safari pour windows, que vois-je : encore plus de problème qu'avec IE!

Je m'explique : Les map>area disparaissent une fois qu'un déplacement sur la carte est effectué (l'appel ajax se fait bien), et les curseurs personalisés n'apparaissent pas non plus! :'(

AU SECOURS!!!!!

(j'ai fait passé le "test acid3" a safari, que de bonheur : 100% )

bon bref, si je ne trouve pas aujourd'hui une astuce pour arranger ça, je retarderai p-e un peu la beta

[NicoMSEvent]

ça y est, j'ai corrigé deux ou trois petits bugs mineurs, ça fonctionne sur quasi tous les browser

FF : ok à 100%

Problème de curseur personnalisé non affiché, mais ça reste jouable sur IE, Chrome et Safari

Plus grave : sous Safari (uniquement), dès qu'on a un appel AJAX, le map>area disparait tout simplement! On peut contourner ça en utilisant les touches de raccourci : azeqsd qui vont dans les 6 directions possibles, mais pour moi ce n'est pas jouable.
Pour le moment, seul les combats ont besoin de JS pour tourner, tout le reste est 100% accessible sans JS (kéké si tu me lis, tu sera fier de moi :p )