+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Linkowanie obrazka sprite (/thread-linkowanie-obrazka-sprite)
Linkowanie obrazka sprite - mariusz__vip - 22-05-2013
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 />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"> </span></div>
<div class="error"><span class="sprite_ico"> </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;RE: Linkowanie obrazka sprite - atp - 22-05-2013
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> ...
RE: Linkowanie obrazka sprite - Kartofelek - 22-05-2013
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.
RE: Linkowanie obrazka sprite - mariusz__vip - 23-05-2013
Kartofelek moglbys mi to rozpisac mniej wiecej, bo takich cudow nie robilem, aczkolwiek kombinuje od wczoraj i cienko to wychodzi.
RE: Linkowanie obrazka sprite - Kartofelek - 23-05-2013
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
RE: Linkowanie obrazka sprite - mariusz__vip - 27-05-2013
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.
RE: Linkowanie obrazka sprite - Kartofelek - 27-05-2013
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.