Code html dans design

J’ai repris le code Image sur design en fonction de l'état de plusieurs équipements de ce sujet afin d’afficher différentes images en fonction de l’état.
Cela marche trés bien.
Pour réutiliser le code pour les autres pièces , j’aimerai passer le début du chemin de l’image en variable

if (valeur_courante == 0)	// Volets Fermés - fenetre fermée - lumière eteinte
                                 { 
   	$(":root").css("--url", "url(montheme/images/bureau/000.jpg)");
}

J’ai créé une variable avec le chemin

var chemin_image="montheme/images/bureau";

Mais je ne sais pas le réutiliser dans le code pour remplacer l’url
Si qqun peut m’aider merci

1 « J'aime »

Salut

voila le principe dans un bloc

$variableurldebut = 'montheme/images/';
$variablemilieu = 'bureau';
$variablefin = '/000.jpg';

$variablerecompose = $variableurldebut . $variablemilieu . $variablefin ;
2 « J'aime »

Pour compléter la réponse d’Olive :

Version Javascript :

var cheminImg = 'montheme/images/bureau/';
var nomImg = '000';  
var extImg = '.jpg';
var variablerecompose = cheminImg + nomImg + extImg;

$(":root").css("--url", "url("+variablerecompose+")"); // montheme/images/bureau/000.jpg
$(":root").css("--url", "url("+cheminImg+"50"+extImg+")"); // montheme/images/bureau/50.jpg
3 « J'aime »

Bonsoir,
je vous remercie pour vos réponses.Il n’y a donc pas possibilité de mettre le nom en dur de l’image +extension à la fin.Il faut tout faire avec des variables ?
ex:

var cheminImg = 'montheme/images/bureau/';
$(":root").css("--url", "url("+cheminImg+"000.jpg)");

non ça fonctionne pas , écrit comme ça

Pour faire suite à ce topic, j’ai simplifié le code suite à votre aide

Image sur design en fonction de l’état de plusieurs équipements

Au lieu de faire une multitude de si dans le code suivant les cas des images
préalable avoir nommé ces images avec son code binaire comme dans l’ordre du virtuel : 0,1,10…
utiliser le code suivant :

<div class="cmd image_background">
  <span class="retour"></span>
    <script>
	var ton_virtuel=4509;
    var chemin_Image='montheme/images/cuisine/';
    var extJPG='.jpg';
        $('.image_background')[0].setAttribute('data-cmd_id', ton_virtuel);
  
                      jeedom.cmd.update[ton_virtuel] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: ton_virtuel,
                                success:  function(valeur_courante) {
//$(".retour").empty().text(valeur_courante);                      
var nom_Fich = valeur_courante;
var cheminComplet = chemin_Image + nom_Fich + extJPG;
 $(".retour").empty().text(cheminComplet);      
 $(":root").css("--url", "url("+cheminComplet+")");
 
//else{
//$(":root").css("--url", "");
//}

    }})
   	};    
    jeedom.cmd.update[ton_virtuel]();
  </script>
  <style>

:root {
  --url: url(montheme/images/cuisine/10000.jpg);
}

    .div_displayObject  {
      background-image: var(--url);
background-position: right 100% bottom 100%;
    }

  </style>

</div>

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.