28172 sujets

CSS et mise en forme, CSS3

Le map CSS c'est ?




Map map map !

Bonsoir,

J'aimerais faire du map CSS pour rendre des images cliquables, sur la méthode, je ne sais pas encore faire donc je vais Smiley google mais si vous avez des conseils ou des bonnes adresses évidemment je suis preneur.

Sur le fond je me pose une question: dans le cadre d'un léger responsive design (je dis léger parce que je débute dans les media queries) est-ce qu'il va falloir tout recalculer (même si je vais certainement le faire en WYSIWYG) pour chaque résolution?

Parce que la place de l'image change sur l'écran en fonction des résolutions non ?
Modifié par jmlapam (17 Nov 2011 - 20:02)
Salut.

En règle générale, la bonne vieille balise <map> remplit bien son office, même si c'est plutôt blasant de ne pas pouvoir agir dessus via CSS.

Pour ce qui est du responsive design, aucune idée, visiblement les coords en pourcentage, ça ne passe pas.

Sinon, pour des solutions CSS : A more accessible map et une variante : Image map for detailed information. Souci de la méthode : aucune info si les images sont désactivées.
Modifié par Florian_R (17 Nov 2011 - 17:32)
Aie, le truc c'est que j'ai axé tout mon portfolio (je commence à avoir des trucs à mettre) là-dessus parce que j'ai photoshopé un petit peu pour faire un décor sympa et j'aimerais bien que certaines parties soient réactives. Je compte pas mettre énormément de technologie si ce n'est du javascript mais évidemment faut mettre l'équivalent. Pour l'instant, avec ce que j'ai je comtpe mettre un :

<noscript><p> please enable javascript to enjoy this site !</noscript>

Mais c'est moyen... Smiley decu

Merci de tes liens, je vais les étudier en rentrant, merci Smiley cligne
Salut,

Je sais pas si ça peut t'aider mais tu peux toujours jeter un oeil là-dessus, ne serait-ce que parce ça claque méchamment ! Après question responsive design et accessibilité, je sais pas trop...
Les images map ça marche toujours, c'est accessible (si c'est fait un peu correctement), mais c'est limité:
- effets graphiques au clic, focus ou survol impossibles ou pas évidents à appliquer;
- pas d'adaptation possible avec les Media Queries.

Il y a éventuellement quelques petites choses sympa que tu peux faire en CSS avec de simples liens ou boutons HTML. Il faudrait voir le design pour dire si c'est jouable ou pas...

Mais sinon, le successeur logique des Image Maps c'est SVG.
a écrit :
effets graphiques au clic, focus ou survol impossibles ou pas évidents à appliquer


Je suis pas contre quelques précisions. Avec un peu de javascript c'est facile non ? Mais c'est moins accessible, c'est ça ?
@florian: ton lien Alsa n'est pas opérationnel.
@fvsch: pas d'adaptation possible avec les Media Queries. Smiley decu c'est bien ce qu'il me semblait.
@hchtot: je ne sais pas encore si cela m'aide mais cela m'intéresse...merci Smiley cligne
hchtot a écrit :
Avec un peu de javascript c'est facile non ?

- Changement d'image: il faut changer toute l'image et pas juste l'AREA concernée.
- Autres effets graphiques en code pur: là je vois pas trop ce qu'on pourrait faire...
a écrit :
Changement d'image: il faut changer toute l'image et pas juste l'AREA concernée.

Ah oui d'accord. Mais bon avec un petit preload et si les images sont pas trop grosses, ça passe. Cela dit, c'est vrai que la balise map ça respire un peu les années 1998/1999...
Merci pour les précisions !
hchtot a écrit :

Cela dit, c'est vrai que la balise map ça respire un peu les années 1998/1999...


Ah oui quand même, 13 ans c'est très en retard dans le web, mince Smiley mur , j'ai quand même envie de faire un design western avec des images réactives façon BD, je vais persévérer dans cette voie même si je sens que l'accessibilité s'éloigne à tour de bras.

J'avais pensé à une technique mais je ne sais pas si c'est recommandable:
je fais que de l'image et je mets l'équivalent HTML en display none via le CSS ?
Smiley ghni
hchtot a écrit :
Cela dit, c'est vrai que la balise map ça respire un peu les années 1998/1999...
Tu t'empêches d'utiliser une balise parce qu'elle est implémentée depuis trop longtemps à ton goût Smiley sweatdrop ?
Sujet clos
Aller à