« 1 2 »
Autor Zpráva
leopik
Profil
jak mam spravit to ze ak pridete na stranku tak je napr. obr1.png a ked nanho pridete misou tak sa zmeni na obr2.png a ked znova idete prec z mysou tak sa zmeni na obr1.png???
habendorf
Profil
http://stuff.1-webdesign.cz/text-indent.html

Třeba.
vmgjcjk
Profil *
lepsi verze http://wellstyled.com/css-nopreload-rollovers.html
habendorf
Profil
vmgjcjk

Neplete se ti krapet img a background?
Bubák
Profil
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.
leopik
Profil
ale ja myslim nieco klasicke viem ze sa to da. Prosim poradte mi
habendorf
Profil
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?
Str4wberry
Profil
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).
habendorf
Profil
Str4wberry

Jakou? Řešení z JPW je závislé na JS.
habendorf
Profil
... a navíc musíš řešit preload.
Str4wberry
Profil
Odpovídám habendorfovi:
„Jakou (drobnou nevýhodu)?“
Vidím ji v zobrazení stránky bez stylů.
Bubák
Profil
Tohle http://pokusy.1-webdesign.cz/lupa/ jsi viděl?
To mám dokonce pro jistotu uložené ve své sbírce.
habendorf
Profil
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.
Bubák
Profil
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/
habendorf
Profil
Bubák

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

Co třeba a:hover img {visibility:hidden;} ?
Bubák
Profil
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.
Str4wberry
Profil
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.
Bubák
Profil
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.
habendorf
Profil
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)
Bubák
Profil
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.
habendorf
Profil
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;
}
habendorf
Profil
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".
habendorf
Profil
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.
Bubák
Profil
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?
habendorf
Profil
RMB prosím, co to je?

To je Str4wberryho výraz. Dešifroval jsem to jako right mouse button.
Str4wberry
Profil
Odpovídám Bubákovi:
„RMB prosím, co to je?“
Right Mouse Button — pravé tlačítko myši.
habendorf
Profil
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.
Bubák
Profil
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í.
Koki
Profil *

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?
Str4wberry
Profil
Odpovídám Kokimu:
Jaké konstanty. Mělo by snad stačit změnit rozměry obrázku, tedy:
<img src="ah02.jpg" width="406" height="259" id="small" />
<img src="ah02.jpg" width="812" height="518" id="big" />
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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