Změna obrázku po najetí myši

http://stuff.1-webdesign.cz/text-indent.html

Třeba.

lepsi verze http://wellstyled.com/css-nopreload-rollovers.html

vmgjcjk

Neplete se ti krapet img a background?

lepsi verze
To bych netvrdil. Mám za to, že nezle říst, která verze je lepší. Ale je možnost výběru, což někteří vítejí a jiní se jí bojí.

habendorf
To jsi vymyslel, nebo jsi se inspiroval jinde?

Já jsem kdysi zkoušel změnuobrázků pomocí clip, ale dopadlo to špatně, v něktzerých prohlížečích se mi to rozpadalo. Možná zkusím znovu.

Bubák

Asi vymyslel, ale možná mě něco inspirovalo :o)

Mám za to, že nezle říst, která verze je lepší.

Hlavně je jiné použití. Tohle je změna obrázku, ne backgroundu.

Já jsem kdysi zkoušel změnuobrázků pomocí clip, ale dopadlo to špatně, v něktzerých prohlížečích se mi to rozpadalo.

Tohle http://pokusy.1-webdesign.cz/lupa/ jsi viděl?

leopik

ale ja myslim nieco klasicke viem ze sa to da. Prosim poradte mi

Máš tu dva linky. Co je na nich neklasického?

Odpovídám leopikovi:
Použij něco takového — http://www.jakpsatweb.cz/javascript/priklady/obrazky-zamena0.html
Akorát místo „onClick“ použiješ „onMouseOver“. A „onMouseOut“ pro vrácení původního obrázku.

„ale ja myslim nieco klasicke viem ze sa to da. Prosim poradte mi“
habendorfovo není špatné, jen má drobnou nevýhodu — ostatně stejně jako řešení, které odkazuji (viz výše).

Str4wberry

Jakou? Řešení z JPW je závislé na JS.

... a navíc musíš řešit preload.

Odpovídám habendorfovi:
„Jakou (drobnou nevýhodu)?“
Vidím ji v zobrazení stránky bez stylů.

Tohle http://pokusy.1-webdesign.cz/lupa/ jsi viděl?
To mám dokonce pro jistotu uložené ve své sbírce.

Str4wberry

Vidím ji v zobrazení stránky bez stylů.

Njn, je jasné, že u dynamické záležitosti se musíš spolehnout na nějakou technologii - CSS, JS, Flash ...
CSS mi připadá jako nejjistější volba, navíc u JS řešení (pokud bude pracovat se dvěma obrázky) budeš muset řešit preload. CSS řešení bude také vhodnější, pokud těch obrázků bude na stránce deset - jedna CSS deklarace a je hotovo.

Zkusil jsem vylepšení, ponechal jsem blokový odkaz, jeden obrázek je na pozadí, druhý je IMG. Výhodou tohoto řešení je, že v prohlížeči bez stylů je vidět normální obrázek vložený tagem IMG.
http://teststranek.kvalitne.cz/hover-text-indent1/

Bubák

V tom případě tam nemusíš šachovat s indentem, ne?

Co třeba a:hover img {visibility:hidden;} ?

O a: hover img {visibility:hidden;} jsem chvíli uvažoval, ale nezdálo se mi to jako dobrá myšlenka. Zkoušel jsem img {display:none;} v IE a šlapalo, ale v dalších prohlížečích jsem to nezkoušel. Když o tom znova přemýšlím, tak asi img {visibility:hidden;} bude nejlepší řešení, obejde se bez overflow.

Odpovídám habendorfovi:
„CSS mi připadá jako nejjistější volba“
Jistě, netvrdil jsem opak — je jsem poukazoval na drobný nedostatek.

Odpovídám Bubákovi:
Už se mi zdálo Tvé řešení ideální, ale menší (hodně malý) problém vidím vtom, že po najetí na obrázek a kliknutí RMB nemám možnost kontextové volby pro obrázek. Tedy nemohu si zkopírovat jeho adresu atd.

