Je voulais créer une fonction qui définit l'URL sur la photo, puis change l'image d'arrière-plan du div sélectionné avec cette photo.

function changePhoto(id) {
            var y = document.getElementById("baza_big_photo");
            y.style.display = "block";
            var z = '"' + "url(" + "'" + "./assets/min_images/" + id + ".jpg" + "'" + ")" + '"';
                y.style.backgroundImage = z;
                console.log(z);
        }

Par exemple, j'envoie tn_baza01 (nom de la photo) comme paramètre, mais l'image ne s'affiche pas dans mon plus grand div :(

J'ai 20 petites divs avec des identifiants différents et une grande en plus. Lorsque je clique sur une petite image, cela devrait changer l'image d'arrière-plan div plus grande en cette image.

0
Ven ek 16 janv. 2017 à 00:54

2 réponses

Meilleure réponse

Vous ne devriez pas envelopper le url(..) dans "

Donc, le changer en

var z = "url('./assets/min_images/" + id + ".jpg')";

Devrait résoudre le problème

0
Gabriele Petrioli 15 janv. 2017 à 22:13

La concaténation dans var z crée une chaîne comme "url('./assets/min_images/tn_baza01.jpg')" et les guillemets de début / de fin ne sont pas valides.

Mettez à jour cette ligne pour supprimer les guillemets de début / de fin

var z = "url(" + "'" + "./assets/min_images/" + id + ".jpg" + "'" + ")";

Et il créera une chaîne comme url('./assets/min_images/tn_baza01.jpg')

Tant que le chemin de l'image est valide, cela devrait fonctionner correctement.

function changePhoto(id) {
            var y = document.getElementById("baza_big_photo");
            y.style.display = "block";
            var z = "url(" + "'" + "./assets/min_images/" + id + ".jpg" + "'" + ")";
            y.style.backgroundImage = z;
        }

changePhoto('tn_baza01');
<div id="baza_big_photo"></div>
0
Michael Coker 15 janv. 2017 à 22:02