Bonjour,
Pour le débutant que je suis, votre site est une vraie mine de renseignements très précieux.
J'ai été très intéressé par la lecture de 2 de vos articles:
"Faire une zone réactive (image map) en CSS", et surtout
"Afficher / Masquer des "calques" sans javascript".
et aussi précédemment par l'article:
"Un menu déroulant en CSS et XHTML (horizontal et vertical)"
qui m'a permis de réaliser le menu de mon site.
j'ai modifié une des pages de mon site qui, pour afficher des ensembles image/texte (tableau 1 ligne/2 colonnes) au survol de zones d'une carte, utilisait les balises OnMouseOver et OnMouseOut. J'ai pu réaliser quelque chose de satisfaisant en me basant sur la 2e note précitée mais je me pose un certain nombre de questions.
La page en question se trouve à l'adresse suivante:
http://users.skynet.be/bk372295 suivre Péru_1998 et Carte trek.
Les 10 zones d'intérêt de la carte en background sont marquées par un point rouge; les carrés rouges qui les entourent sont un bord de 2px que j'ai appliqué provisoirement dans le seul but de visualiser les ajustements de margin-left et margin-top pour entourer ces points.
Exemple de zone:
#z10 { /* zone la plus à gauche sur la carte - Machu Picchu */
float : left;
width : 20px;
height : 20px;
margin-left : 76px;
margin-top : 72px;
border: 2px solid red; /* pour visualiser les zones cliquables */
}
Le problème est que lorsque je supprime ce border, les zones cliquables se sont déplacées (à l'exception de Z10). Pourquoi ? Les coordonnées des différentes zones n'ont apparemment pas le même point de référence. Comment cela fonctionne t-il ?
Autre problème: Pour le corps de la page, j'ai défini en CSS une hauteur de 460px pour la carte et les ensembles image/texte apparaîssant lors des survols. En fonction de la taille d'affichage de Firefox et autres navigateurs similaires, ces ensembles image/texte se déplacent verticalement. Je souhaiterais pouvoir leur donner une position fixe en dessous de la carte mais je ne trouve pas de solution.
Même si cela fonctionne, une balise block <table> ne peut se trouver dans une balise inline <span> et d'ailleurs, le valideur XHTML1.0 ne l'accepte pas. La solution serait de transformer la balise block en inline. J'ai essayé ceci:
CSS:
.table_inline {
display: inline;
}
et HTML:
<table class="table_inline">
mais ce n'est toujours pas valide.
Je ne vois pas comment résoudre ce problème.
Merci d'avance si vous pouvez m'aider.
Modifié par zenobe (30 Sep 2006 - 17:30)
