Kako dobiti efekt....

[ BURA @ 20.09.2004. 13:49 ] @

Radim dizajn koji s lijeve strane ime alate (zoomin, zoomout...itd). Htio bih da mi alati izgledaju kao oni u, recimo, Photoshop-u tj da, kada stavim misa, pokaze mi se celija kao ulegnuta i da se promjeni slicica, a kada je alat aktivan, ostane ulegnut sa drugom sličicom i drugom bojom backgrounda. Da li (zbog učitavanja stranice) CSS-om ili s onmouseover i onmouseclick i kako?
Ukoliko je neko radio ovako nesto molim da mi pomogne. Hvala.

Pozdrav,
BURA

[ Br@nkoR @ 21.09.2004. 13:45 ] @

Mozda nesto ovako:
HTML

Code:
<a href="http://negde.com" class="taster"></a>

CSS

Code:
.taster:link, .taster:visited {
    background-image: url(activ.jpg);
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    background-color: #AABFD4;
}

.taster:hover {
    background-image: url(hover.jpg);
    background-repeat: no-repeat;
    background-color: #4372A1;
}

_{[Ovu poruku je menjao Br@nkoR dana 22.09.2004. u 12:39 GMT]}

[ BURA @ 22.09.2004. 09:44 ] @

To ce raditi uz male izmjene. Ispod je kod u pa ako ce kome trebati eto... No sada imam drugi problem, elem svaka celija za alat (zoomin,zoomout,...njih 15-ak) mora imati dole prikazani komad CSS-a e sad, da li se slika koja se pozove u CSS-u kao hover ucita s učitavanjem stranice ili tek onda kada se stavi miš na ćeliju (taster). Cijelu stvar ne mogu testirati jer se vrti lokalno pa je ucitavanje solidno, ali ne znam kako je kada je stvar na internetu (loše veze i to..) pa mi je bitno zbog brzine učitavanja stranice (da mi se ne dogodi kao kad je slučaj da imamo neku sliku na onmouseover a nemamo preloadimages .js funkciju pa explorer pocne ucitavati sliku tek kad stavim misa na nju.)

body {
background-color: #29506F;
}
.alati {
padding: 7px;
}
.taster {
background-image: url(zoomin.gif);
background-repeat: no-repeat;
width: 28px;
height: 28px;
background-color: #29506F;
}
.taster:link {
background-image: url(zoomin.gif);
background-repeat: no-repeat;
width: 28px;
height: 28px;
background-color: #29506F;
}
.taster:hover {
background-image: url(zoomin.gif);
background-repeat: no-repeat;
background-color: #29506F;
border-top: 1px solid #152938;
border-right: 1px solid #95A9B8;
border-bottom: 1px solid #95A9B8;
border-left: 1px solid #152938;
}
.taster:activ {
background-image: url(zoomin_a.gif);
background-repeat: no-repeat;
width: 28px;
height: 28px;
background-color: #AABFD4;
border-top: 1px solid #152938;
border-right: 1px solid #95A9B8;
border-bottom: 1px solid #95A9B8;
border-left: 1px solid #152938;
}

Pozdrav,
BURA

[ Br@nkoR @ 22.09.2004. 10:44 ] @

Slika se ucita tek posto se stavi kursor misa preko celije.
Mada postoji resenje da se sve slike stave u jednu pa da se koristi "background-position".

[ BURA @ 22.09.2004. 11:17 ] @

Citat:

Mada postoji resenje da se sve slike stave u jednu pa da se koristi "background-position".

Daj mi pojasni ovo zadnje sa background-position. Razmisljam da cijelu stvar rjesim sa onmouseover forom, u tom slucaju bi morao u gif ucrtati bordere i background color a to bi otezalo gifove (sada su transparentni) a ima ih dosta pa se opet bojim ucitavanja.
Imas kakav savjet sto se tice nacina. Koji je bolji?

Pozdrav,
BURA

[ Br@nkoR @ 22.09.2004. 11:32 ] @

Evo nabrzinu sam uradio. Uporebio sam ovaj tvoj kod sto si gore napisao:
http://branko.superihost.com/primer/primer.html

Upotrebio sam samo jednu sliku dimenzija 28x56 pixel-a:

Posto vidim da imas 15-ak takvih celija uradio sam tako da uvek mozes koristiti samo jedan css kod, pomocu:

Code:
<a href="#" class="taster" style="background-image: url(primer.gif);"></a>

Pozdrav Branko.

[ BURA @ 22.09.2004. 11:49 ] @

E bravo... super fora. Moram priznati da mi nije palo na pamet mada sam razmisljao da sa "align" probam rjesiti kada si spomenuo spajanje gifova u jedan.
I daj mi reci sta mislis oce ovo ici brze od rjesenja javascriptom (onmouseover) kada ce biti na netu.
Hvala na pomoci,
Pozdrav,
BURA

[ Br@nkoR @ 22.09.2004. 15:33 ] @

Nisam siguran koje resenje je brze.

Mala ispravka postojala je greska u kodu, tako da ovo nije radilo u Firefox-u. Nisam primetio gresku u tvom kodu kada sam ga kopirao, a greska je bila u:

Code:
.taster:activ

vec je:

Code:
.taster:active

Pozdrav.

[ Aleksandar Ružičić @ 05.02.2006. 02:08 ] @

tema jeste stara ali ja imam isti problem (hocu jednu sliku da koristim za off i za hover stanja linka) a onaj brankov link ne radi, jel moze neko da napise ovde kod...

hvala unapred

[ Br@nkoR @ 05.02.2006. 08:44 ] @

Mislim da je to bio ovaj primer:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>primer</title>

<style type="text/css" media="all">
body {
background-color: #29506F;
}
.alati {
padding: 7px;
}
.taster {
background-position: 0px 0px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
background-color: #29506F;
display: block;
float: left;
background-image: url(primer.gif);
}
.taster:link, .taster:visited {
background-position: 0px 0px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
background-color: #29506F;
display: block;
float: left;
}
.taster:hover {
background-position: 0px -28px;
background-repeat: no-repeat;
background-color: #29506F;
border-top: 1px solid #152938;
border-right: 1px solid #95A9B8;
border-bottom: 1px solid #95A9B8;
border-left: 1px solid #152938;
display: block;
float: left;
}
.taster:active, .taster:focus {
background-position: 0px -28px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
background-color: #AABFD4;
border-top: 1px solid #152938;
border-right: 1px solid #95A9B8;
border-bottom: 1px solid #95A9B8;
border-left: 1px solid #152938;
display: block;
float: left;
}
</style>
</head>
<body>
<a href="#" class="taster"></a>
</body>
</html>

uz poruku je zakačena slika.

[ Aleksandar Ružičić @ 06.02.2006. 00:45 ] @

hvala sad cu da isprobam :D