Printable View
zdravim, snazim se pomoci css docilit rollover efektu, ale nejak se mi to nedari... jde mi o to, aby se obrazek umisteny do divu po najeti kurzem zmenil a po klinkuti odkazal na jinou stranku.. doposud jsem toto resil javascriptem, ale rad bych toho docil pomoci css, jestli to jde...
a {
background-color: #FF0000;
}
a:hover {
background-color: #0000FF;
}
2 meluzina: to je rollover vytvorenej pomoci zmeny barvy a ne obrazku...
2 jedik: oni ale pro vytvoreni odkazu pouzivaji text, ja potrebuju ten odkaz vytvorit pomoci obrazku
nebyl jsem si jistej syntaxi atributu background-image a myslel jsem ze bys to vymyslel sam.
tak tady ti napisu zmenu obrazku, ale nezarucuju syntaxi:
a {
background-image: url('obr1.jpg');
}
a:hover {
background-image: url('obr2.jpg');
}
Ovsem kazdopadne tam nakej javascript dej, aby byly obrazky predem nacteny v cachy prohlizece, jinak to bude problikavat.
to ale porad neresi muj problem... k cemu mam ten CSS styl cos mi napsal priradit? predpokladam ze k odkazu (vytvorenyho z textu), ale to ja nechci...
A co chces? Nestaci ti mit na strance prvek, ktery bude mit vzhled obrazku, rollover efekt a funkcnost odkazu?
pouziti toho co tu s jedikem pisem je takove:
<html>
blablablabla
<a href="odkaz.nekam.html"></a>
blablabla
</html>
k tomu pripojis tenhle css:
a {
background-image: url('obr1.jpg');
width: 100px;
height: 20px;
}
a:hover {
background-image: url('obr2.jpg');
}
no, nejak mi to nefunguje... potrebuju presne to, co pises tj., ale nedari se mi to udelat... za prvy, kdyz to udelam presne tak jak pises, tak se mi rozhodi vsechny odkazy, ale stejne nevznikne pozadovany efekt... tak nevim :(
jasne, nesmis pouzit
a {
background-image: url('obr1.jpg');
width: 100px;
height: 20px;
}
a:hover {
background-image: url('obr2.jpg');
}
ale
a.odkaz:link {
background-image: url('obr1.jpg');
width: 100px;
height: 20px;
}
a.odkaz:hover {
background-image: url('obr2.jpg');
}
a pak
<a class="odkaz" href="odkaz.nekam.html"></a>
diky vsem za rady! uz se mi to podarilo rozchodit pod mozillou, ale v IE 7.0 mi to nefakcenkuje, vubec se tam ten obrazek neobjevi... zvlastni je, ze ta ukazka od meluziny mi jde i v IE... tady je kod jak to mam napsany:
CSS:
a.odkaz:link {
background-image: url(reference_list/mediterranean_villa_1/thumb01bw.jpg);
display:block;
width:68px;
height:68px;
}
a.odkaz:hover {
background-image: url(reference_list/mediterranean_villa_1/thumb01.jpg);
}
HTML:
<div id="Layer18"><a class="odkaz" href="mediterranean_villa_1_01.html"></a></div>
Skus vypustit then ":link", teda prvy def bude vyzerat ako:
(Inak by to malo byt +/- funkcne)Kód:a.odkaz {
...
}
super, ted uz to de.. dikes moc