Vi ste svi u osnovnoj školi menjali sličice, to jest slajbe, to jest igrali ste tapke u dulje. Taj poriv vam je ostao i kad ste počeli da pravite sajtove. Hteli ste da kad dođeš mišem na sličicu, ona preraste u drugu sličicu. Obično ste za to koristili onMouseOver u Javascript-u. Ali ima sistem da se generalno eskivira JavaScript i da se cela radnja izvede pomoću ordinarnog HTML-a i CSS-a, naravno bez primene DSS-a. To je dobro zato što JavaScript koči i generalno je nekako ružan sistem, sem toga ima ko ga isključuje jer ga nervira.
Ja sam ovaj sistem primenio u Gramatici srpskog jezika, to jest u poglavlju o pridevima. Naveo sam Crvenog Barona kao primer za upotrebu prideva. E sad, hteo sam da se sličica Crvenog Barona smenjuje sa sličicom Zelenog Barona. Primenio sam sledeći sistem, a vi ga preradite za svoje svrhe.
Snimio sam sličicu Crvenog Barona, 150x210 piksela, pod imenom crveni-baron.jpg
Zatim sam tu istu sličicu uzeleneo i snimio je kao crveni-zeleni-baron.jpg, u istoj veličini.
Onda sam u fajlu sa pričom o pridevima primenio sledeći CSS i HTML (naravno, ovaj CSS može se stavi i u glavni CSS koji vuku svi fajlovi, ali u ovom slučaju nema potrebe, pošto ga vuče samo fajl za prideve).
Naravno, primetićete da se ovo drugačije prikazuje u Firefoxu i u Exploreru. Firefox pravi neko kao mnogo brzo smenjivanje sličica, tako da se dobija vizuelna iluzija stapanja boja, dobije se kao neka maslinasto-braon boja. Explorer prikazuje ono što smo hteli, to jest crvenu slikicu zamenjuje zelena.
<style type="text/css">
<!-- Sad ćemo da utvrdimo da klasa .baron ima pozadinu u vidu slikice koja se pojavi kad dođeš mišem na slikicu. Tu klasu ćemo kasnije dodeliti div tagu koji uokviruje slikicu i ujedno će da je vuče sama slikica. Mora da se stavi i da je pozadina no-repeat, jer će da štrči ako postoji margina. Float, margin i border parametri su proizvoljni. U mom slučaju su ovakvi, a u tvom će biti onakvi kakvi ti oćeš da budu. Ali kako stvari stoje moraš da zabodeš width i height u klasi, znači da im dodeliš širinu i visinu aktuelne slike, da bi se lepo prikazalo, to jest da ne bi bežalo levo desno, da se ne bi tarzanisalo -->
.baron, .baron img {
float: left;
width: 150px;
height: 210px;
padding: 0px;
margin: 0px 8px 8px 0px;
border: none;
background-image: url(/grozdje/crveni-zeleni-baron.jpg);
background-repeat: no-repeat;
}
<!-- Sad ćemo da utvrdimo da prvobitna slika bude nevidljiva kad se na nju dođe mišem, tako da će se videti pozadinska slika to jest druga slika, koja je ustvari sve vreme iza prve, samo ju je prva zaklonila. Razumeš. -->
.baron a:hover {
visibility: hidden;
}
</style>
<!-- Sad smo izašli iz CSS-a, i u HTML-u stavljamo prvu slikicu. Nju moramo da izlinkujemo na nešto, jer CSS hover parametar radi samo kroz link. U slučaju priče o pridevima, link je doveo na ovu stranu. Vi možete staviti i da ne vodi nigde, to jest na "#". Kod slikice ne moramo da zabadamo width, height i border, pošto smo to sve zaboli u CSS-u. Sve to zajedno stavljamo u div tag kome dodeljujemo klasu "baron" -->
<div class="baron"><a href="#"><img src="/grozdje/crveni-baron.jpg" alt="Crveni Baron" /></a></div>
Ima još jedan zanimljiv sistem kako da se sličice menjaju ali ne kroz hover efekat, nego pomoću php-a. Može da se namesti da php prikazuje ili jednu ili drugu, kako se strana učita. Moj sistem je bio da se zelena slikica prikaže ako je strana učitana u parnoj sekundi u minutu (bez obzira kolko je sati i minuta), a da se u neparnoj sekundi prikaže crvena slikica.
To se postiže tako što se kaže php-u da pokupi varijablu o tome kolko je trenutno sekundi, i ako je broj paran, da ispiše u HTML naziv zelene slikice. Pošto se crvena slikica zove crveni-baron.jpg, a zelena crveni-zeleni-baron.jpg, to je lako postići. Samo mu se kaže da umetne "-zeleni" u HTML kod ako je strana učitana u parnoj sekundi.
U tvom konkretnom slučaju, strana se učitala u 22:42:16, zato se otvorila zelena sličica. Pritiskaj malo F5 da vidiš kako radi sistem.
<!-- U ovoj varijanti preskačemo sve ono sa stilom, samo u img tag u HTML-u ubacujemo malo php-a, ovde sam ga boldovao -->
<img src="/grozdje/crveni<?php if((date("s") % 2) == 0) echo "-zeleni"; ?>-baron.jpg" alt="Crveni Baron" />
Na sličan način sam napravio da se slikice za foto-arhivu na naslovnoj Činč strani smenjuju u zavisnosti od toga kolko je sati. Evo kako. Napravio sam 24 raznih slikica iste veličine i naslovio ih cinc00.jpg, cinc01.jpg ... cinc23.jpg. Onda sam stavio da php pokupi koliko je trenutno sati, preko date("H"), što upravo i vraća broj sati i to dvocifren, sa nulom ispred malih brojeva. A sve slikice će imati isti alt parametar, Činč, što je i logično.
<!-- U ovoj varijanti umesto date("s") stavljamo date("H") -->
<img src="cinc<?php echo date("H"); ?>.jpg" alt="Činč" />
Primera radi, sad je 22:42 , znači ako sad odeš na naslovnu Činč stranu, prikazaće ti slikicu cinc22.jpg. Inače, ti bi u ovo vreme trebalo da učiš a ne da se zajebavaš.
Moja uputstva za razne stvari iz domena HTML-a, CSS-a i php-a
- Kako se menja ružan izgled strane na MySpace-u
- Kako se menjaju sličice, bez da se koristi JavaScript
Tu su i moji prevodi W3C dokumenata, kakvi su da su. W3C je organizacija koja vodi računa o standardima na internetu, slično kao što UEFA vodi računa o ponašanju navijača Liverpula, pazeći da ne preteruju sa tarzanisanjem i kurčenjem. Ovi prevodi su na ćirilici, i formatirani su identično kao originalne strane, jer je takva praksa kod W3C prevoda: