[js] Skrypt wyświetlający losowe zdjęcie + link

Question

Witam serdecznie,

mam prośbę o pomoc w skrypcie do wyświetlania na mojej stronie losowej grafiki. Chciałbym, by każdy gif mógł mieć osobny odsyłacz.

Np. tak by obrazek1 był linkiem do https://www.google.com/ a obrazek2 do https://www.bing.com/ ?

<script language="JavaScript">
var ile=2; //ilosc obrazków w galerii
obrazki=new Array();
obrazki[0]='obrazek1.gif';
obrazki[1]='obrazek2.gif';
obrazek=obrazki[Math.floor(Math.random()*ile)];
document.write('<img src="'+obrazek+'">');
</script>

Bardzo proszę o pomoc

Comments

<script language="JavaScript">

gdzieś Ty takie coś znalazł? w muzeum? :)

Jak chcesz linki to jeszcze musisz dodać <a href=""></a>

---

W muzeum zwanym google :)

obrazki[0]='<a href="https://www.google.com/"><img src="dodaj1.gif" /></a>';

Próbowałem tak już wcześniej i to nie działa :/

 

Answer 1

Na twoim miejscu wywalił bym w ogóle document.write. Zastosuj DOMContentLoaded lub funkcję zmieniającą obrazek. Dalej jeżeli dasz obrazki[0]='<a href="https://www.google.com/"><img src="dodaj1.gif" /></a>'; zastosuj wtedy getElementById('div w którym ma znaleść się losowy obrazek"').innerHTML=obrazek. I wywal w ogóle coś takiego jak <script language="JavaScript">, po prostu <script>.  Pozdrawiam

Comments

Ale czy to nie spowoduje, że obrazki będą się zmieniać same (bez przeładowania strony)? Ja chciałbym by z każdym odświeżeniem strony pojawiał się losowo obrazek z przypisanym do siebie linkiem.

---

Aby się zmieniały same musiała by być funkcja setInterval(), która dokonywała by zmiany cyklicznie co ileś sekund. Nie sądzę aby się same zmieniały na stronie.

---

Łap tutaj gotowy skrypt:
 

<script> 
document.addEventListener("DOMContentLoaded", function() {
let images = [];
images[1] = "<a href = 'link'><img src='obrazek2.jpg'></a>";
images[2] = "<a href = 'link'><img src='obrazek3.jpg'></a>";
let liczba = Math.floor((Math.random() * 2) + 1);
document.getElementById('obraz').innerHTML=images[liczba];
});
</script>
<div id="obraz" style="width:300px; height:300px; background: #ff000f;">
</div>

 

---

Działa świetnie! Dziękuję bardzo za pomoc :)