X

Zmaga.com | Zmagajmo z znanjem  
Adobe Dreamweaver Osnove  
  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 | Zmagajmo z znanjem
 
  Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, nudi enkraten način spoznavanja z različnimi svetovnimi jeziki, vas s podrobno obrazloženimi recepti nauči kulinarike in vam prežene strahove pred domačimi opravili.