Insérer un texte dynamique dans une image

Version imprimable

30/09/2019, 21h06
nadfri2019

1 pièce(s) jointe(s)

Insérer un texte dynamique dans une image

Bonjour,

Je suis entrain de programmer le jeu du "plus/moins" en JS pour apprendre ce langage.

J'aimerai bien que les propositions fausses s'affiche dans un carré barré.

Le problème, c'est comment afficher un texte centré dans ce petit carré qui correspondra à la valeur saisie par le joueur?

En sachant, qu'à l'origine, j'ai cinq images de carré identique vierge, représentant les 5 essais
Pièce jointe 506686
30/09/2019, 21h48
eleydet

Bonsoir,
Le problème, c'est qu'on ne sais pas comment sont construites les images: Avec SVG, canvas...?

Je ne connais ni SVG ni Canvas :?

Voici le code que j'ai utilisé pour générer mes images (cœur et case en dessous):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let imgCoeur;
let imgCase;
 
	for (let i=0;i<count;i++) //affiche les coeurs
	{
		imgCoeur= document.createElement("img");
		imgCoeur.setAttribute("src", "img/coeur.png");
		imgCoeur.setAttribute("class", "coeur");
		document.getElementById("vie").appendChild(imgCoeur);
	}
 
 
	for (let k=0;k<count;k++) //affiche les cases
	{
		imgCase= document.createElement("img");
		imgCase.setAttribute("src", "img/case.png");
		imgCase.setAttribute("class", "case");
		document.getElementById("vie").appendChild(imgCase);
	}

le tout dans cette div HTML:

Code:

1
2
<div id="vie">
</div>

01/10/2019, 07h54
eleydet

Bonjour,
Une solution est de remplacer les images par des conteneurs de type div avec des identifiants et des images de fond (background-image : ...). Ainsi, il est facile d'écrire ce que l'on veut dans les conteneurs.
01/10/2019, 13h55
javatwister

Citation:

Envoyé par eleydet

Bonjour,
Une solution est de remplacer les images par des conteneurs de type div avec des identifiants et des images de fond (background-image : ...). Ainsi, il est facile d'écrire ce que l'on veut dans les conteneurs.

+1;

par contre, je te conseille de créer une version bis de ton image avec une transparence modifiée avant de la mettre en background;
02/10/2019, 12h31
nadfri2019

Merci je vais tester cela de suite.
07/10/2019, 14h02
nadfri2019

Merci à tous, ça a marché parfaitement.