Linkowanie obrazka sprite

[mariusz__vip]

Witam serdecznie,
przepraszam za brak polskich znakow. Moja strona wolno sie wczytuje, wiec zredukowalem liczbe zadan poprzez uzycie sprite'ow. Zacialem sie w momencie, kiedy trzeba te obrazki zlinkowac poniewaz kazdy z nich powinien po kliknieciu sie powiekzac.
Poprzedne dzialajace linkowanie HTML:

Kod:

<h1><a href="images/11ex_big.jpg" rel="shadowbox;height=564;width=752"><img src="images/11ex.jpg" alt="" /></a></h1><br /><br />

Aktualnie uzywany sprite w HTML:

Kod:

<div class="container">
        <div class="success"><span class="sprite_ico"></span> </div><br />
        <div class="info"><span class="sprite_ico"></span></div>
        <div class="warning"><span class="sprite_ico">&nbsp;</span></div>
        <div class="error"><span class="sprite_ico">&nbsp;</span></div>
    </div>

CSS:

Kod:

div.info .sprite_ico, div.success .sprite_ico, div.warning .sprite_ico, div.error .sprite_ico {
background: url(images/male_l.jpg) no-repeat;
    display: block;
width:160px;
height:507px;

line-height:190px;
margin-bottom:40px;
}
/*jeden z przykladowych obrazkow:*/

div.success {
width:160px;
height:139px;
    margin-bottom:56px;

}
div.success .sprite_ico{
    background-position: 0px 0px;
    width:160px;
    height:169px;

[atp]

Nie wiem czy dobrze zrozumiałem ale przecież nic nie stoi na przeszkodzie żeby te wszystkie <div> zamienić na <a> z "display:block" ... <span> może znajdować się w środku <a> ...

[Kartofelek]

Ja bym to zmienil na linki. Potem za pomocą :focus, :active wykrywał bym ten kliknięty i takiemu powiększał background. Do tego użył bym pewnie transform:scale(1.2)
http://css3please.com/
Linki mógł bym tez zamienić na chekboxy i wykrywać te kliknięte za pomocą input:checked {....}. W tym przypadku nie stylował bym checkboxów co ich labele.

[mariusz__vip]

Kartofelek moglbys mi to rozpisac mniej wiecej, bo takich cudow nie robilem, aczkolwiek kombinuje od wczoraj i cienko to wychodzi.

[Kartofelek]

2 wersje - 1 z linkami, 2 z checkboami. Obie działają na normalnych przeglądarkach.

Kod:

<style type="text/css">
.container a {display:inline-block; width:100px; height:48px;}
.container a span {display:inline-block; background:url(accepted_48.png) 0 0 no-repeat; width:48px; height:48px; -moz-transition:0.5s; -webkit-transition:0.5s; transition:0.5s; overflow:hidden; text-indent:-9999px;}
.container a:focus span, .container a:active span {-moz-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2);}

.container2 input {position:absolute; left:-9999px;}
.container2 label {display:inline-block; width:100px; height:48px; overflow:hidden; text-indent:-9999px; -moz-transition:0.5s; -webkit-transition:0.5s; transition:0.5s;}
.container2 input + label {background:url(accepted_48.png) 0 0 no-repeat; }
.container2 input:checked + label {-moz-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2);}
</style>

Wersja z linkiem:    
<div class="container">
    <a href="#" class="a-one">
        <span>Klikus!</span>
    </a>
    <a href="#" class="a-two">
        <span>Klikus!</span>
    </a>
</div>

<br><br><br><br>

Wersja z checkboxem:
<div class="container2">
    <input type="checkbox" id="ch-one" /><label for="ch-one">Klikus!</label>
    <input type="checkbox" id="ch-two" /><label for="ch-two">Klikus!</label>
</div>

PATRZAJ TU: http://doman.art.pl/selectTest/testorek.html

[mariusz__vip]

Dzieki wielkie Kartofelek za pomoc. Skorzystalem duzo na Twojej rozpisce. Chetnie uzylbym tych checkboxow jednak wtedy bede musial zalaczyc bardzo duzego sprita, co wplynie wydaje mi sie na wydajnosc strony. Zobrazuje Ci to moze:
www.mariusz1802.uphero.com

chodzi mi o zakladke Nasze Auta. Chcialbym zeby to bylo tak jak tutaj tylko za pomoca spritow.

[Kartofelek]

A dlaczego za pomocą spritów? Przecież w tym przypadku sprity są błędne. To są oddzielne obrazki.

Inaczej mówiąc. Sprity są dobre do layoutów. Ale te obrazki z linka to jest content. A i jeszcze jedno. Bardzo duże sprity nie są dobre, bo zajmują bardzo dużo pamięci.