[Résolu] Plusieurs Zones transparentes cliquables sur une seule image

Salut à tous,

Comment faire le plus simplement possible plusieurs "zones" transparentes cliquables sur une seule image ?

voir l'exemple : http://img72.imageshack.us/img72/5610/imagebd3.jpg

Merci


Modifié par yank (15 Mar 2008 - 17:12)

En vrai : avec un éditeur graphique, et ensuite une simple image MAP.

Mais on peut aussi faire des tas de choses qu'on croit plus simples, en fait bricolos et peu/pas accessibles, avec CSS et des superpositions d'images de background...

Laurent Denis a écrit :
En vrai : avec un éditeur graphique, et ensuite une simple image MAP.

Mais on peut aussi faire des tas de choses qu'on croit plus simples, en fait bricolos et peu/pas accessibles, avec CSS et des superpositions d'images de background...

Justement à l'époque je connaissais les map area par exemple qui fonctionnait bien mais bon le code était un peu pourri ...

En css, il doit y avoir moyen, un peu comme les menus avec images ?

En plus c'est vraiment pour faire du côté visuel, pas bien grave pour le contenu...

Après si ce n'est pas accessibles du tout alors tant pis, mais j'aimerai bien savoir ...

merci
Modifié par yank (14 Mar 2008 - 18:57)

yank a écrit :
Justement à l'époque je connaissais les map area par exemple qui fonctionnait bien mais bon le code était un peu pourri...

J'aimerais bien connaitre tes critères objectifs pour différencier un bon code d'un code un peu pourri.

yank a écrit :
En plus c'est vraiment pour faire du côté visuel, pas bien grave pour le contenu...

Heu... ben ce sont des liens (contenus) ou de la déco? Faudrait savoir...

Dis on que ce n'est qu'un "plus" au site que j'ai fait ... à la base il n'y a rien à cet endroit la, mais je me suis dit que ça serait sympa d'avoir un petit bonus ...

En gros au survol d'un animal par exemple (en cliquant), on est redirigé vers wikipedia et la page concernant l'animal en question ...

Effectivement les "map" sont une bonne solution sauf que mon image est en background via css, donc pour finir la solution la plus simple est : Menu graphique css

Ps : Ce que j'appelle code pourri c'est genre du code fait avec dreamweaver en mode création seulement activé, et mise en page avec tableaux.

Du code propre : Que l'on puisse lire le code en 2 secondes et compréhensible, en gros css+xhtml pour ma part. C'est tout
Modifié par yank (15 Mar 2008 - 15:56)

yank a écrit :
Dsauf que mon image est en background via css, donc pour finir la solution la plus simple est : Menu graphique css

ça, c'st un assez bon exemple de "code pourri", tiens, en fait, si on veut aller par là.

Laurent Denis a écrit :


ça, c'st un assez bon exemple de "code pourri", tiens, en fait, si on veut aller par là.

Ah ?

Pourquoi est il dans les tutos d'alsa alors ?

Et sinon alors, vous voyez une autre solution ?

Ou tout simplement ne rien faire ? Je demande seulement si vous avez une idée qui serait "accessible" et non pas un débat sur le code bon ou non ...

Merci
Modifié par yank (15 Mar 2008 - 17:11)

yank a écrit :


Et sinon alors, vous voyez une autre solution ?

La répétition étant la base de la pédagogie:

Laurent Denis a écrit :
En vrai : avec un éditeur graphique, et ensuite une simple image MAP.

Mais on peut aussi faire des tas de choses qu'on croit plus simples, en fait bricolos et peu/pas accessibles, avec CSS et des superpositions d'images de background...

Laurent Denis a écrit :


La répétition étant la base de la pédagogie:

Oui donc "map" est le plus simple. J'avais bien compris.

sinon effectivement il y a plein de choses plus ou moins bien.*

exemple : image map

exemple : en css

Merci quand même

Bon weekend
Modifié par yank (15 Mar 2008 - 17:38)

yank a écrit :
Pourquoi est il dans les tutos d'alsa alors ?

Parce que faire du ménage prend du temps, demande d'avoir une vue d'ensemble que l'on a pas toujours, etc. Mais dans l'absolu il faudrait contrôler la pertinence des contenus dans le temps, effectuer les mises à jour nécessaires, etc.

L'alternative à ce travail éditorial certes utile, c'est de faire confiance aux lecteurs pour exercer leur esprit critique. Ce qui est bien sûr plus simple quand on a déjà des connaissances et une expérience de la conception web. Quoi qu'il en soit, ni Alsacréations, ni Openweb, ni Pompage.net, ni A List Apart ne sont parole d'évangile.

Quand je lis dans l'un des articles d'Alist Apart mentionnés ci-dessus:

