Insertion de texte dans une image a un endroit précis.

Bonjour,

voila j'ai 9 images comme celle joint au post. Cuacune d'elles représentent une lettre différente avec la flêche noire devant la lettre. Je souhaiterais dans chaque image a l'interieur de la fleche noire inserer du texte que je chope sur ma base . La question que je me pose est : Est-ce possible d' inserer mon texte dans cette fleche et qu'il soit bien cadré et comment puis je faire.

Merci pour toutes informations que vous pourrez m'apporter.


Modifié par pcsystemd (29 Oct 2008 - 13:07)

Bonjour pcsytemb,

Cela me semble effectivement tout à fait possible, je te laisse lire cet article sur la mise en forme des statistiques graphiques grâce aux CSS qui te donnera certainement quelques pistes de réflexion :

Des statistiques graphiques grâce aux CSS

Cdt,
Sylvain

Merci beaucoup. Effectivement cela a l'air d'être ce que je cherche. Je vais testé.

Bon voila j'ai fait mes tests et voici mes conclusions :

Cela fonctionne super bien avec la meme image et une seule position du texte mais la ou j'ai une question c'est que j'ai 9 images differentes avec le positionnement de la flêche qui change donc l'emplacement du texte doit changé egalement donc comment faire pour modifier l'emplacement du texte car le block ci-dessous n'est valable que pour une seule image avec un positionnement du texte unique.

Une idée?

Merci

Voici mon code dans head :

div.stats .percent {
	/* on passe l'élément span correspondant à la classe .percent 
	en affichage en bloc pour pouvoir lui donner une dimension.
	Diverses autres choses sont modifiées ensuite à votre convenance. */
	display: block;  /* on affiche le span sous forme de bloc pour lui affecter des dimensions */
	height: 10.5em;
	line-height: 3.5em;
	margin: 0px 450px;
	padding: 0px 3px 0px px;
	text-align: center;
	color: #000000;
	font-size: 0.8em;
	font-weight: bold;
	font-family: monospace; 
	-moz-border-radius: 0px;  /* un petit arrondi pour les navigateurs le supportant */
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
	cursor: default;
	z-index: 2;
}

       .v100 { width: 10.1%; }
	.v90 { width:10.1%; }
	.v80 { width: 80%; }
	.v70 { width: 70%; }
	.v60 { width: 60%; }
	.v50 { width: 50%; }
	.v40 { width: 40%; }
	.v30 { width: 30%; }
	.v20 { width: 20%; }
	.v10 { width: 10%; }

/* dp */
.dp .v100 { background-image: url(dp1.jpg); }
.dp .v90 { background-image: url(ge2.jpg); }
</style>

Mon code dans body :

<div class
<div class="stats dp">
	
	<ul>
		
		<li><span class="percent v100">150</span></li>	
		<li><span class="percent v90">60</span></li>
	</ul>
	
</div> 

Modifié par pcsystemd (30 Oct 2008 - 18:19)