[Résolu] Comment placer des légendes sur une image ?

Rebonjour ou rebonsoir

Pouvez-vous m'indiquer (partie xhtml et partie css) comment placer des légendes sur une image à une place fixe par rapport à celle-ci, avec un trait ou une flèche pointant sur un endroit précis de la figure ?

Autrement dit, comment obtenir cela ?




(ou la même chose avec des flèches ?)


Merci d'avance
Modifié par cadbor (19 Mar 2010 - 10:55)

Ne pas le faire. Ne pas dissocier l'information entre deux technologies : c'est pratique au premier regard, mais dénué de sens quand on y réfléchit. Faire une image avec la légende, et une alternative textuelle / + une description étendue qui reproduise le tout.

Mais sinon, cela se fait très couramment sur wikipédia, il suffit hélas de chercher du côté des modèles de cartes complétées.

Merci de ta réponse, Laurent

Non, je ne peux pas placer les légendes dans la figure (c'est bien sûr la solution de facilité qui vient immédiatement à l'esprit) car le document doit pouvoir être traduit en plusieurs langues.

Or les traducteurs n'ont pas forcément l'outil graphique ad hoc et n'aiment pas beaucoup devoir traduire les légendes dans les figures, car cela fait baisser leur rendement. (En général, ils se contentent de constituer un tableau Word ou Excel avec la traduction des légendes. A charge pour le client de reporter les différentes traductions dans les schémas.)

Quant aux techniques de type Wikipedia, je ne dispose pas des compétences nécessaires. (Le cahier des charges m'impose d'ailleurs de rester en xhtml - css.)
Modifié par cadbor (19 Mar 2010 - 08:49)

cadbor a écrit :

Quant aux techniques de type Wikipedia, je ne dispose pas des compétences nécessaires. (Le cahier des charges m'impose d'ailleurs de rester en xhtml - css.)

les techniques de Wikipédia reposent justement sur le détournement d'XHTML CSS pour faire de fausses images

Il suffit d'aller regarder le code CSS de choses comme celle-ci, en sachant bien que c'est le mal.
Modifié par Laurent Denis (19 Mar 2010 - 01:43)

Bonjour,

On voit les travailleurs de la nuit...


En fait la solution est très simple :

1) Placer les traits ou les flèches directement dans la figure.

2) Placer la figure dans un div positionné en relatif pour permettre le positionnement absolu des légendes (si aucune indication de positionnement n'est donnée, l'image se place dans le flux normal)

3) Placer les légendes en positionnement absolu (par rapport au conteneur) en les dimensionnant selon les besoins.

<ol>

	<li>Retirez l'axe du levier de blocage du plateau porte-cames :
    
    <div style="position:relative">
    <p class="Image"><img src="Figures/Retrait axe levier de blocage.png" width="267" height="208" /></p>
    
    <p style="position:absolute; top:2cm; left:7.4cm; width: 194px;">Légende explicative blablabla</p>
    
    </div>
    
    </li>

</ol>

Bonjour,

Et un schéma avec des références numériques, hum? Tu reprends le schéma actuel, et à la place du texte tu places un gros 1 dans un cercle pour le premier, un 2 dans un cercle pour le deuxième. Puis, dans le texte qui suit l'image, tu donnes la légende.

Merci de ta réponse, Florent

Les deux techniques de légende (textes positionnés associé à un trait ou une flèche, références numérotées) sont applicables.

Dans mes documents, je choisis l'une ou l'autre selon l'importance des textes explicatifs : lorsque les textes explicatifs sont conséquents, avec éventuellement des illustrations complémentaires, j'utilise les références numérotées (quoiqu'il m'arrive aussi d'utiliser des zones de texte au contenu riche) ; lorsqu'il s'agit de simples indications, j'utilise des zones de texte associées à un trait.

Le second critère est la lisibilité même de la figure : selon sa complexité, le nombre de légendes, la place disponible pour celles-ci, j'utilise l'une ou l'autre des techniques.


PS : Je considère a priori la question comme étant résolue. A moins que l'un d'entre vous relance le débat en proposant d'autres solutions.