kao npr na sajtu livescore, da postavim neki img pored menija pa kad se postavi mis preko te stavke da se slika promijeni.. ??
kako napraviti sliku pored menija u CSS
Zaključano
Zakačeno
Code:
.rolover .hover, .rolover:hover .normal { display: none; }
.rolover:hover .hover, .rolover .normal { display: inline; }
.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>
<a href="#" class="rolover"><img src="normal-state-picture.png" class="normal" /><img src="hovered-state-picture.png" class="hover" /></a>
jel se i donji code pise u istom css fajlu ?
prvi je css drugi ti je html
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
css
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>
<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;
}
.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;
}
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...
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...
izmenjeno 1 put, poslednji put crnogorac081 01.10.2008. u 03:30
Izmene poruke
- crnogorac08101.10.2008. u 03:30zapis iz teksta poruke
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
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 ?
/////////
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;
}
#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 ?
Ukoliko sam dobro razumeo, trenutni problem je u padding left,
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.
Code:
padding:6px 0 0 10px
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.
e hvala proradilo je :)
Tema je zaključana, nove poruke nisu moguće.