Autor Zpráva
liborse
Profil
Dobrý den,

vím, že je to asi zvláštní otázka, ale pokusím se přiblížit problém. Potřebuji v inline zápisu CSS definovat chování odkazu při najetí myší (pseudotřída hover). Jde to? Pokud ano, jak? Pro použití inline stylu mám svůj důvod - každý odkaz v menu bude mít svůj vlastní měnící se obrázek hned vedle odkazu, php mi bude načítat vždy ty dvě adresy, tudíž to nemohu dát do hlavičky atd. Nebo existuje jiné elegantní řešení?

Ano, šlo by to jednoduše přes javascript, ale já se mu chci vyhnout. Bez JS by se pak design mohl rozpadnout.

Pokud to nejde, nějak to obejdu...
SwimX
Profil
liborse:
předpokládám že to nejde.

Ale to menu se bude nák generovat? ty obrázky bude php vytvářet? Pokud ne, pak nevidím důvod nedat odkazů id a v css je zaměřit
a#id:hover
habendorf
Profil
Takhle to pokud vím nejde.

Řešením je sloučit ty dva obrázky do jednoho a při hoveru s ním šikovně hýbat, aby byla vidět ta část, kterou potřebuješ.
liborse
Profil
Odpovídám habendorfi:

Ano, našel jsem Tvé řešení, moc se mi líbí. Ovšem mám problém s tím, že není vidět text za IMG tagem. To je logické, protože přetékání je tam potlačeno. Zkusil jsem to obejít přes position: absolute, text je pak vidět, ale zatím jsem to zkoušel jen u jedné položky, navíc text poté poskakuje... Asi je to blbý a nepěkný pokus o to to nějak řešit, ale i přesto sem ten kód dám. ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">

<head>

<meta http-equiv="content-Type" content="text/html; charset=utf-8" />

<title>Změna obrázku při najetí kursoru</title>

<style type="text/css">

a {display: block; float: left; width: 12px; height: 12px; overflow: hidden;}

a:hover {text-indent: -12px;}

a img {border: none;}
span.sp {position: absolute; left: 20px;}

</style>

</head>



<body>

<h1>Změna obrázku při najetí kursoru</h1>

<a href="z.html"><img src="button.png" width="24" height="12" alt=" "> <span class="sp">fdsfdsf</span></a>



</body>

</html>
liborse
Profil
Jinak koukám, že proti tomu doctype to není validní. Osobně to pak chci použít v jiném doctype (s HTML 4, ovšem který nutí IE6+ se správně chovat, alespoň někdy)
liborse
Profil
Tak si říkám, jestli nakonec nepoužít ten javascript (i když je mi to proti srsti). Ale to řešení má tu nevýhodu, že se oba obrázky nenačtou současně a problikává to... I když u malých by to nemělo vadit, že... No, ještě si vyhraju s tím text-indent.
habendorf
Profil
liborse:
že není vidět text za IMG tagem

