[HTML,CSS] rollover
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...
ntb acer aspire 5024 wlmi
Re: [HTML,CSS] rollover
a {
background-color: #FF0000;
}
a:hover {
background-color: #0000FF;
}
GigaByte GA-M55plus-S3G --- A64 3200+ @ 24oo ~ 1,375V BOX --- 2x512 Geil 667 CL4 @ 980 CL5 --- WD2500KS --- Acer AL1721ms --- 1/1 MBit/s via WiFi
Blog
09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0 aneb jeste ze ty "ochrany" programujou rozumny lidi :]
Re: [HTML,CSS] rollover
Re: [HTML,CSS] rollover
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
ntb acer aspire 5024 wlmi
Re: [HTML,CSS] rollover
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.
GigaByte GA-M55plus-S3G --- A64 3200+ @ 24oo ~ 1,375V BOX --- 2x512 Geil 667 CL4 @ 980 CL5 --- WD2500KS --- Acer AL1721ms --- 1/1 MBit/s via WiFi
Blog
09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0 aneb jeste ze ty "ochrany" programujou rozumny lidi :]
Re: [HTML,CSS] rollover
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...
ntb acer aspire 5024 wlmi
Re: [HTML,CSS] rollover
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');
}
GigaByte GA-M55plus-S3G --- A64 3200+ @ 24oo ~ 1,375V BOX --- 2x512 Geil 667 CL4 @ 980 CL5 --- WD2500KS --- Acer AL1721ms --- 1/1 MBit/s via WiFi
Blog
09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0 aneb jeste ze ty "ochrany" programujou rozumny lidi :]
Re: [HTML,CSS] rollover
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
ntb acer aspire 5024 wlmi
Re: [HTML,CSS] rollover
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>
CPU: Intel Core2 Duo E8400 3.0 GHz ■ MB: Gigabyte GA-X48-DS4 ■ RAM: Corsair 4x 2 GB DDR2 1066 CL5 ■ VGA: Gainward 8996-Bliss 8800GTS 512MB, PCIE ■ HDD: Samsung SATA 300 GB + 500GB ■ DVD: LG GSA-H44N Silver ■ Case: Chieftec LCX-01SL-SL-B ■ Power Supply: Seasonic S12II-500 500 W ■ Mouse: Logitech MX1000 ■ Keyboard: Logitech Media Keyboard Elite ■ LCD: Eizo L887 ■ Watercooled: -
Notebook: Acer TravelMate 8202WLMi - 100 GB + Mouse Logitech G7
Re: [HTML,CSS] rollover
GigaByte GA-M55plus-S3G --- A64 3200+ @ 24oo ~ 1,375V BOX --- 2x512 Geil 667 CL4 @ 980 CL5 --- WD2500KS --- Acer AL1721ms --- 1/1 MBit/s via WiFi
Blog
09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0 aneb jeste ze ty "ochrany" programujou rozumny lidi :]
Re: [HTML,CSS] rollover
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>
ntb acer aspire 5024 wlmi
VIP
Re: [HTML,CSS] rollover
Skus vypustit then ":link", teda prvy def bude vyzerat ako:
(Inak by to malo byt +/- funkcne)Kód:a.odkaz { ... }
Intel Core 2 Duo E6600 @ 3.2GHz (8 * 400MHz) @ 1.3V with Zalman CNPS9500 AT @ 1800RPM, ASUS P5B Deluxe/WiFi, 2x1GB Corsair Twin2X PC2-6400 DDRAM @ 400MHz (4-4-4-12) @ 2.1V, Leadtek 8800GT 512MB, WD Caviar SE16 250GB, Asus DRW-1608P3S, Creative SB Audigy Value, Logitech X-230 speakers, Enermax Liberty 400W, 2x120mm Thermaltake case fan @ 1800RPM, Thermaltake Aguila black case, HP LP2065 LCD, Logitech MX400
Re: [HTML,CSS] rollover
super, ted uz to de.. dikes moc
ntb acer aspire 5024 wlmi
Toto téma si právě prohlíží 1 uživatelů. (0 registrovaných a 1 anonymních)
Pravidla přispívání
Odpověď s citací