Superposition image widget

[Guyom]

Bonjour,
Je viens demander un petit coup de main, je débute depuis peu. J’ai déjà trouver pas mal d’informations ici mais il y a un problème que je n’arrive pas a régler.
J’ai voulu utiliser un widget existant et le modifier en changeant les images. Le soucis c’est que le curseur se retrouve au milieu de la nouvelle image, je ne sais pas comment faire pour le mettre en dessous.

A gauche ce que je voulais faire, a droite l’original
J’ai essayé de rechercher dans le code, mais je n’ai pas encore les compétences pour tout comprendre.

<div style="width:96px;height:40px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<div class="row">
        <span style="vertical-align:middle;" class="action center-block iconCmd"></span>
    </div>
    <script>
        jeedom.cmd.update['#id#'] = function(_options){
            if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
                if (jeedom.cmd.normalizeName('#name#') == 'on') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Slider On OFF/ToggleCircle_ON.png">');
                }
            } else {
                if (jeedom.cmd.normalizeName('#name#') == 'off') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Slider On OFF/ToggleCircle_OFF.png">');
                }
            }
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
    </script>
</div>

Merci pour votre aide

[Salvialf]

Salut,

Superposition image et #value# dans les widgets Multistate V4

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.

L’idée est la même…

[Guyom]

Merci pour la réponse.
J’avais vu ce post, mais c’est l’inverse que je voudrais faire, je crois que je me suis mal exprimé.
En fait a gauche de la capture c’est l’état actuel, et je voudrais le curseur en dessous de l’image, comme a droite de l’image.
(Au passage, merci pour ta galerie et tes partages de widgets )

[Salvialf]

As-tu essayé d’augmenter la valeur du height sur la première ligne?

Merci

[Guyom]

Oui, je suis allé jusqu’à 200, rien n’a changé…

[Salvialf]

J’avais pas fini j’écris par étape avec les enfants…

… et enlever style="vertical-align:middle ?

[Guyom]

Bon j’ai fais le boulet en fait, je t’ai répondu trop vite, je faisais goûter les enfants…
J’avais modifié le height mais jusqu’à 80, pas assez appartement. C’est le with que j’avais monté à 200.
Désolé pour ton temps. Merci à toi

[Salvialf]

C’est pas si mal pour 2 gars qui font goûter les enfants