Latest forum activity...
Indian god goddess name
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 2 dana, 11h
various Christian baby names
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 2 dana, 11h
nakshatra baby name
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 2 dana, 11h
Pozivnica za YUWABiTS.net
Forum: FFA
(51 Replies) View latest post
Apach88
prije 3 dana, 11h
nakshatra baby name
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 5 dana, 8h
various Indian god goddess baby names
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 5 dana, 8h
suitable gemini rashi baby name
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 5 dana, 8h
Adidas Yeezy 350 Boost Noyau Noir Promo
Forum: Web stranice
(0 Replies) View latest post
aqqWalker1
prije 9 dana, 16h
 
 To the forum... 
Pošalji ovu stranicu prijatelju


Flash (2)
Freehand (4)
HTML (4)
Photoshop (7)
Programiranje - PHP (3)


 
» Username:
» Password:
Autologin?

 
» Registrirajte se!
» Zaboravili ste password?
94 korisnika su trenutno online
 
33 @ 0.073427
x



CSS image hover efekt
U tutorialu Poboljšanje sitea uz pomoć CSS-a (autor retro_one) uredno je opisana dobro strukturirana navigacija i pokazano je kako je urediti u CSS-u. No ponekad obični fontovi i ograničenje samo na boje pozadina i 'bordera' elemenata ozbiljnom dizajneru nisu dovoljne za ostvarenje zamišljenog izgleda. Metode za IR (image replacement) u CSS-u već su dugo s nama, neke bolje a neke lošije, primarno zbog potrebe da ljudi na web stranici vide fontove koje je dizajner i namijenio. Idealni IR bi bio takav da zamijeni tekst iz nekog HTML elementa sa slikom — CSS background-image — bez korištenja dodanih tagova (u većini slučajeva nested span elementa), a da očuva tekst tako da ih screen readeri čitaju. Jedan takav blizu idealnog je Accessible Image Replacement (Mike Rundle). Njegovu metodu koristim u ovom tutorialu.
HTML
15.02.2005 20:36 15.02.2005 20:36 12    


printer friendly version

CSS image hover efekt

Prije hovera — IR (image replacement)

U tutorialu Poboljšanje sitea uz pomoć CSS-a (autor retro_one) uredno je opisana dobro strukturirana navigacija i pokazano je kako je urediti u CSS-u. No ponekad obični fontovi i ograničenje samo na boje pozadina i 'bordera' elemenata ozbiljnom dizajneru nisu dovoljne za ostvarenje zamišljenog izgleda. Metode za IR (image replacement) u CSS-u već su dugo s nama, neke bolje a neke lošije, primarno zbog potrebe da ljudi na web stranici vide fontove koje je dizajner i namijenio. Idealni IR bi bio takav da zamijeni tekst iz nekog HTML elementa sa slikom — CSS background-image — bez korištenja dodanih tagova (u većini slučajeva nested span elementa), a da očuva tekst tako da ih screen readeri čitaju. Jedan takav blizu idealnog je Accessible Image Replacement (Mike Rundle). Njegovu metodu koristim u ovom tutorialu.

Dva background-image property-a

Sada, kad smo napravili IR, hover pseudoselektorom možemo mijenjati taj element (obično link) kada se preko njega prijeđe mišem. Na primjer, slika se može promijeniti (kako je to ranije bilo veoma popularno JavaScriptom) tako da napišemo background-image: url(button.gif) za element, a isto to sa drugom slikom (button_hover.gif) za element:hover.

#mylink1 {
  text-indent:-100em;  /* image replacement Mike Rundle style */
  text-decoration:none;  /* potrebno da se skine underline */
  display:block;
  width:207px;
  height:105px;
  background: white url(button.gif) no-repeat;
}
#mylink1:hover { background-image: url(button_hover.gif); }

link test 1

Problem ove metode još jedan server request, odnosno to što browser zatraži tu 'hover' sliku tek kad se prijeđe mišem preko nje. Ako je slika veća, a veza na internet sporija, osjeti se jedan mali delay prije nego što se 'hover' slika pojavi i ta mala sitnica može biti veoma ružna.

Rješenje — background-position

Da izbjegnemo naknadni dohvat 'hover' slike možemo koristiti nekakav JS preload, ali postoji elegantno rješenje bez skriptiranja i (najvažnije) bilo kakvih hackova. Već smo napravili IR i time znamo veličinu elementa (linka) — kako znamo veličinu, 'zalijepimo' slike button.gif i button_hover.gif u jednu (prva na lijevoj strani, druga na desnoj) i hover efekt radimo tako da shiftamo taj background lijevo-desno sa background-position propertyem.

button_both.gif: \"spojene

#mylink2 {
  text-indent:-100em;
  text-decoration:none;  /* potrebno da se skine underline */
  display:block;
  width:207px;
  height:105px;
  background: white url(button_both.gif) no-repeat;
}
#mylink2:hover { background-position: right; }  /* oh yeah */

link test 2

Čija je to dovitljivost ne znam, naučio sam je proučavajući feature list sa Stylegala (tri kućice skroz desno, sredina).

Pros:

  • no delay;
  • no hacks;
  • single button — single image;
  • jednostavan CSS znači podržanost;
  • ovisno o dizajnu može se postići relativna fleksibilnost veličine elementa.

