Superposition image et #value# dans les widgets Multistate V4

[Mandelbrot]

Suite du sujet Afficher la température et l'image sur widget :

Bonjour à tous, malgré quelques recherches, je n’ai pas réussi à trouver la réponse à la question ci-dessus.

Je voudrais créer un widget Info Numeric multistate avec des images en fonction de tests sur la valeur à afficher.

Jusque là, je n’ai pas de soucis, j’ai trouvé comment afficher la bonne image et comment afficher la valeur grâce à divers contributeurs sur ce forum.

Par contre, je voudrais que le texte correspondant à #value# s’affiche sur l’image et pas à côté et là, je ne sais pas comment faire et je n’ai pas trouvé de solution simple dans les exemples et liens disponibles.

Merci pour votre aide.

[Salvialf]

Salut,

Il faut ajouter un inline style avec position: absolute; et le positionnement top et left.

[Mandelbrot]

Merci beaucoup pour votre réponse rapide.

Le code que j’utilise dans l’action à faire pour le test est le suivant :

<img src='data/img/green.png'><span style="font-size:17px!important;">#value# #unite#</span>

Je ne connais rien au CSS, j’ajoute le code dans la balise ?

Désolé pour les questions de béotiens…

[Salvialf]

Salut,

J’espère que cette base pourra t’aider… à adapter à ton usage :

<img src='data/img/green.png'/><div style="position:absolute;color:red;top:50%;left:50%;font-size:12px;">#value# #unite#</div>

• position:absolute; permet le placement au-dessus de l’image.
• color:red met le texte de couleur rouge.
• top:50%;left:50%; Permet de centrer l’affichage de la valeur au milieu de l’image.

[Mandelbrot]

Merci beaucoup, c’est très clair et ça fonctionne !