Navigacijas izveide no *gif faila

[Gstyle]

Gribu lai man kaads paskaidro,pamaaca kaa no shii gif faila taalaak izveidot darbojoshos navigaaciju ar linkiem, ar mouseover efektu: taada pati bilde tikai tumsaaka kraasa.

Kaa tieshi sagraiziit to failu, kaa css veidot?

[bubu]

Izgriez katru elementu atsevišķa bildē, un taisi parastus HTML elementus: <a href="link"><img src="bilde"/></a>

[Evi]

<ul>

<li id="home"><a href="#" title="Go Home"><b>Home</b></a></li>

<li id="tuts"><a href="#" title="Tutorials"><b>Tutorials</b></a></li>

</ul>

 

 

CSS:

 

ul{

padding:0;

margin:0 1px 0 0;

list-style:none}

 

li#home{

padding:0;

margin:0;

background:url(../img/home.jpg) left top no-repeat}

 

li#home a{

display:block;

padding:10px 20px}

 

li#home a:hover{

background:url(../img/homeover.jpg) left top no-repeat}

 

li a b{

display:none}

 

 

pats paspeeleejies ar paddingiem marginiem, tev sanaaks bilde backgroundaa (google maacees izlasiit tavu menu) un a:hover buus mouseover efekts. Katram id pieshkjir savu bildi.

Edited November 2, 2008 by Evi

[codez]

Labāk uztaisi tām bildēm over izskatu tai pašā bildē un CSS taisi ar backgrounda pozicionēšanu.

Labāk, lai visas bildes ir vienā bildē, jo tad būs mazāk pieprasījumi serverim un ātrāk viss strādās.

[Gstyle]

codez, piemeeru luudzu tavam variantam. Par to arii biju aizdomaajies,ka saadai navigaacijai paaraak daudz ppieprasiijumu uz serveri jaasuuta-lieks trafiks.

Kur man tieshi griezt taas bildiites atseviski: aiz, pa vidu vai pirms atdaliitaaja? It kaa vareetu arii bez atdaliitaaja, tas visu vienkaarshotu, bet vai ar css varees panaakt taadu pashu efektu?

[andrisp]

http://www.google.com/search?hl=en&q=css+sprites

[codez]

Par piemēru ar Firebugu var izpētīt kā tas ir realizēts youtube.com.

http://s.ytimg.com/yt/img/master-vfl62437.gif

[Gstyle]

paldies par info: css sprites - prieks manis kkas jauns un neiepaziits.un kaa reizi der manam gadiijumam

[pilots]

nav nekāds tur trafiks mazāks.

[Gstyle]

http://css-tricks.com/css-sprites-what-the...ow-to-use-them/ te saka ka esot

[waplet]

Kā var būt mazaks? Kvadrātiņus tu vienādus visus ieladē , ja saliek kopā! Vienkārši tagad viss ir vienā failā!

[Kavacky]

Gluži loģisks spriedums - ja tev 10 TCP sesiju vietā ir jāatver viena, tad uz sesiju rēķina tu ietaupi jau 9 handsheikus vien. Plus katram kvadrātiņam atsevišķi ir vairāk lieku datu ( failu headeru ), nekā vienam lielākam klucim.

[Evi]

codez, piemeeru luudzu tavam variantam. Par to arii biju aizdomaajies,ka saadai navigaacijai paaraak daudz ppieprasiijumu uz serveri jaasuuta-lieks trafiks.

Kur man tieshi griezt taas bildiites atseviski: aiz, pa vidu vai pirms atdaliitaaja? It kaa vareetu arii bez atdaliitaaja, tas visu vienkaarshotu, bet vai ar css varees panaakt taadu pashu efektu?

 

piemeers tas pac ko es tev raxtiiju, vnk tad uztaisi vienu bg bildi un ar bg-position vinju pozicionee. Bet prieksh tevis iesaakumam buus jau daudz, ja tu ar mazaakaam bildiiteem to menu uztaisiisi.

Edited November 3, 2008 by Evi

[pilots]

Gluži loģisks spriedums - ja tev 10 TCP sesiju vietā ir jāatver viena, tad uz sesiju rēķina tu ietaupi jau 9 handsheikus vien. Plus katram kvadrātiņam atsevišķi ir vairāk lieku datu ( failu headeru ), nekā vienam lielākam klucim.

Labi gan. Terabaits ietaupīts.

[andrisp]

pilots, smejies smejies, bet tam ir diezgan liela nozīme pie apjomīgām (un/vai noslogotām lapām). ;)

 

PS. Un nejau tieši par datu apjomu ietaupīšanu iet runa, bet gan par to, ka tiek ietaupīts ~laiks~ darot lietas, ko var arī nedarīt.