Zobrazení obrázku po najetí myši

Můžeš spojit dva obrázky do jednoho (natvrdo, v nějakém grafickém editoru), výsledný obrázek dát na pozadí a pomocí CSS ho na hover přesouvat. Podívej se třeba na menu 2 na Bubákově stránce. (Tady v diskusi jsi např. toto řešení nenašel? Stejný dotaz je tu tak jednou týdně.)

karel novotný:
obrázek, který se má zobrazovat nahoře, bude vždy stejný? Pak není co řešit a při :hoveru měň jeho visibility, resp. display.

karel novotný:
„jestli neexistuje nějaké jiné, elegantnější řešení..“
nemyslím si, tohle mi přijde elegantní až až :-)

Reaguji na karla novotného:

CSS je už z principu soubor prezentačních předpisů, zatímco jazykem HTML kóduješ vlastní obsah. Máš-li jednou takové, podruhé makové a potřetí zase jiné páry obrázků, jedná se o změny obsahu, což spadá pod HTML. Mohl bys sice měnit v CSS cesty a názvy obrázků, na které se pořád stejné HTML odvolává, ovšem dostávat – předpokládám na stejné adrese a na stejná klíčová slova – co chvíli něco jiného, to bych asi nebyl nadšený ani jako uživatel, ani jako vyhledávač.

Snad ještě k tomu mnou odkázanému příkladu – jednoduchou úpravou to můžeš dělat i s dvěma samostatnými obrázky. Vtip odkázaného řešení je ten, že se načítá jen jeden obrázek. Se dvěma obrázky se může stát, že se druhý nenačte nebo se načte trochu později a pak to nevypadá hezky.

„přidávám přímo z internetu bez toho, abych je měl na disku“
Jen se zeptám – autorská práva máš ošetřena?

Reaguji na karla novotného:
„tak abych nemusel zasahovat do html“
To jsou vstupní podmínky spíš pro extrémní řešení, než pro elegantní.
Jak přesně vypadá to HTML, do něhož nechceš zasahovat? Je obrázek obalen do něčeho, s čím si lze hrát?

Existuje pseudotřída :hover. (Mou otázku ohledně autorských práv jsi asi přehlédl, že?)

karel novotný:
Shrnu to. CSS nemá žádnou vlastnost foreground, protože co je vpředu, to je důležité a důležitý je obsah a ten je psán v HTML. CSS pouze řídí jeho formu. Pokud to jsou tedy stěžejní obrázky, mající nějakou informační hodnotu, pak je vhodné použít tag <img> a obrázky měnit např. pomocí výše zmíněné vlastnosti visibility resp. display a preudotřídy :hover. Pokud nemají žádnou informační hodnotu a jsou to pouhá pozadí, pak je to práce CSS, které si s tím poradí díky své vlastnosti background.

karel novotný:
Mají-li být na stránce dva nezávislé obrázky nad sebou, bude muset být každý v jiném HTML elementu. Buď jeden jako běžný obrázek a druhý napozicovaný nad ním nebo oba jako pozadí ve dvou vnořených blocích (příklad). Bez úpravy HTML kódu s tím nehneš.