Cons:

  • Designer mora uložiti dodatan trud da 'slijepi' slike skupa.

Ako imate neka nova saznanja o tehnikama opisanim ovdje bit će mi drago da ih čujem. Oho, Red me već prosvijetlio (thnx). Poslao mi je link na ovaj CSS rollover generator na kojem koriste opisanu tehniku i zovu je sliding doors rollover (neš' ti čuda). Barem više nije anonimna :).

—Mislav


« povratak

Komentari

UPDATE
Hmmm, sad shvaćam da gdje god sam vidio da se koristi ova tehnika, u CSS-u rade 'sliding' ovako:
  background-position: -207px 0;
gdje je 207, naravno, širina elementa. Ključna riječ 'right' (kako je ja koristim) se onda možda ne ponaša tako dobro kad je nitko ne koristi. Pretpostavljam da drugi navođenjem apsolutne veličine paze na starije browsere, ali trebalo bi to istestirati...
 Komentar: Sulien 16.02.2005 13:37
re: CSS image hover efekt
Sehr gut...
Fala lipa...
A sad odo radit na sajtu... uskoro ce biti gotov, nadajmo se (do nedilje)

poz
 Komentar: burne 16.02.2005 13:38
re: UPDATE
Ako se ljudi konstantno zamaraju time da zadovolje stare browsere, al to nece korisnike starih browsera odvuci od novih? Nije mi jasan taj paradoks. Bar nije tesko na win98 dodat IE6.0 ili FireFox...
mislim, gluposti...
 Komentar: burne 16.02.2005 13:40
re: CSS image hover efekt
jel se moze to rjesiti time da se prelodaju fotke u temp? sa preloadom u bodyu? ako je tema vezana za to?
 Komentar: :cosmos: 16.02.2005 19:15
re: CSS image hover efekt
procitah, vrlo domisljato. super..
 Komentar: :cosmos: 16.02.2005 19:24
re: CSS image hover efekt
svaka čast ;) very useful
 Komentar: kelso 16.02.2005 20:08
re: Ako se ljudi konstantno zamaraju time da zadovolje stare browsere...
Pri tehničkoj izvedbi sajta moraš biti svijestan svoje ciljane skupine (isto kao kod reklamiranja). Ljudi koju posjećuju W3schools nisu isti kao oni koji vise na Yahoo... Znači, moraš procijeniti koliko su stari kompjuteri i monitori koje ljudi imaju, koliko uopće znaju o surfanju (da li znaju što je print CSS stylesheet ili accesskey), kakve browsere imaju, imaju li Flash plugin, enabled JavaScript i štošta drugo. Ja *osobno* (!) ne pazim na Joe Idiota (uobičajen izraz za nekoga tko zna samo klikati i ništa drugo) i ne pazim na ljude koji rade na muzejski starim primjercima operativnih sustava (i browsera) koji ionako shvaćaju svoj položaj (ali imaju svoje razloge). Ne pazim ni na IE5.x, IE/Mac (vjerojatno najgori od novijih browsera) i stare Netscape. Ali pazim na standarde, accessibility i usability, te računam da će ljudi koji znaju nešto o kompjuterima znati to i iskoristiti.

Sad smo u tranzitnom periodu u kojem je važno naći što bolji balans između srljanja za novim tehnologijama (XML) i osvrtanja natrag iz čistog pošovanja prema ljudima koji nemaju znanje kao mi. Ti nađi svoj balans -- ako ne želiš optimizirati za Netscape 4, nemoj. Nitko te ne sili. Ali po standardima radi *uvijek*
 Komentar: Sulien 17.02.2005 14:32
re: CSS image hover efekt
hehehehehe, zaboravija si nesto... naime, sve ja napravih po tutorijalu, ani onih -100em ti bas ne funkcionira :))
U biti je za prvi, ali ne za ostale linkove na horizontalnom izborniku :))

Znaci, kada stavljate koliko ce tekst izmaknuti sa skrina, ako vam sajt nije slucajno alignan desno, onda je dosta -1000em za centralne i lijevo alignane sajtove.

Poz

P.S. Thnx na tutsu... predobar je :)) doduse, nisi naveo da je ipak za bokun advanced juzere...
 Komentar: burne 17.02.2005 18:46
re: CSS image hover efekt
Ne funkcionira?? Ja već mjesecima koristim -10000px za SVE i uvijek je funkcioniralo. Sa -100em trebalo bi biti isto

:?
 Komentar: Sulien 17.02.2005 23:23
re: CSS image hover efekt
Da, ali nisi racuna na to da cu ja prosiriti browser window na dva ekrana :))
Ma sve okay... sve radi kako triba, a vidija si i sam da je uspjesno izvedeno...
 Komentar: burne 20.02.2005 22:12
re: CSS image hover efekt
Strašno...
Zar se ovo broji u tutorial?
Daj dropdown meni sa 2-3 levela, to je poso..
 Komentar: Bobz 12.02.2007 22:56
re: CSS image hover efekt
outline: none; ?
 Komentar: dtm 29.07.2007 13:21
** Trenutno niste ulogirani pa ne možete ni dodavati komentare **