HTML CSS Windows Photoshop
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header
 Avtor: Staš    07.03.10
Javascript menjavanje slik s povezavami               
HTML vodiči

menjavanje_slik_povezave_thumb
Javascript koda za slideshow oz. menjavanje slik. Slike se menjajo vsake 3 sekunde (lahko spremenite), slikam pa lahko določite tudi povezavo. Vsaki sliki svojo povezavo. Menjavanje slik lahko uporabite v headerju spletne strani, za predstavitev galerije ali marsikaj drugega.

 

 

 

 

Javascript menjavanje slik 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 
<html>
<head>
 
<script language="javascript">
window.onload = izberiFotko;
 
var fotke =  [["slike/slika1.png", "http://moje-mesto.com"],
["slike/slika2.png", "http://moje-mesto.com/photoshop-vodici"],
["slike/slika3.png", "http://moje-mesto.com/css-vodici"]];
 
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()", 3000);
}
</script>
 
</head>
 
<body>
 
<a id="nFLink"><img id="nF"></img></a>
 
</body>
</html>
 

 

PRIKAZ menjavanja slik z javascriptom

 

Navodila za uporabo:

 

Poleg HTML datoteke, v kateri boste uporabili Javascript naredite mapo z imenom slike in vanjo vstavite slike, ki jih želite prikazovati.

 

Kopirajte kodo od <script> do </script> v glavo svojega HTML dokumenta (med <head> in </head> ).

 

Spremenite poti do slik. Lahko uporabite relativne ali absolutne poti.

 

["slike/slika1.png", "http://moje-mesto.com"]

 

Med prva dva narekovaja vpišete pot do slike.

Med druga dva narekovaja vpišete URL na katerega naj določena slika vodi. Če ne želite imeti povezave, med druga dva narekovaja vpišite #.

 

Tam, kjer želite prikazovati slide show vstavite:

 

<a id="nFLink"><img id="nF"></img></a>


In zadeva deluje Very Happy

 

*Če želite menjavati več ali manj slik:

Oglejte si vrstico 9. Oglati oklepaji določajo sliko in povezavo. Skopirajte oglati oklepaj z vsebino, naredite vejico za zadnjo slik in prilepite. Spremenite pot do slike in povezavo in ste na konju.

Če želite manj slik pa le zbrišite oglati oklepaj, ki predstavlja posamezno sliko.

Komentiraj:
rema |05-11-2011 10:15
Kaj naj rečem res lepa lepa sletna stran in take razlage vodiči,kode in še in še.
Sam sem začetnik in si postavljam svojo prvo spletno stran tako da mi je to kar tu najdem v veliko pomoč.
Res hvala da se je nekdo našel in postavil kaj takega. Res na visokem nivoju.

LP Marko
-primož- |05-11-2011 10:44
Najlepša hvala za pohvale. Res je lepo prebrati, da vodiči koristijo ljudem.

Veliko sreče pri ustvarjanju!

Lp,
-primož-
Ime
E-mail
Spletna stran

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."
 
Sorodni vodiči

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

 

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé

Follow us on Twitter
Follow us on Twitter
Follow us on Twitter

Oglasi