Plan d'un batiment et imagemap

Bonjour,

je souhaite réaliser le plan d'un batiment (j'ai déjà une image bitmap de ce batiment) et je connais les balises map et area. Je souhaiterais mettre en place des effets lors du mouseover : lorsqu'on survole avec la souris une salle, la zone de la salle devrait être mise en évidence (assombrissement de la zone). Je voudrais aussi qu'il y ai un nom pour chaque salle. Si je passe la souris sur le nom, la zone serait également mise en évidence et le nom de la salle grossirait. Est-ce possible de réaliser ça juste avec HTML + CSS (c'est à dire sans JavaScript).
Pour la mise en évidence de la salle je n'ai pour l'instant trouvé qu'une solution à base de JavaScript (au pire je peux me contenter d'"obliger" mes visiteurs à avoir JS activé... mais il faut que ça reste un minimum accessible si il est désactivé)
http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/
http://davidlynch.org/js/maphilight/docs/demo_world.html
Le problème c'est qu'il n'y a pas de "nom" dans l'exemple proposé...
Comment procéderiez vous ?

Merci d'avance

scls19fr a écrit :
Est-ce possible de réaliser ça juste avec HTML + CSS (c'est à dire sans JavaScript).

Non, le changement d'image est toujours en JavaScript. Dans le cas d'une image map, il faut noter qu'on va devoir changer l'image complète lors du survol ou du focus d'un AREA, et non pas juste une portion d'image. Si on a vingt zones, ça va faire 21 images contenant chacune toutes les zones.

a écrit :
au pire je peux me contenter d'"obliger" mes visiteurs à avoir JS activé... mais il faut que ça reste un minimum accessible si il est désactivé

Afficher l'information sur l'image de base, et se contenter de la rendre plus visible/évidente au survol (images pour le survol). S'assurer que chaque AREA a un attribut alt correctement renseigner. Et penser aussi à doubler l'image map par une liste de liens texte, qui sera d'ailleurs utile à tous les visiteurs qui fonctionnent mieux avec du texte qu'avec des zones sur des images.

Oui mais moi j'imaginais plutôt une solution avec un div flottant pour le texte et relier l'évènement mouseover sur l'area avec un changement de taille sur le div flottant contenant le nom de la salle (et vice verça... c'est à dire gérer le mouseover sur le div flottant pour mettre en évidence l'area)

scls19fr a écrit :
Oui mais moi j'imaginais plutôt une solution avec un div flottant pour le texte et relier l'évènement mouseover sur l'area avec un changement de taille sur le div flottant contenant le nom de la salle (et vice verça... c'est à dire gérer le mouseover sur le div flottant pour mettre en évidence l'area)

C'est pas la solution classique, mais ça peut éventuellement se gérer en bricolant ainsi, oui. Sauf qu'on utilisera plutôt le positionnement absolu (par rapport à un conteneur positionné en relatif), pas le positionnement flottant.

C'est là où j'ai du mal avec les css... mon image est dans un div je veux positionner mon texte relativement à cette image... comment je dois procéder
Voici actuellement l'état de mon problème...
http://iutp.univ-poitiers.fr/gte/multimedia/plan/

c'est surtout sur cette page http://iutp.univ-poitiers.fr/gte/multimedia/plan/gte_tp/
que je veux mettre des noms de salles
Modifié par scls19fr (22 Jan 2009 - 11:14)

Alors dans l'absolu je ferais soit une image statique la plus claire possible (en prenant soin de rédiger une version texte, à placer en dessous de l'image, ou de donner un index de liens s'il faut faire des liens vers d'autres pages), soit une animation Flash pour avoir une image réactive (avec là encore une version texte et/ou un index de liens).

On dépasse ici les capacités des images map il me semble. Et donc la troisième solution (la moins bonne) serait effectivement de bricoler avec du JavaScript et du positionnement CSS. Comment faire côté CSS? Comme je le disais plus haut: en utilisant le positionnement absolu.

Le principe est le suivant:
1. avoir un conteneur pour l'image ou image map (un DIV), et le positionner en relatif sans le décaler par rapport à sa position normale;
2. placer les contenus à positionner dans ce DIV également, et les positionner en absolu par rapport aux limites de ce conteneur.
3. Tâcher d'avoir un contenu HTML un minimum cohérent en l'absence de CSS, un rendu à peu près correct en l'absence de JavaScript, et une navigation possible au clavier (utiliser les évènements JS au survol mais aussi au focus!).
Modifié par Florent V. (22 Jan 2009 - 11:39)

