Změna HTML ikonky po najetí

[KodoerLv]

Prajem pekny den.

Mam taku otazocku do plena. Html / css. Mam klasicke menu kde su ikony. Bohuzial maju len jednu farbu a klient pozaduje aby sa menila len ta ikona na inu farbu po hover efekte. Ako hladam tak hladam nenasiel som riesenie a cele to prekreslovat sa mi naozaj nechce. Ma niekto skusenost ? Radu ?

[Reklama]

[Petr Krčmář]

Dá se to řešit pomocí filtrů, ale ve Firefoxu se to nechová dobře. Mrkni, jak jsem to řešil na https://www.linuxdays.cz/ vpravo na těch čtyřech ikonách DNSSEC, TLSA, IPv6 a SSL. Je tam řešení, které funguje v Chrome (filtr) i ve Firefoxu (překryvná SVG vrstva).

[UrielSVK]

Musi sa farbit cela? nestacil by 1-2px okraj? Pripadne sprav ikonu priehladnou a men farbu pozadia. Alebo daj nejaky div pred to a men jeho farbu.

[X125]

Něco takového?
http://www.jakpsatweb.cz/odkazy.html#menici

[Pavouk106]

Je to (z mýho laickýho pohledu) nejlepší tak, jak naznačil X125. Doporučuju i Pixiho vylepšení (je taky popsaný v tom odkazu, je tam i vysvětleno proč).

Je to fakt jednoduchý jako facka a funkční ;-)

[Reklama]

[nobody]

potvrzuju ze reseni co poslal X125 funguje i v Opera12, narozdil od LinuxDays kde zobrzuje vse uz rovnou barevne

[Halamus]

Aby změn bylo co nejméně, tak aspoň napiš, zda ikony v menu máš jako <img>, nebo jako obrázky na pozadí, zpravidla to bývají obrázky na pozadí odkazu.

Takto vypadá nejjednodušší řešení pro změnu obrázku na pozadí odkazu, v podstatě jde o Pixyho řešení ořezané na kost, ale je funkční od IE6 (pravděpodobně i v IE5, ale nemám otestováno) až po moderní prohlížeče:
http://teststranek.kvalitne.cz/css-rollover/

Takto vypadá jedno z mnoha řešení pro změnu obrázku, vloženého jako element IMG:
http://teststranek.kvalitne.cz/blend-hover-01/
Plynulou změnu je možné vypustit. Změna obrázku funguje od IE6 (pravděpodobně i v IE5, ale nemám otestováno) až po moderní prohlížeče, ale plynule probíhá jen v prohlížečích s podporou CSS3 transitions.

[jehovista]

potvrzuju ze reseni co poslal X125 funguje i v Opera12, narozdil od LinuxDays kde zobrzuje vse uz rovnou barevne

Operu stejne nikdo nepouziva

[Pavouk106]

Operu stejne nikdo nepouziva

Hrdě se hlásím ke skupině "nikdo"

[KodoerLv]

Problem je ten ze ja mam ten obrazok defaultne v jednej farbe a netusim ako ho zmenit to je ten master problem ale inak presne ako pise X

[Pavouk106]

Problem je ten ze ja mam ten obrazok defaultne v jednej farbe a netusim ako ho zmenit to je ten master problem ale inak presne ako pise X

1. uděláš si novej obrázek o dvojnásobnym rozměru (přesněji o dvojnásobné výšce)
2. do horní poloviny dáš ten obrázek co máš
3. do dolní poloviny musíš vyrobit vzor obrázku "po najetí na něj"
4. uložíš a používáš už jen tento obrázek

Pak už postupuješ dle návodu od X125. Obrázek použiješ v CSS stylu jako background-image zarovanej svisle na "top" a po najetí ho CSS stylem posuneš o polovinu jeho výšky (takže se vlastně zobrazí spodní polovina) nebo ho svisle zarovnáš na "bottom". Snad si to ještě pamatuju...

[Halamus]

Pokud nemáš žádný grafický editor nainstalovaný, tak použij třebas online editor http://apps.pixlr.com/editor/ - vyžaduje flash.
Pak otevřeš obrázek v editoru a dáš:
Seřízení, Tón a sytost, barvu měníš táhelkem Tón. Podle potřeby můžeš změnit i sytost a světlost (jas).
Pak obrázek uložíš pod novým jménem!, doporučuji ve formátu PNG.
Já osobně vidím problémy dva, vytvoření obrázku s jinou barvou, postup jsem nyní popsal a stále tajíš, zda se má měnit IMG, nebo baskgound-image.

[haha]

Málo informací. Nejjednodušší je používat už v grafických návrzích ikonové fonty(např. fornt Awesome), které vypadají dobře při jakékoliv hustotě pixelů a hlavně se na ně dá aplikovat CSS. Ušetříš tím spoustu práce sobě i těm, co budou muset s tvým kódem následně pracovat. Pokud už to máš ve spritech, tak si vygoogluj dávkové zpracování ve Photoshopu(nebo v čem zrovna pracuješ). Možná bys klienta přesvědčil jednoduchým snížením opacity ikony o třetinu, zlehka se tak zabarví do barvy pozadí menu. Animovat to pak můžeš třeba přes transitions.

[Halamus]

Teoreticky je podpora ikonových fontů v prohlížečích velice dobrá, praxe je horší (externí fonty nepodporují některé mobilní prohlížeče, blokují je některá rozšíření anebo proxy) fallback, na rozdíl od obrázkových řešení, není.

[haha]

Prakticky je podpora skvělá, s trochou snahy to funguje i v IE7. Oproti spritům to má skoro samá pozitiva. Samozřejmě by se s tím mělo počítat už v grafickém návrhu. Jako náhradu spritů do budoucna vidím vektory v jakékoliv podobě, momentálně je nejvýhodnější použít fonty.