28173 sujets

CSS et mise en forme, CSS3

Bonjour ou vu l'heure bon(nouveau)jour ^_^

Pour mon site j'essaie depuis un petit moment de mettre en place une carte en 2d sur lesquel le visiteur peut se déplacer, j'ai essayé plusieurs méthodes et actuelement j'essaie celle du image map avec les balises area shape="rect" et tout tout.

Je génére ca dynamiquement grace à mon ami php mais le soucis c'est du coté (x)html/css qu'il se trouve, je voudrait pouvoir placer une bordure autour de ces zones, afin de découper la carte, que le visiteur voit réellement sur quelle case il clique etc.. et surtout permettre à cette bordure de changer de couleur quand le visiteur pointe sa sourit dessus...

Si je fais :
<area shape="rect" coords="x,y,x,y" style="border:1px solid blue">
ben ca ne fais rien ^^

Ma question : il y a t'il un moyen de mettre une bordure à une zone réactive d'une image ?

Tout marche parfaitement bien, j'ai les bonnes zones de délimitées mais si le membre ne les voient pas ca ne me convient pas trop Smiley decu

Si quelqu'un a une solution, je suis preneur ^^

Merci d'avance =)
Bonjour,

Il n'est pas possible de faire une bordure à un élément area : ces éléments servent à générer une zone cliquable sur la surface d'une image, mais ils ne sont pas en eux-mêmes affichés par les navigateurs graphiques et ne génèrent pas de boîte CSS (sauf si l'image est absente).

Pour obtenir ce type d'effet, il faut remplacer l'image map par une pseudo-image map réalisée avec une liste de liens et une image d'arrière-plan CSS.

Sinon, il vaut mieux d'une manière générale que les zones cliquables d'une image map soient directement visible dans l'image elle-même, indépendamment du :hover.

(et ne pas oublier le traitement bien spécifique des alternatives textuelles des area et de l'image Smiley cligne )
Modifié par Laurent Denis (25 Jul 2006 - 04:15)
Donc autant ne pas passer par des areas mais des listes de liens... remarque c'est sans doute plus accéssible... c'est de cette alternative textuelle dont tu parlais ?

Les zones sont des rectangles, quel sera le meilleur moyen de placer les liens ? Des lignes de listes à puces avec la proprieté inline ? plein de div ?
J'ai opté pour un tableau, le quadrillage est tracé avant avec photoshop, ce sera plus simple pour placer dynamiquement les persos ^_^