Zmaga.com | Zmagajmo z znanjem
 
Zmaga.com
  Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Menjavanje slik s povezavami

 
  Delite vsebino na Twitterju   Delite vsebino na Facebooku
 
  Izdelali bomo spletno stran, na kateri bomo vstavili Javascript kodo, s pomočjo katere se bodo na spletni strani prikazovale vaše slike s povezavo do spletnih strani.
 
 
1
 
 
  Na namizju ali kje drugje ustvarite novo mapo ter jo poimenujte Slike.

Lahko jo poimenujtete drugače, vendar boste morali v nadaljevanju malce improvizirati.
 
 
2
 
 
  V mapo dodajte nekaj slik.
 
 
3
 
 
  Odprite sedaj program Adobe Dreamweaver in ustvarite nov HTML dokument.
 
 
4
 
 
  Kliknite na zavihek Code, da odprete kodni način urejanja spletne strani.
 
 
 
5
 
 
  Pomaknite se med znački <body> in </body>.
 
 
6
 
 
  In vstavite naslednjo kodo:

<html>
<head>
 
<script language="javascript">
window.onload = izberiFotko;
 
var fotke =  [["Slike/001.jpg", "http://www.zmaga.com"],
["Slike/002.jpg", "http://www.zmaga.com/forum.php"],
["Slike/003.jpg", "http://www.zmaga.com/sodeluj.php"]];
 
var trenutnaFotka=0;
 
function izberiFotko(){
var nakljucnoStevilo = Math.floor(Math.random()*fotke.length);
document.getElementById("nF").src = fotke[nakljucnoStevilo][0];
document.getElementById("nFLink").href = fotke[nakljucnoStevilo][1];
 
izmenjavanje();
}
 
function izmenjavanje(){
trenutnaFotka++;
 
if (trenutnaFotka == fotke.length){
    trenutnaFotka=0;}
 
document.getElementById("nF").src = fotke[trenutnaFotka][0];
document.getElementById("nFLink").href = fotke[trenutnaFotka][1];
setTimeout("izmenjavanje()", 1000);
}
</script>
 
</head>
 
<body>
 
<a id="nFLink"><img id="nF"></img></a>
 
</body>
</html>
 
 
7
 
 
  Sedaj spremenite kodo pri vrstici var fotke.

Spremenite pot do slik ter povezavo.
 
 
8
 
 
  Pomaknite se zdaj do vrstice setTimeout (glej sliko).

Pri številki 1000 nastavite na koliko časa naj se slike menjavajo. 1000 pomeni ena sekunda, torej 3000 pomeni tri sekunde.
 
 
9
 
 
  Dokument še shranite in pritisnite tipko F12, ter si dokument oglejte v brskalniku.

Datoteko index.html shranite tja, kamor ste shranili slike, drugače vam jih računalnik ne bo našel in se ne bodo predvajale.

Povzeto po vodiču strani moje-mesto.com.
 
 
Komentiraj
 
 
 
 
 
8.3.2011, 10:52
a se komu sanja kako bi naredu recimo gumbe 1 2 3 in da bi vsak od njih imel funkcijo povezave na eno od teh slikc ( ne da odpre slikco al pa povezavo na novo ampak samo da vrne eno od teh slikc)

hvala
 
 
 
 
15.8.2011, 11:18
Graphic Interchange Format (.gif) ta skripta ne podpira?
 
Prijava in registracija
 
 
 
 
 
 
  Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
  Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem na Zmaga.com!