kako napraviti sliku pored menija u CSS

[ 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 :)