Codul pentru casuta cu bara de scroll pentru poze este cel de mai jos, care trebuie sa il copiati intrun fisier HTML/JavaScript.(Cum va arata casuta vedeti la sfarsitul articolului).
Modificati in cod ce este scris colorat si anume:
Cu albastru inlocuiti cu url-ul imaginii
Cu rosu inlocuiti cu un link (atunci cand se da click pe poza va trimite spre acest link)
Cu verde o scurta descriere (exemplu: puneti o poza cu un telefon, link catre o pagina/ articol despre telefoane si descriere: Aplicatii pentru telefoane)
Pentru a adauga mai multe poze, puneti in continuarea coloanei scrisa cu portocaliu in cod:
photo[6]="IMG_1006.JPG"
photo[7]="IMG_1007.JPG"
photo[8]="IMG_1008.JPG"
Si asa mai departe cate poze doriti...
De cate ori adaugati un rand in coloana cu portocaliu, trebuie sa adaugati si in coloana de mai jos (unde scrieti url,descriere,legatura)
Ex:
Pentru
photo[6]="IMG_1006.JPG"
adaugam
<a href="Legatura" onclick="ff(6)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a>
Si asa mai departe modificati numarul cu portocaliu "ff(6)"
Marimea si culoarea de fundal a casutei in care vor fi pozele le puteti modifica de la inceputul codului scrise cu roz.
Daca nu doriti sa para imaginea in dreapta casutei cu scroll stergeti ce este ecris cu gri la sfarsitul codului
Acesta este rezultatul:

Modificati in cod ce este scris colorat si anume:
Cu albastru inlocuiti cu url-ul imaginii
Cu rosu inlocuiti cu un link (atunci cand se da click pe poza va trimite spre acest link)
Cu verde o scurta descriere (exemplu: puneti o poza cu un telefon, link catre o pagina/ articol despre telefoane si descriere: Aplicatii pentru telefoane)
Pentru a adauga mai multe poze, puneti in continuarea coloanei scrisa cu portocaliu in cod:
photo[6]="IMG_1006.JPG"
photo[7]="IMG_1007.JPG"
photo[8]="IMG_1008.JPG"
Si asa mai departe cate poze doriti...
De cate ori adaugati un rand in coloana cu portocaliu, trebuie sa adaugati si in coloana de mai jos (unde scrieti url,descriere,legatura)
Ex:
Pentru
photo[6]="IMG_1006.JPG"
adaugam
<a href="Legatura" onclick="ff(6)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a>
Si asa mai departe modificati numarul cu portocaliu "ff(6)"
Marimea si culoarea de fundal a casutei in care vor fi pozele le puteti modifica de la inceputul codului scrise cu roz.
Daca nu doriti sa para imaginea in dreapta casutei cu scroll stergeti ce este ecris cu gri la sfarsitul codului
<title>Picture Gallery</title> <style> body{background-color:} #small_img{width:290px;height:600px;float:left;overflow:scroll;text-align:center;background-color:06AEFF;} img {border:none;} </style> <script> var photo = new Array(); photo[0]="IMG_1000.JPG" photo[1]="IMG_1001.JPG" photo[2]="IMG_1002.JPG" photo[3]="IMG_1003.JPG" photo[4]="IMG_1004.JPG" photo[5]="IMG_1005.JPG" function ff(code) { document.images.home.src=photo[code]; } </script> <div id="small_img"> <a href="Legatura" onclick="ff(0)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> <a href="Legatura" onclick="ff(1)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> <a href="Legatura" onclick="ff(2)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> <a href="Legatura" onclick="ff(3)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> <a href="Legatura" onclick="ff(4)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> <a href="Legatura" onclick="ff(5)"><img alt="Descriere" height="200" src="URL_IMAGINE.JPG" /></a> </div> <div> <img height="600" name="home" src="url_imagine.JPG" /> </div> |
---|
Acesta este rezultatul:
0 comentarii
Trimiteți un comentariu