[ crnogorac081 @ 30.09.2008. 14:13 ] @
kao npr na sajtu livescore, da postavim neki img pored menija pa kad se postavi mis preko te stavke da se slika promijeni.. ??
[ Aleksandar Ružičić @ 30.09.2008. 14:56 ] @
Code:

.rolover .hover, .rolover:hover .normal { display: none; }
.rolover:hover .hover, .rolover .normal { display: inline; }

Code:

<a href="#" class="rolover"><img src="normal-state-picture.png" class="normal" /><img src="hovered-state-picture.png" class="hover" /></a>
[ crnogorac081 @ 30.09.2008. 15:18 ] @
jel se i donji code pise u istom css fajlu ?
[ Aleksandar Ružičić @ 30.09.2008. 15:48 ] @
prvi je css drugi ti je html
[ enLIGHTen @ 30.09.2008. 18:44 ] @
Moze se upotrebiti trick postizanja rollover-a sa samo jednom slikom (koja se na startu ucita).
Primer.
Naime, zeljene slike (original i rollover) su sirine 120px i visine 60px.Nameste se jedna pored druge, cime ukupna duzina iznosi 240px, dok je visina nepromenjena.
Zatim pomocu pseudo-klasa se definise pozadina koju reprezentuje leva polovina, dok :hover aktivira desnu polovinu iste slike, tako da se rollover efekat postize pomeranjem slike ulevo.

Napomena: u <a> odeljku nema <img> elementa.

html
Code:
<a href="link.html" class="rollover">naziv_slike</a>

css
Code:
.rollover    {
    display: block;
    width: 240px;
    height: 60px;
    background-image: url(rollover.gif);
    background-repeat: no-repeat;
    text-indent: -9999px;
}
a.rollover:link, a.rollover:visited, a.rollover:active    {
    background: url(rollover.gif) no-repeat;
}
a.rollover:hover    {
    background-position: -120px 0;
}
[ Aleksandar Ružičić @ 30.09.2008. 23:07 ] @
moze i tako naravno ali nije to trazio (mada nisam bas siguran ni da je on siguran sta mu tacno treba) a i nedostatak te tehnike je sto element mora (uglavnom) da bude display:block da bi se videla cela pozadinska slika, a <a> element je inline...
[ enLIGHTen @ 01.10.2008. 01:48 ] @
Svaki pristup krase prednosti i mane (recimo sa dva img-a rizikuje pojavljivanje "lag-ova" pri brzom prelasku misa ili usled zaglusenja konekcije), ali korisno je upoznati sto vise varijacija, kako bi se nacinio pravi izbor...
[ crnogorac081 @ 01.10.2008. 01:50 ] @
pa ja sam fino objasnio, istu foru ko na livescore da ubacim u svoj template... znaci ono na onmouseover ide jedna slika a kad se makne druga.. e sad to ja umijem u code-u napisati kada pisem obicni html, samo ne znam kako da integrisem u CSS i index.php u templateu... valjda je to taj code sto je Aleksandar napisao ? nadam se da me ukapirao :)

/////////

Evo provalio sam jedan dio

Code:

#avmenu li a {
font-weight:bold;
height:20px;
text-decoration:none;color:#505050;
display:block;
padding:6px 0 0 10px;
background:#ffffff url(img/menu.gif) bottom left no-repeat;
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
}



e sad mi u tom polju gdje mi je stavka menija stoji naziv stavke i ova slika lijevo ali posto je backgr. dio teksta ide iza slike... kako da pomjerim ovo za sirinu slike ?

[Ovu poruku je menjao crnogorac081 dana 01.10.2008. u 03:30 GMT+1]
[ enLIGHTen @ 01.10.2008. 13:46 ] @
Ukoliko sam dobro razumeo, trenutni problem je u padding left,
Code:
padding:6px 0 0 10px

ovde ovih 10px treba povecati kako bi se tekst sa linka pomerio udesno.

Sto se tice rollover-a, Aleksandar je ponudio elegantno i prakticno resenje, tim pre ukoliko je u pitanju slicica manjih dimenzija.
[ crnogorac081 @ 01.10.2008. 14:36 ] @
e hvala proradilo je :)