Dát obrázek na background?
liborse
Profil
Koukám, že tu mou úpravu nezkousne IE, no ostatně jako vždy.. :-( Takže se vrátím k tvému řešení zpět na začátek, to v IE6 funguje. Jak to myslíš, abych dal obrázek na background? Ještě mě napadlo to, že udělám daný obrázek delší, jako je šířka menu či textu (ale to netuším jak)...
liborse
Profil
Tak se mi podařilo udělat to, že jsem tam dal bílý obrázek a dosáhl jsem stejného efektu s tím, že mohu div roztáhnout. Ovšem text poskakuje zleva doprava podle toho, jestli na to najedu myší. Zkoušel jsem to dát do relativního spanu, ve kterém je vnořen absolutní span, ale text poskakuje i nadále. Nj, blbá myšlenka. Tohle obejít a jsem vysmátej. Netušíš?

Jde mi o to, aby se měnil současně obrázek i odkaz.
habendorf
Profil
liborse:

Někam to nahraj a ukaž, tohle je k ničemu.
liborse
Profil
Najdeš to zde /původní verze v CSS/:

http://demo.webspen.cz/zmeny/zmena-obrazku.html

Začal jsem to nakonec dělat přes js. Je to věc, která když se nezobrazí, tak to nevadí. Navíc mnohem lépe se mi ten kód bude generovat, ještě bych rád vyřešil ten preload obrázků, ale to už je věc do jinýho fóra a jistě se to už řešilo. Problém s tím CSS byl ten, že IE to dost rozbil (zkoušeno na IE6, který stále akceptuju, ač nerad).
x
Profil *
Ve stylech odkazu [#11] jsem si všiml řetězce disfplay. To je něco, co neznám, nebo to je jen překlep a má tam být display?
liborse
Profil
To je překlep.
habendorf
Profil
No to je strašný řešení. Pořád nechápu, proč ten obrázek nedáš jako background toho linku.
liborse
Profil
Ano, to řešení bylo strašné, taky se mi hnusí. Také mám cit pro jednoduchý kód a toto byla opravdu pra...na. S tím backgroundem tě asi úplně nechápu, i když asi tuším. Každopádně jsem to udělal přes js, kód je čistý pěkný, kdo nemá js, tomu to prostě nebude problikávat, myslím, že taková tragédie to není. Kód je opravdu jednoduchý a validní, navíc obrázky přednačítám, takže se to zobrazuje rychle jako u tvého řešení. Tvoje řešení je pěkné, někdy se k němu vrátím a poperu se s tím backgroundem. To, co mi fungovalo ve FF, tak nešlo v IE, navíc ten kód (mnou upravený) byl hnusnej, tak jsem šáhl po js... Vím, je to výmluva. Jak říkám, časem se k tomu vrátím. Díky

Dost se mi líbí ta představa nemít tam js, ale co naplat, asi nejsem v css tak dobrej, musím se ještě hodně učit.
habendorf
Profil
Nemusíš nutně aplikovat to řešení s jedním obrázkem, klidně to udělej se dvěma.

Principiálně:

a {background: obrazek1}
a:hover {background: obrazek2}
Bubák
Profil
habendorf:
klidně to udělej se dvěma.
Třebas takto: http://teststranek.kvalitne.cz/menu-odrazkove-1/
Hover textu odkazů si doplň a pokud nechceš měnit pozici obrázku, tak pochopitelně nemusíš.
liborse
Profil
Odpovídám habendorfovi:

No, já to tak chtěl udělat, proto jsem se tak blbě ptal na ten inline zápis už v úvodu. Škoda, že ten návrh je jen v draftu na ten inline zápis. Tam je potíž s tím, že obrázky se načítají až dále za hlavičkou, musel bych ten systém překopat, což teď nestíhám, protože mám dvě větší zakázky plus dodělávku další pro slepého pána (úprava formulářů přidáním labelů pomohla evidentně :-) ). Takže tam zatím dám ten javascript a bude to fungovat. Jak se znám, k tomu CSS se dostrkám. ;) Spíš teď vylepšuju SEO modul (když to zákazník chce, proč mu to nedopřát) a poliďšťuju administraci.

Odpovídám Bubákovi:

Jojo, o tom vím, tohle udělám bez problémů, ale jak jsem psal výše, díky tomu, jak jsem to udělal, tak menu se načítá až za hlavičkou a zrovna nemám čas to překopávat. Javascript zatím bude stačit, je to relativně malý zásah. Preferuju stabilitu před narychlo látaným řešením. Nebýt tam problém s tím hoverem, tak je to v klidu. Hlavně u každé položky bude jiný obrázek, jak to zákazník chce. Jinak vím o tom, že style mohu použít i v body, ale mám dojem, že to není dle specifikace a není to čisté řešení. Chci mít validní kód, už kvůli kontrole syntaxe, kdyby nic jiného.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: