• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wstawianie parametru z innego obiektu do IMG SRC

VPS Starter Arubacloud
+1 głos
224 wizyt
pytanie zadane 11 stycznia 2022 w HTML i CSS przez PatrykO2 Nowicjusz (240 p.)

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

 

1 odpowiedź

0 głosów
odpowiedź 12 stycznia 2022 przez VBService Ekspert (251,270 p.)

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+')';
}

 

komentarz 12 stycznia 2022 przez VBService Ekspert (251,270 p.)
edycja 12 stycznia 2022 przez VBService

... 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;
}

 

Podobne pytania

0 głosów
3 odpowiedzi 146 wizyt
pytanie zadane 16 lipca 2017 w JavaScript przez wotaher Użytkownik (610 p.)
0 głosów
3 odpowiedzi 901 wizyt
pytanie zadane 23 kwietnia 2018 w HTML i CSS przez Paweł123 Nałogowiec (33,500 p.)
0 głosów
1 odpowiedź 1,318 wizyt
pytanie zadane 30 października 2015 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...