« 1 2 »
Autor Zpráva
Boslie
Profil *
<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
Nazdar Boslie

Obalil si <img> do odkazu?
teda
<a href="#"><img></a>
Boslie
Profil *
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
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 *
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
No ovšem že nefunguje... musí to byť naopak :DD

<a href="..."><img ...></a>
lionel messi
Profil
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
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 *
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
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 *
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 *
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 *
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
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
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 *
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
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
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
Tady je zešednutí, které mi funguje ve všech prohlížečích: Černobílý styl obrázku
Boslie
Profil *
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
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(&quot;#pictureFilter&quot;)" 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&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>
</div>
</svg>
... ale bezvýsledně (nepřevede se to do odstínů šedi). Zkoušel jsem třeba i před to href nebo src napsat xlink: ale to pak pro změnu nezobrazí vůbec nic.

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 *
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
Boslie:
Rozumíš naprosto správně.
Chamurappi
Profil
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 *
Keeehi:
Boslie:
Rozumíš naprosto správně.
Ještě dotaz: musí být ty obrázky GIF nebo stačí JPG?
lionel messi
Profil
Boslie:
musí být ty obrázky GIF nebo stačí JPG?
Postačí aj JPG.
Boslie
Profil *
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?
« 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: