[es] - Kako dobiti efekt....

BURA
Zg

Član broj: 20574
Poruke: 103
213.191.154.*

Sajt: www.ptice.net

Profil

^{20.09.2004. u 13:49 - pre 238 meseci}

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

Gdje god možeš posadi drvo...
gdje je drvo doći će i PTICE

Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost

+23 Profil

Re: Kako dobiti efekt....

^{21.09.2004. u 13:45 - pre 238 meseci}

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]}

^{Banned - Not available}

Odgovor na temu

BURA
Zg

Član broj: 20574
Poruke: 103
213.191.154.*

Sajt: www.ptice.net

Profil

Re: Kako dobiti efekt....

^{22.09.2004. u 09:44 - pre 238 meseci}

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

Gdje god možeš posadi drvo...
gdje je drvo doći će i PTICE

Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost

+23 Profil

Re: Kako dobiti efekt....

^{22.09.2004. u 10:44 - pre 238 meseci}

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".

^{Banned - Not available}

Odgovor na temu

BURA
Zg

Član broj: 20574
Poruke: 103
213.191.154.*

Sajt: www.ptice.net

Profil

Re: Kako dobiti efekt....

^{22.09.2004. u 11:17 - pre 238 meseci}

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

Gdje god možeš posadi drvo...
gdje je drvo doći će i PTICE

Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost

+23 Profil

Re: Kako dobiti efekt....

^{22.09.2004. u 11:32 - pre 238 meseci}

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.

^{Banned - Not available}

Odgovor na temu

BURA
Zg

Član broj: 20574
Poruke: 103
213.191.154.*

Sajt: www.ptice.net

Profil

Re: Kako dobiti efekt....

^{22.09.2004. u 11:49 - pre 238 meseci}

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

Gdje god možeš posadi drvo...
gdje je drvo doći će i PTICE

Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost

+23 Profil

Re: Kako dobiti efekt....

^{22.09.2004. u 15:33 - pre 238 meseci}

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.

^{Banned - Not available}

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Kako dobiti efekt....

^{05.02.2006. u 02:08 - pre 221 meseci}

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

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost

+23 Profil

Re: Kako dobiti efekt....

^{05.02.2006. u 08:44 - pre 221 meseci}

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.

^{Banned - Not available}

Prikačeni fajlovi

primer.gif - 0.1k

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Kako dobiti efekt....

^{06.02.2006. u 00:45 - pre 221 meseci}

hvala sad cu da isprobam :D

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu