[tuto] Design - menu slide - corps scroll (Suite de l'ancien Forum)

Utilisation du core de Jeedom Design
37

Salut, merci pour ton retour !
Au final j’avais oublié de précisé, mais je faisais référence à un code que tu avais publié dans un autre sujet : Image sur design en fonction de l'état de plusieurs équipements - #6 par ajja17orange

Du coup j’ai repris ce code, il fonctionne parfaitement. J’ai bien une image d’arrière-plan qui change suivant l’état d’un de mes virtuels.

Cependant, je souhaiterais modifier le CSS histoire d’avoir une image qui ne serait pas en arrière plan. Actuellement, les deux images sont déclarées en mode « background » dans le CSS, je voudrais qu’elles s’affichent en image « standard », afin de pouvoir les mettre en premier plan et les placer facilement à la souris via l’interface du design. J’ai essayé beaucoup de choses mais en vain. Je maitrise un tout petit peu le CSS, mais là avec le code de script et les variables, j’avouerai que je m’y perds :confused:.

Que dois-je modifier pour y arriver ?

Voici le code que j’utilise actuellement :

<div class="cmd image_background">
	<script>
		var ton_virtuel=450;
		$('.image_background')[0].setAttribute('data-cmd_id', 808);
		jeedom.cmd.update[808] = function(_options){
			jeedom.cmd.execute(
				{ // Récupération de la valeur  
					id: 808,
					success: function(valeur_courante) {
						$(".retour").empty().text(valeur_courante);                      

						if (valeur_courante == 1){ 
							$(":root").css("--url", "url(montheme/images/icon_home.png)");
						}else{
							$(":root").css("--url", "");
						}
					}
				}
			)
		};    
		jeedom.cmd.update[808]();
	</script>
	<style>
		:root {
		  --url: url(montheme/images/icon_camera.png);
		}
		.div_displayObject  {
			background-image: var(--url);
			background-repeat: no-repeat;
			background-size: 10%;
		}
	</style>
</div>

Merci d’avance pour votre aide :slightly_smiling_face: