| Autor | Zpráva | ||
|---|---|---|---|
| Jirka.V Profil * |
#1 · Zasláno: 21. 1. 2008, 13:06:27
Zdravim
Chtel jsem se zeptat. Mam kolem obrazku vytvoreny zluty ramecek o velikosti 2px a chtel bych docilit, aby se pri najeti kurzoru menil na cerveny. Je to mozny? |
||
| Str4wberry Profil |
#2 · Zasláno: 21. 1. 2008, 13:13:41
Ptám se Jirky.V:
A je ten obrázek odkazem? |
||
| Railbot Profil |
#3 · Zasláno: 21. 1. 2008, 13:19:54
Jirka.V
img:hover pro FF, Operu a IE od verze 7. IE6 bohužel hover na ničem jiném, než odkazu neumí, takže buď to oželit nebo využít trochu javascriptu například pomocí .htc souboru. |
||
| Jirka.V Profil * |
#4 · Zasláno: 21. 1. 2008, 14:02:48
Str4wberry: Ten obrazek je odkazem, bohuzel mne to funguje jen v mozille a v IE6 ne. V mozille se ten ramecek meni pri najeti kurzoru na oranzovou a v IE6 proste nic. Chtel jsem to mit kompatibilni s obema prohlizeci.
takhle mam napsanej code v CSS a {text-decoration: none;} a:link {color: #0f4ac5;} a:visited {color: #0f4ac5;} a:active {color: #0f4ac5;} a:hover {color: orange; text-decoration: underline;} div.fotky { position: relative; left: 0px; top: 0px; float: left; width: 600px; height: 125px; text-align: left; text-indent: 0cm; } HTML <div class="fotky"> <A href="uvod/p.robertmertensi/p.robertmertensi 1 - female.jpg" title="p.robertmertensi 1 - female"/><IMG src="uvod/p.robertmertensi/+p.robertmertensi 1 - female.jpg" align="left" Border="2" hspace="2" vspace="7"> Railbot: Promin, zapomnel jsem napsat, ze ten obrazek je odkazem...takze by to mohlo nejak fungovat i v IE6? |
||
| Trejpa Profil |
#5 · Zasláno: 21. 1. 2008, 14:07:18
Jirka.V
Je-li obrázek v odkaze, potom takhle: a img { border: 2px yellow solid; vertical-align: middle; } a:hover img { border-bottom-color: red; } |
||
| Bubák Profil |
#6 · Zasláno: 21. 1. 2008, 14:09:32
Koukni na něco podobného:
http://teststranek.kvalitne.cz/foto/den-nato-2006/ Důležitá je deklarace na 11. řádku: a:hover {visibility: visible; } Tam může být cokoliv, ale musí tam něco být. Tobě bude stačit stávající: a:hover {color: orange; text-decoration: underline;} |
||
| Jirka.V Profil * |
#7 · Zasláno: 21. 1. 2008, 15:02:34
Trejpa: Ta tva rada funguje, ale mam ten problem, ze to udela ramecek uplne u kazdeho obrazku, i u menu tlacitek. Potreboval bych, aby se ten ramecek objevoval jen v urcite casti stranky.
Konkretne v tyhle casti tabulky: CSS kod div.fotky { position: relative; left: 0px; top: 0px; float: left; width: 600px; height: 125px; text-align: left; text-indent: 0cm; } HTML kod <div class="fotky"> <A href="uvod/p.robertmertensi/p.robertmertensi 1 - female.jpg" title="p.robertmertensi 1 - female"/><IMG src="uvod/p.robertmertensi/+p.robertmertensi 1 - female.jpg" align="left" Border="2" hspace="2" vspace="7"> <A href="uvod/p.robertmertensi/p.robertmertensi 2 - female.jpg" title="p.robertmertensi 2 - female"/><IMG src="uvod/p.robertmertensi/+p.robertmertensi 2 - female.jpg" align="left" Border="2" hspace="2" vspace="7"> <A href="uvod/p.robertmertensi/p.robertmertensi 3 - male.jpg" title="p.robertmertensi 3 - male"/><IMG src="uvod/p.robertmertensi/+p.robertmertensi 3 - male.jpg" align="left" Border="2" hspace="2" vspace="7"> <A href="uvod/p.robertmertensi/p.robertmertensi 4 - male.jpg" title="p.robertmertensi 4 - male"/><IMG src="uvod/p.robertmertensi/+p.robertmertensi 4 - male.jpg" align="left" Border="2" hspace="2" vspace="7"></div> Zkousel jsem pridat "a img { border: 2px yellow solid; vertical-align: middle; } a:hover img { border-bottom-color: red; }" do toho "div.fotky", ale nefunguje to. Nevite nekdo jak to vyresit. P.S: Dekuju vsem za odpovedi |
||
| Trejpa Profil |
#8 · Zasláno: 21. 1. 2008, 15:23:45 · Upravil/a: Trejpa
Jirka.V
Nauč se něco o kontextové deklaraci (tedy mezeře): div.fotky a img { border: 2px yellow solid; vertical-align: middle; } div.fotky a:hover img { border-bottom-color: red; } Aplikuje se pouze na obrázky, které jsou v odkaze uvnitř bloku se třídou fotky. Tedy na <div class=fotky><a><img></a></div> a také na <div class=fotky><p><a><span><img></span></a></div> EDIT: Ještě související odkazy: http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html#selek tory http://interval.cz/clanky/css2-selektory-pseudotridy-a-pseudoelementy/ (téměř všechny pokročilé selektory nefungují v IE6-) |
||
| Jirka.V Profil * |
#9 · Zasláno: 21. 1. 2008, 21:49:22
Diky mockrat Trejpo, konecne mi to funguje jak v IE6 tak v Mozille a dik za ty odkazy.
|
||
|
Časová prodleva: 16 let
|
|||
0