Wstawianie parametru z innego obiektu do IMG SRC

Question

Witam! Męczę się od jakiegoś czasu z pewnym problemem w HTML (sekcja script, więc może powinienem umieścić temat w javascript?), a mianowicie w kodzie:

let liczba_pomocnicza = 0;
let element, element2;
var xx=2;
var yy=2;
function Graj(x){
	element = x;
	if (liczba_pomocnicza==0) {element2=a33;}
	if (liczba_pomocnicza==0) {liczba_pomocnicza=1;}
	element2.innerHTML="<img src='slice_"+xx+"_"+yy+".jpg'>"
	element.innerHTML=""
	element2=element;
  
}

chciałbym w miejscu

element2.innerHTML="<img src=

wstawić adres obrazka img wyciągnięty z innego obiektu, czy istnieje w ogóle taka możliwość? Nie chciałbym podawać tego adresu lecz żeby na stronie, po kliknięciu w tym miejscu podstawił się adres pliku graficznego który jest już w innym elemencie (w tym wypadku elemencie który się nazywa "element"/"x")

Obrazki mają nazwy a00, a01, a02, a03, a10, a11, a12, [...], a33, chciałbym po kliknięciu dokonać podmiany tegoż obrazka między dwoma elementami.

Pozdrawiam serdeczcznie

 

Answer 1

Nie wiem czy dobrze zrozumiałem Twoje pytanie ale obrazek możesz załadować dynamicznie np. przez element.style.backgroundImage

 

przykład

<div class="element" id="element1">Kliknij mnie</div>
<div class="element" id="element2">Kliknij mnie</div>

.element {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 1em;
  
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

const xx=1, yy=2,
      IMG_URL='https://picsum.photos/500/500/?random=';

let element1, element2;

window.addEventListener('load', load);

function load() {
  element1 = document.querySelector('#element1');
  element2 = document.querySelector('#element2');
  
  element1.addEventListener('click', loadImage);
  element2.addEventListener('click', loadImage);
}

function loadImage(e) {
  let id = e.target.id.replace('element', '');
  id = (id == xx) ? xx : yy;
  
  // url('https://picsum.photos/500/500/?random=' + xx)
  // url('https://picsum.photos/500/500/?random=' + yy)
  e.target.style.backgroundImage = 'url('+IMG_URL+id+')';
}

 

Comments

... lub np. przez odwołanie się do atrybutu src elementu <img>

 

przykład

<img src="" id="element1" title="Kliknij mnie" alt="Kliknij mnie" />
<img src="" id="element2" title="Kliknij mnie" alt="Kliknij mnie" />

img {
  display: block;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 1em;
}

const xx=1, yy=2,
      IMG_URL='https://picsum.photos/500/500/?random=';

let element1, element2;

window.addEventListener('load', load);

function load() {
  element1 = document.querySelector('img#element1');
  element2 = document.querySelector('img#element2');
  
  element1.addEventListener('click', loadImage);
  element2.addEventListener('click', loadImage);
}

function loadImage(e) {
  let id = e.target.id.replace('element', '');
  id = (id == xx) ? xx : yy;
  
  // src='https://picsum.photos/500/500/?random=' + xx
  // src='https://picsum.photos/500/500/?random=' + yy
  e.target.src= IMG_URL+id;
}