Str4wberry
Nevěděl jsem, jak to udělat, aby se IMG zobrazil jako druhý. Teď mám mizící obrázek, a pozadí zůstane, ale i já bych byl o něco radši, kdyby to bylo naopak.
Takže overflow bude asi muset zůstat a budu kouzlit s marginem.

Bubák

Můžeš dát třeba oba jako img s pos.:abs. a na hover jim prohazovat z-index. Ale to se zase nebude líbit Str4wberrymu, protože bez CSS uvidí oba :o)

Ale to se zase nebude líbit Str4wberrymu
Není jediný, proto jsem přemýšlel, jak to udělat, aby bez CSS byl vidět jen jeden obrázek.

Můžeš dát třeba oba jako img s pos.:abs
S pozicováním nemám tolik zkušeností, jako s marginem. A taky by v odkaze byly dva elementy, dva IMG, nebo IMG a SPAN s pozadím, já jsem se snažil pokud možno o takové řešení, aby HTML zůstal "čistý". CSS-ková alternativa k JS hoveru s preloadem.

kouzlit s marginem.
Stačilo přidat jednu deklaraci:
a {
margin-left: stejně-jako-width-img ;-)
...

Výsledek je na stejné adrese:
http://teststranek.kvalitne.cz/hover-text-indent1/

Velmi děkuji za připomínky habendorfovi a Str4wberrymu.

Pěkné, při hoveru tam máš zbytečnou width.

A co takto bez indentu:

a {
display: block;
width: 320px;
height: 240px;
overflow: hidden;
background: url(../images/obrazek-1bw.jpg);
}

a img {
border:none;
margin-left: 320px;
}
a:hover img {
margin-left: 0;
}

Když o tom přemýšlím, lepší by to bylo úplně obráceně - normálně img, při hoveru background. Protože jinak přijdu o alt, což je určitě větší chyba než dříve zmíněné "kliknutí RMB nemám možnost kontextové volby pro obrázek".

A že se k tomu ještě vracím ... co takhle bez zbytečného odkazu pouze paddingem?
http://pokusy.1-webdesign.cz/hover-obrazku/

Pro IE6 by se to muselo samozřejmě dořešit.

Protože jinak přijdu o alt
Právě že ne, IE ukáže alt při najetí myší, ukáže i imaketoolbar.
Pokud by někdo chtěl opačné chování, stačí jen vymazat margin u IMG a prohodit url pozadí a obrázku.

RMB prosím, co to je?

RMB prosím, co to je?

To je Str4wberryho výraz. Dešifroval jsem to jako right mouse button.

Odpovídám Bubákovi:
„RMB prosím, co to je?“
Right Mouse Button — pravé tlačítko myši.

A ještě jednou se k tomu vrátím, vím že už to hraničí s obsesí :o)

Tohle se často používá v menu. Potom vzniká s backgroundem problém, že bude pro každou položku potřeba třída (přesně řečeno pro n-1 položek). Takže asi zůstanu u toho indentu, tam třídy nepotřebuju.

habendorf
Mi se líbí, že je možnost výběru. Ať si každý vybere, co kdy chce. Pro menu bych taky zvolil dva obrázky v jednom plus text-indent.
U Galerie s hover-efektem u náhledů bych pravděpodobně dal přednost "svému" řešení. Náhledy bývají zesvětlené, nebo černobílé, při hoveru normální. To byl u mne důvod, proč jsem se snažil mít při hoveru zobrazený IMG, a ne obrázkové pozadí.

Tohle http://pokusy.1-webdesign.cz/lupa/ jsi viděl?
To mám dokonce pro jistotu uložené ve své sbírce.

Ta lupa je dobrá, ale nějak se mi nedaří to nastavit na mém obrázku, který má velikost width="800" height="571".
Když změnim konstanty, tak se to rozhodí úplně. Víte jak na to?

Odpovídám Kokimu:
Jaké konstanty. Mělo by snad stačit změnit rozměry obrázku, tedy: