U prethodnim smo člancima napravili i napravili detaljnu prilagodbu na vrlo jednostavnom JavaScript prezentaciji. Ovaj je prezentacijski prikaz potpuno funkcionalan i čak prikazuje nešto prikladno za ljude koji nemaju JavaScript, ali volio bih da sličica slike koju trenutno prikazam izgleda drugačije od ostalih sličica. Nagodio sam se koristeći CSS id nazvan "struja" koji je slike učinio poluprozirnim i dodao odabranu sličicu tanku crvenu obrub. U svom posljednjem članku stekao sam ovo ponašanje zbog prvobitno odabrane sličice, ali kad sam odabrao novu sličicu, nova sličica se nije promijenila i početna sličica zadržala je odabrani stil.

U prethodnoj verziji moje prezentacije, kada korisnik klikne na sličicu, prikazuju se pridružene velike slike. Ono što želim učiniti je promijeniti veliku sliku, postaviti minijaturu prethodno odabrane slike da se vrati u normalu i napraviti ovaj prikaz sličica posebnim stilom odabrane slike. Obzirom da sada radim više stvari kad se klikne na sličicu, prebacio sam se s stavljanjem svoga koda u atribut onClick img označite se pomoću funkcije. JavaScript funkcije obično idu u glava odjeljak HTML-a tako da će biti učitan i spreman kada se učita tijelo tijela. Ili se mogu umetnuti izravno između skripta oznake ili put i datoteku i uključeni. Za kratke programe, ili kad ih aktivno kodujem, lakše stavljam svoj kôd izravno na stranicu kao što sam to učinio ovdje.

Mogao sam upotrijebiti funkciju za svaku sličicu, ali pošto je sve što se mijenja iz sličice u sličicu ime slike i ID sličice (i koristio sam ime slike za id), napisao sam jednu funkciju koja je uzela id kao argument i upotrijebio ga je za stvaranje odgovarajućeg imena slike dodavanjem ".jpg". Zvao sam svoju funkciju displayLarge.

funkcija displayLarge (id) {
// promijeniti veliku sliku
imageName = id + ".jpg";
document.getElementById ( "largeImage") src = imageName.
// vratit će stil prethodne sličice na zadani
. Document.getElementById ( "struje") id = oldID;
// zabilježiti id prije nego što ga promijenimo
oldID = ID
// minijaturu označite kao trenutnu s trenutnim stilom
document.getElementById (ID) .id = "struje";
}


Da bi ova funkcija funkcionirala prvi put, morao sam dati i početnu definiciju za oldID, varijabla koju koristim za pamćenje izvornog id-a sličice koja je trenutno odabrana. Sav taj kod nalazi se u glavi web stranice, tako da se učitava prije učitavanja stranice.

Na kraju sam promijenio HTML za sličice kako bih nazvao svoju funkciju. HTML za moj prezentacijski izgled sada izgleda ovako:




Sličica psa s naljepnicom EARTH
Sličica prijenosnog računala s naljepnicom EARTH

Veća inačica odabrane sličice



Ovdje možete vidjeti radni primjer ovog koda.



Upute Video: Exploring JavaScript and the Web Audio API by Sam Green and Hugh Zabriskie (Ožujak 2024).