Novo

Forum kao aplikacija na telefonu

Dodajte forum na početni ekran i koristite ga kao aplikaciju, sa menijem na dnu ekrana.

  • 10 odgovora
  • 3.673 pregleda

Najnovija ↓

Kako dobiti efekt.... 20.09.2004. u 14:49 · pre 269 meseci #1
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
Potpis
Gdje god možeš posadi drvo...
gdje je drvo doći će i PTICE
Re: Kako dobiti efekt.... 21.09.2004. u 14:45 · pre 269 meseci #2
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]
Potpis
Banned - Not available
Re: Kako dobiti efekt.... 22.09.2004. u 10:44 · pre 269 meseci #3
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
Potpis
Gdje god možeš posadi drvo...
gdje je drvo doći će i PTICE
Re: Kako dobiti efekt.... 22.09.2004. u 11:44 · pre 269 meseci #4
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".
Potpis
Banned - Not available
Re: Kako dobiti efekt.... 22.09.2004. u 12:17 · pre 269 meseci #5
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
Potpis
Gdje god možeš posadi drvo...
gdje je drvo doći će i PTICE
Re: Kako dobiti efekt.... 22.09.2004. u 12:32 · pre 269 meseci #6
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.
Potpis
Banned - Not available
Re: Kako dobiti efekt.... 22.09.2004. u 12:49 · pre 269 meseci #7
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
Potpis
Gdje god možeš posadi drvo...
gdje je drvo doći će i PTICE
Re: Kako dobiti efekt.... 22.09.2004. u 16:33 · pre 269 meseci #8
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.
Potpis
Banned - Not available
Re: Kako dobiti efekt.... 05.02.2006. u 09:44 · pre 252 meseca #10
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.
Potpis
Banned - Not available
Prijavite se da biste odgovorili u ovoj temi.PrijavaRegistracija

Premeštanje teme