Je ne veux absolument pas de Flash pour ça (oui c'est un peu une religion ! )
Il y a un truc qui m'échappe tu dis "
1. avoir un conteneur pour l'image ou image map (un DIV), et le positionner en relatif sans le décaler par rapport à sa position normale;
2. placer les contenus à positionner dans ce DIV également, et les positionner en absolu par rapport aux limites de ce conteneur."

Prenons l'exemple de la page http://iutp.univ-poitiers.fr/gte/multimedia/plan/gte_tp/
Actuellement il y a

<div id="contenu">
  <img src="gte_tp_rdc.png" alt="" usemap="#themap" class="map" />
  <map id="themapid" name="themap">
    <area shape="rect" coords="76,20,179,89" href="#1" alt="testalt" title="testtitle" />
  </map>
</div>

donc dans le div contenu je met un div par salle... jusque là c'est ok...
<div id="contenu">
<img src="gte_tp_rdc.png" alt="" usemap="#themap" class="map" />
<map id="themapid" name="themap">
<area shape="rect" coords="76,20,179,89" href="#1" alt="testalt" title="testtitle" />
</map>
<div id="salle1">Nom salle 1</div>
</div>

mais qu'est-ce que je met dans ma CSS si je dois placer en (130px,55px) le texte par rapport au coin supérieur gauche de mon image ?


j'ai d'ailleurs un autre pb : centrer mon image...
j'ai bien essayé en mettant
#contenu {
text-align: center;
}
dans ma css et ça ne fonctionne pas dès que j'ai l'attribut class à "map"
sur mon image afin d'avoir l'effet de mise en évidence de la salle...
Ici c'est centré
http://iutp.univ-poitiers.fr/gte/multimedia/plan/amphis/
mais je n'ai pas mis d'area/map ni d'effet de "highlight".
Modifié par scls19fr (22 Jan 2009 - 12:24)

scls19fr a écrit :
Je ne veux absolument pas de Flash pour ça (oui c'est un peu une religion ! )

Je dirais que c'est surtout une méconnaissance de Flash.

scls19fr a écrit :
mais qu'est-ce que je met dans ma CSS si je dois placer en (130px,55px) le texte par rapport au coin supérieur gauche de mon image ?

J'ai donné des indications à ce sujet, à deux reprises. Je ne vais pas rédiger le code, mais te laisser chercher un peu.
Donc: apprendre à utiliser le positionnement absolu. Par exemple en commençant par lire attentivement:
http://openweb.eu.org/articles/initiation_absolue
Et on pourra compléter avec:
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html

Je te remercie pour ces deux références mais j'avais déjà regardé le premier... et c'est bien là le problème...

car j'ai fait

#salle1 {
color: rgb(0,0,255);
position: absolute;
top: 55px;
left: 130px;
}

et le div salle1 n'est pas du tout placé où je l'imaginais... on dirais qu'il est placé par rapport au haut de la page... pas par rapport à au coind supérieur gauche de mon image !!!
Modifié par scls19fr (22 Jan 2009 - 14:29)

En fait je n'avais pas compris un truc... je suis obligé dans la css d'indiquer comment est positionner le div contenu (ça ne me semblait pas nécessaire)
via
#contenu {
position: relative;
}

par contre j'ai quand même encore 3 soucis.

Le texte doit grossir lorsque je passe la souris dessus.

j'ai donc mis une classe "salle" sur mon div qui contient le nom de la salle

<div id="salle1" class="salle" ><a href="#01">Salle 1</a></div>

et dans ma css

.salle a {
  color: rgb(0, 0, 255);
  text-decoration: none;
}

.salle a:hover {
  font-weight: bolder;
  font-size: x-large;
}

le problème c'est que le coin supérieur gauche du texte reste toujours positionné sur le même point alors que c'est le centre du texte qui devrait être toujours au même endroit !

scls19fr a écrit :
En fait je n'avais pas compris un truc... je suis obligé dans la css d'indiquer comment est positionner le div contenu (ça ne me semblait pas nécessaire)

C'est pourtant écrit en toutes lettres dans l'article d'Openweb:

a écrit :
Le fonctionnement de la position absolue

Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. Celui-ci peut-être :
- une boîte elle-même positionnée (position relative ou absolue) ;
- le bloc conteneur initial, à défaut de boîte positionnée, c'est à dire en pratique le plus souvent la fenêtre du navigateur.

Pour rappel, par défaut un élément est positionné en statique (position: static), pas en relatif comme certains le croient parfois.

scls19fr a écrit :
le problème c'est que le coin supérieur gauche du texte reste toujours positionné sur le même point

Eh oui, c'est normal. Tu positionnes en absolu le coin supérieur gauche à un endroit précis (si tu utilises left et top. Tu pourrais positionner à un point précis le coin inférieur droit si tu veux, mais ça reste le même problème. Solution: donner une largeur à l'élément du texte, et centrer le texte avec un text-align.

Ah... mais je voudrais une solution qui fonctionne quelque soit le texte que je place... (donc je ne connais à priori pas la largeur de mon div qui accueille le nom de la salle !)

Merci pour ta patience

scls19fr a écrit :
Ah... mais je voudrais une solution qui fonctionne quelque soit le texte que je place... (donc je ne connais à priori pas la largeur de mon div qui accueille le nom de la salle !)

Prends suffisamment large. Prévois des blocs de 400px de large par exemple. Et surveilles tes intitulés.

"Et surveilles tes intitulés." ?????
tu parles de la grosse fôte d'aurthograffe sur la première page "Acceuil" au lieu d'"Accueil" ?

Non, je parle uniquement de la longueur des intitulés. Si tu utilises une largeur précise (ce qui est nécessaire pour centrer le texte dans un élément positionné en absolu), il faudra surveiller la longueur des intitulés pour qu'ils ne dépassent pas.
Modifié par Florent V. (22 Jan 2009 - 19:21)

ok merci du conseil... sinon j'ai commencé à ajouter le javascript pour faire en sorte que si je passe sur la zone, l'intitulé grossisse aussi....
il reste à faire l'inverse (quand je passe sur l'intitulé la zone est mise en évidence)