| Autor | Zpráva | ||
|---|---|---|---|
| Boslie Profil * |
#1 · Zasláno: 12. 3. 2015, 09:02:35 · Upravil/a: Moderátor (editace znemožněna) 12. 3. 2015, 16:54:21
<img class="grayscale" onmouseover="this.className=''" onmouseout="this.className='grayscale'" <img src="LR_logo.jpg" align="middle" height="140" width="140" alt="LR" border= "0"/> Výše uvedený obrázek sice po najetí myší funguje v zešednutí, ale po přidání odkazu už nefunguje. Můžete mi poradit co s tím? Jak tam přidat odkaz? ještě přidávám CSS soubor body {background-color: #F4A460}
a:link, a:visited {text-decoration: none; color: #696969; font-variant: small-caps;}
h1 { font-family: Comic sans MS, sans-serif; color: gold; font-size: 160% }
h2 { font-family: Comic sans MS, sans-serif; color: gold; font-size: 130% }
h3 { font-family: Comic sans MS, sans-serif; color: gold; font-size: 110% }
h4 { font-family: Comic sans MS, sans-serif; color: black; font-size: 100% }
h5 { font-family: Comic sans MS, sans-serif; color: black; font-size: 90% }
p { font-family: Comic sans MS, sans-serif; color: black;font-size: 90% }
a:hover {font-weight: bold; font-variant: small-caps color: Slategray;}
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}Moderátor Chamurappi: Titulek „Obrázek jao odkaz“ nevystihoval podstatu dotazu. Příště zkus prosím vymyslet lepší.
|
||
| MyShare Profil |
#2 · Zasláno: 12. 3. 2015, 09:24:26
Nazdar Boslie
Obalil si <img> do odkazu?
teda <a href="#"><img></a> |
||
| Boslie Profil * |
#3 · Zasláno: 12. 3. 2015, 09:28:54 · Upravil/a: Boslie
Ano balil, to odkaz jako takový fungoval, ale zase se obrázek po najetí myší netransformoval do Greyscale...
A v IE nefunguje ani transformace obrázku |
||
| jefitto44 Profil |
#4 · Zasláno: 12. 3. 2015, 10:14:03
V IE nefunguje nič, obzvlášť ak máš nejakú starú verziu (čiže 9 a nižšie). Prečo to robíš javascriptom, keĎ úplne stačí nastaviť ten CSS filter obrázku a pri hoveri ho zrušiť? Žiadne onmouseout a onmouseover ti tam netreba
|
||
| Boslie Profil * |
#5 · Zasláno: 12. 3. 2015, 10:44:49
zapsal jsem to takto, ale pořád nefunguje ten odkaz
<img class="grayscale" <a href="lr.html" img src="LR_logo.jpg" height="140" width="140" alt="LR" border= "0"/></a> ještě zdroj: body {background-color: #F4A460}
a:link, a:visited {text-decoration: none; color: #696969; font-variant: small-caps;}
h1 { font-family: Comic sans MS, sans-serif; color: gold; font-size: 160% }
h2 { font-family: Comic sans MS, sans-serif; color: gold; font-size: 130% }
h3 { font-family: Comic sans MS, sans-serif; color: gold; font-size: 110% }
h4 { font-family: Comic sans MS, sans-serif; color: black; font-size: 100% }
h5 { font-family: Comic sans MS, sans-serif; color: black; font-size: 90% }
p { font-family: Comic sans MS, sans-serif; color: black;font-size: 90% }
a:hover {font-weight: bold; font-variant: small-caps color: Slategray;}
img.grayscale {
-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
img.grayscale:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
} |
||
| jefitto44 Profil |
#6 · Zasláno: 12. 3. 2015, 10:50:31
No ovšem že nefunguje... musí to byť naopak :DD
<a href="..."><img ...></a> |
||
| lionel messi Profil |
#7 · Zasláno: 12. 3. 2015, 10:53:05
Boslie:
Odporúčam zopakovať si základy HTML ( Možnosti odkazů » Obrázky v odkazech). Kolega jefitto44 má pravdu, ale chýb tam vidím viacero. Správne: <a href="lr.html"><img class="grayscale" src="LR_logo.jpg" height="140" width="140" alt="LR" border= "0"></a> CSS som neskúmal. |
||
| jefitto44 Profil |
#8 · Zasláno: 12. 3. 2015, 10:53:29 · Upravil/a: jefitto44
Aha, teraz som si všimol, že to máš úplne zlé... nemôžeš do tagu <a> napísať ďalší tag <img>... proste musíš ten <img> umiestniť do <a>, inak to nepôjde... Inač takéto veci sa robia bežne, že sa do tagu vkladá iný tag (Vlastne to robíš už pri <html><head>... v každom dokumente)
Toto čo si ty napísal, by chcelo fungovať takto... Otvoríš tag <img a priradíš mu class, to je vpohode. Ďalej nasleduje vovnútri obrázka <a, čo sa prehliadač snaží chápať ako nový atribút (napr. width, height, len ty si použil <a a taky tag neexistuje). Ako ďalší atribut sa berie img a ako ďalší konečne src s adresou. Čiže ten obrázok ti v podstate vykreslí, len nevie pochopiť, čo chceš Ďalej |
||
| Boslie Profil * |
#9 · Zasláno: 12. 3. 2015, 10:56:27
Takto sice funguje odkaz, ale zase nefunguje grayscale
<img class="grayscale"> <a href="lr.html"><img src="LR_logo.jpg" height="140" width="140" alt="LR" border= "0"></a> |
||
| lionel messi Profil |
#10 · Zasláno: 12. 3. 2015, 11:00:36
Boslie:
„ale zase nefunguje grayscale“ Bodaj by trieda fungovala, keď ju nenastavuješ potrebnému elementu. Správne riešenie máš predsa v [#7]. |
||
| Boslie Profil * |
#11 · Zasláno: 12. 3. 2015, 11:05:55
Děkuji za odpovědi, už jsem to pochopil, napřed odkaz a potom to všechno ostatní. V IE 10 grayscale nefunguje, ale s tím se smířím. Ve Firefoxu jde
|
||
| bubák Profil * |
#12 · Zasláno: 12. 3. 2015, 11:32:44
Boslie:
„A v IE nefunguje ani transformace obrázku“ filter: gray; uměl už v IE4, v pradávných dobách, kdy neexistoval ani Firebird, předchůdce Firefoxfu.
Příklady filtrů https://web.archive.org/web/20040401212625/http://www.jakpsatweb.cz/css/css-filtry-priklady.html Původní verze stránky, kde je zmíněn IE4 Boslie: Netuším, k čemu je dobrá opičárna se změnou třídy, když už v první verzi CSS je :hover, který funguje docela spolehlivě.
|
||
| Boslie Profil * |
#13 · Zasláno: 12. 3. 2015, 12:16:35
Potom dělám něco špatně, protože filter: gray v mém IE 10 nefunguje
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
filter: none
} |
||
| jefitto44 Profil |
#14 · Zasláno: 12. 3. 2015, 12:52:41
Ty si môžeš nastaviť odkaz na čo chceš, trebars aj na tabuľku... ale vždy to, čo chceš, aby slúžilo ako odkaz, musí byť ohranené <a href="...">TOTO ČO CHCEŠ TY</a>
V toto čo chceš ty môže byť text, obrazok, divko, tabuľka, proste čo chceš (boli časy, keď v <a> okrem textu alebo obrázka nemohlo byť nič iné, samozrejme, mohlo, len to bolo nevalidne) |
||
| Tomáš123 Profil |
#15 · Zasláno: 12. 3. 2015, 15:33:55
Boslie:
Chceš dosiahnuť priehľadnosť obrázka po nájdení kurzoru? Poprípade prekrytie obrázku vzorom? |
||
| Chamurappi Profil |
Reaguji na Tomáše123:
Chce z obrázku vysát saturaci barev, převést ho na šedivý. (Upravil jsem nadpis dotazu, Boslie příště určitě bude přemýšlet a napíše smysluplný titulek sám.) V Exploreru je požadovaný efekt možný jen do verze 9, novější verze na nátlak prostandardizačních hulákalů osekali podporu vlastnosti filter tak, že už gray neumí.
Reaguji na jefitta44: „V IE nefunguje nič, obzvlášť ak máš nejakú starú verziu (čiže 9 a nižšie).“ Máš to nějak popletené, naopak jen ve verzích 4 až 9 mu zešedivění fungovat bude. Reaguji na Boslieho: Použij dva obrázky. Procedurální řešení u klienta ti nikdy nebude fungovat u všech uživatelů, krom toho zbytečně zatěžuje prohlížeč. „ onmouseout="this.className='grayscale'"“
Moc jsem nepochopil, proč přidáváš/odebíráš třídu grayscale podle najetí myši pomocí JS, když pak na myš reaguješ i v CSS pomocí :hoveru. (Edit: Aha, to už píše Bubák.)
„data:image/svg+xml;utf8,<svg“ Co tam dělá to utf8? To k něčemu je?
„ font-family: Comic sans MS, sans-serif;“
Proč chceš na takovou vesele psanou stránku dávat šedé obrázky? :-) Sice netuším, o čem tvá stránka je, ale jsi si jistý svojí volbou písma? |
||
| Boslie Profil * |
#17 · Zasláno: 12. 3. 2015, 19:49:09
Chamurappi: Třída grayscale je tam ptoto, že na stránce je více obrázků a já nechci, aby mi žešednutí dělaly všechny obrázky. Omáčka kolem Grayscale je vygooglená, ale stejně to nefungovalo. Nad dvěma obrázky jsem už přemýšlel a asi to tak dopadne. Stránky jsou o kosmetice, písmem jsem si jistý.
Pokusím se udělat variantu se dvěma obrázky a nahodím to pro kontrolu. |
||
| BedrichVeverka Profil |
#18 · Zasláno: 12. 3. 2015, 20:22:03
Můžete mi prosím někdo poradit jaké použít filtry na převedení obsahu iframu do odstínů šedi, aby to fungovalo v co nejvíc prohlížečích?
Zkouším tohle a nefunguje mi to v IE11 (a ani v Safari; v Chrome, Opeře a Firefoxu to naopak zafunguje bez problémů): <div style="filter: gray; filter: grayscale(1); webkit-filter: grayscale(100%); -webkit-filter: grayscale(1);"> <iframe> ... </iframe> </div> V diskusi výše jsem našel, že filter: gray funguje pouze v IE4-9. Používám to takto správně? A pokud ano, co všechno tam mám za filtry napsat, aby to zafungovalo pokud možno všude? Díky, B.V. |
||
| Chamurappi Profil |
#19 · Zasláno: 12. 3. 2015, 21:07:18
Reaguji na Boslieho:
„Třída grayscale je tam ptoto, že na stránce je více obrázků a já nechci, aby mi žešednutí dělaly všechny obrázky.“ Mně není jasné, proč ji přidáváš a odebíráš JavaScriptem. Reaguji na BedrichaVeverku: Neptáš se na nic, na co by zde už nebyla odpověď. „Používám to takto správně?“ Ten webkit-filter bez úvodní pomlčky můžeš smazat, k ničemu není.
Nejlepší šance na zešedivění budeš mít s kódem, který už tu několikrát vložil Boslie, ale v Exploreru 10 a 11 stejně nic z toho fungovat nebude. |
||
| Str4wberry Profil |
#20 · Zasláno: 12. 3. 2015, 21:15:44
Tady je zešednutí, které mi funguje ve všech prohlížečích: Černobílý styl obrázku
|
||
| Boslie Profil * |
#21 · Zasláno: 13. 3. 2015, 07:34:48
Chamurappi
"Mně není jasné, proč ji přidáváš a odebíráš JavaScriptem." Jestli je lepší/vhodnější způsob tak sem s ním |
||
| Bubák Profil |
[#7] lionel messi
„Odporúčam zopakovať si základy HTML“ Určitě by si Boslie měl zopakovat základy CSS, ale nějak se k tomu nemá. Boslie, krom stránky, kterou doporučil lionel messi, koukni na: http://jecas.cz/css-selektory#uzivatelske-akce V tabulce jsou sice CSS 3 selektory, ale nejde o tabulku novinek, třebas :hover se objevil už v první verzi CSS, takže jde o vousatý selektor.
|
||
| BedrichVeverka Profil |
#23 · Zasláno: 13. 3. 2015, 11:02:15
Str4wberry:
Díky za link, díky němu vím, že i v IE11 zašednutí může fungovat. Bohužel se mi ten kód, co tam je, nedaří aplikovat na iframe. Problém je v tom, že tomu Tvému kódu moc nerozumím... zkoušel jsem např. toto: <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 493 100" preserveAspectRatio="xMidYMin meet" width="493" height="100">
<defs>
<filter id="pictureFilter">
<feColorMatrix type="matrix" values="0.343 0.669 0.119 0 0 0.249 0.626 0.13 0 0 0.172 0.334 0.111 0 0 0 0 0 1 0" />
<feGaussianBlur stdDeviation="0" />
<feColorMatrix type="saturate" values="0.1" />
<filter />
</filter></filter></defs>
<div xmlns="http://www.w3.org/2000/svg" filter="url("#pictureFilter")" x="0" y="0" width="493" height="100" xmlns:xlink="http://www.w3.org/1999/xlink">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbratranciveverkove&width&layout=button&action=like&show_faces=false&share=true&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>
</div>
</svg>Zkoušel jsem i přepnout IE11 do IE9 tímhle: <meta http-equiv="x-ua-compatible" content="IE=9"> a buď se Explorer nepřepnul anebo mi ten ten filter: gray mi nefunguje v té devítce... Mohl bys mi prosím poradit? Diky, B.V. |
||
| Boslie Profil * |
#24 · Zasláno: 13. 3. 2015, 11:05:47
Jestli tomu dobře rozumim, tak nedělat onmouseover ale udělat to přes třidu
a.menici {background-image: url(prvni.gif)}
a.menici:hover {background-image: url(druhy.gif)} |
||
| Keeehi Profil |
#25 · Zasláno: 13. 3. 2015, 11:29:14
Boslie:
Rozumíš naprosto správně. |
||
| Chamurappi Profil |
#26 · Zasláno: 13. 3. 2015, 11:36:10
Reaguji na Str4wberryho:
„Tady je zešednutí, které mi funguje ve všech prohlížečích: Černobílý styl obrázku“ Vida, na to jsem zapomněl. Akorát v Mozille vidím ten <image> trošku rozmazaný, ani smazání filtru <feGaussianBlur> (který by měl být zbytečný) nepomáhá.
Pak také, když snižuješ saturaci na 0.1 (přes <feColorMatrix type="saturate" />), není výsledek stoprocentně v odstínech šedi, je jen hodně moc našedlý, trochu do žluta (což způsobuje ten první <feColorMatrix>).
Reaguji na BedrichaVeverku: „díky němu vím, že i v IE11 zašednutí může fungovat“ Jen na <image> ze SVG. Žádnou složku HTML tím v Exploreru nepřebarvíš.
„ <div xmlns="http://www.w3.org/2000/svg"“
Pomocí xmlns se přesouváš do úplně jiného značkovacího jazyka. V SVG žádný element <div> neexistuje, tam existuje jen ten <image> (který je jen náhodou podobný <img> z HTML, ale má jiné atributy a celkově je… prostě cizí) a fůra elementů na vektorovou grafiku.
„a buď se Explorer nepřepnul“ Otevři si vývojářské nástroje (F12), tam uvidíš aktuální režim a můžeš si ho i přepínat. Na Yuhůově stránce mi filter: gray v jedenáctce přepnuté na devítku funguje.
Byl bych trošku skeptický k budoucnosti toho, o co se snažíš. Přebarvení rámu se stránkou z cizí domény může být teoreticky bezpečnostní problém a čekal bych, že tomu prohlížeče možná časem zabrání. |
||
| Boslie Profil * |
#27 · Zasláno: 13. 3. 2015, 11:51:29
Keeehi:
> Boslie: > Rozumíš naprosto správně. Ještě dotaz: musí být ty obrázky GIF nebo stačí JPG? |
||
| lionel messi Profil |
#28 · Zasláno: 13. 3. 2015, 11:54:04
Boslie:
„musí být ty obrázky GIF nebo stačí JPG?“ Postačí aj JPG. |
||
| Boslie Profil * |
#29 · Zasláno: 13. 3. 2015, 11:58:02 · Upravil/a: Boslie
Style
a.menici {background-image: url(oriflame_logobw.gif)}
a.menici:hover {background-image: url(oriflame_logo.gif)}<a class="menici" href="oriflame.html"></a> je to takto spravně? Podle mne asi ne, kdyz to nefunguje. Ale to se časem podda... Problém bude asi v tom, že už mám barevné pozadí body {background-color: #F4A460}
a:link, a:visited {text-decoration: none; color: #696969; font-variant: small-caps;}
h1 { font-family: Comic sans MS, sans-serif; color: gold; font-size: 160% }
h2 { font-family: Comic sans MS, sans-serif; color: gold; font-size: 130% }
h3 { font-family: Comic sans MS, sans-serif; color: gold; font-size: 110% }
h4 { font-family: Comic sans MS, sans-serif; color: black; font-size: 100% }
h5 { font-family: Comic sans MS, sans-serif; color: black; font-size: 90% }
p { font-family: Comic sans MS, sans-serif; color: black;font-size: 90% }
a:hover {font-weight: bold; font-variant: small-caps color: Slategray;}
a.menici {background-image: url(oriflame_logobw.gif)}
a.menici:hover {background-image: url(oriflame_logo.gif)} |
||
| Keeehi Profil |
Boslie:
A jak se ta nefunkčnost projevuje? Není to náhodou tím, že ten prázdný odkaz má nulovou velikost a proto se nezobrazuje? |
||
|
Téma pokračuje na další straně.
|
|||
0