a écrit :
however, a text-based webpage is always a great starting point for addressing accessibility concerns

J'ai peur. Et avec raison: A More Accessible Map ne valide pas le niveau d'accessibilité A, quand une simple et vénérable image MAP HTML le fait sans aucun problème

<edit>Au fait: saurez-vous trouver pourquoi ? </>
Modifié par Laurent Denis (15 Mar 2008 - 20:42)

Laurent Denis a écrit :
Quand je lis dans l'un des articles d'Alist Apart mentionnés ci-dessus:

however, a text-based webpage is always a great starting point for addressing accessibility concerns

J'ai peur. Et avec raison: A More Accessible Map ne valide pas le niveau d'accessibilité A, quand une simple et vénérable image MAP HTML le fait sans aucun problème

<edit>Au fait: saurez-vous trouver pourquoi ? </>
Mais sachant que mon image est dans la css, est ce qu'il est quand même possible de faire simplement une image map ou faut il absolument que l'image soit dans le html ... ? Il me semble que ce n'est pas possible sinon ... après peut être que je me trompe et dans ce cas ce serait cool
Modifié par yank (15 Mar 2008 - 22:21)

Florent V. a écrit :

Parce que faire du ménage prend du temps, demande d'avoir une vue d'ensemble que l'on a pas toujours, etc. Mais dans l'absolu il faudrait contrôler la pertinence des contenus dans le temps, effectuer les mises à jour nécessaires, etc.

L'alternative à ce travail éditorial certes utile, c'est de faire confiance aux lecteurs pour exercer leur esprit critique. Ce qui est bien sûr plus simple quand on a déjà des connaissances et une expérience de la conception web. Quoi qu'il en soit, ni Alsacréations, ni Openweb, ni Pompage.net, ni A List Apart ne sont parole d'évangile.

Bien entendu

Laurent Denis a écrit :
<edit>Au fait: saurez-vous trouver pourquoi ? </>

Sans images, pas d'équivalent textuel à moins d'avoir désactivé JS ?

A part ça le focus ne fait pas changer de couleur les villes comme le fait le survol à la souris et le moindre redimensionnement de texte explose la mise en page des informations sur les villes.

yank a écrit :
Mais sachant que mon image est dans la css

Tu ne prendrais pas les choses un peu à l'envers?

Normalement on procède comme ça:
1. je veux faire ceci;
2. voilà le code adapté.

Toi tu procèdes ainsi:
1. je veux utiliser ce code (ici une image de fond en CSS);
2. comment j'adapte le reste pour que ça soit un peu accessible?

Là je vois comme un petit problème de méthode.

Florent V. a écrit :

Tu ne prendrais pas les choses un peu à l'envers?

Normalement on procède comme ça:
1. je veux faire ceci;
2. voilà le code adapté.

Toi tu procèdes ainsi:
1. je veux utiliser ce code (ici une image de fond en CSS);
2. comment j'adapte le reste pour que ça soit un peu accessible?

Là je vois comme un petit problème de méthode.

Non pas vraiment


En fait ce qui se passe c'est qu'à la base comme je l'ai dis au début du topic, à cet endroit il ne devait rien y avoir, donc forcement je n'avais pas prévu. Après coup un ami ma suggéré que ça serait "chouette" si je pouvais faire ça à cet endroit la, donc justement maintenant j'essaie de voir si ça vaut le coup ou non de le faire.

De plus concernant mes sites, je considère qu'ils sont largement accessibles au plus grand nombre, en tout cas je fais ce qu'il faut pour. J'ai appris à faire des sites en tableaux à l'époque, maintenant grâce à alsa en autres j'ai bien appris à utiliser les css, mais j'essaye toujours d'en savoir plus concernant telle ou telle technique.

En fait si tout le monde me répond : non ce n'est pas possible, en plus pas accessible dans ce cas c'est clair que je réfléchirais 2 fois avant de le réaliser, alors que pour le moment personne ne m'a vraiment donné de réponses, un peu vague tout ça, tout le monde cherche plutôt à comprendre pourquoi je pose cette question plutôt que de m'aider à y répondre.

Quoiqu'il en soit ce topic est [Résolu].

Je pense que je vais essayer de mon côté des choses très simples style "map" en vérifiant bien entendu que ce soit accessibles.

Bon Dimanche à tous
Modifié par yank (16 Mar 2008 - 13:32)

Ben en fait j'imagine mal ce que tu peux faire d'autre qu'une image map, qui soit à la fois simple à mettre en place et un minimum accessible. Ou alors j'ai mal compris ta demande dès le début.

En tout cas, je veux bien voir ce que ça donnera au final.

Florent V. a écrit :
En tout cas, je veux bien voir ce que ça donnera au final.

Si je le fais pas de soucis