NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Pavel Junek
Tvůrce
Avatar
Pavel Junek:29.3.2015 18:39

Zdravím,
mám png obrázek s průhledným pozadím.

<div class="obr-obal">
    <img src="obr.png" class="obr" id="obr"/>
</div>

Existuje nějaký způsob, jak změnit barvu tohoto obrázku (při najetí myši) za použití jQuery?

 
Odpovědět
29.3.2015 18:39
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Pavel Junek
Jan Lupčík:29.3.2015 18:53

Vytvoř si druhý obrázek a po najetí to změň na ten druhý obrázek, ne? :)

Nahoru Odpovědět
29.3.2015 18:53
TruckersMP vývojář
Avatar
Patrik Valkovič
Člen
Avatar
Odpovídá na Pavel Junek
Patrik Valkovič:29.3.2015 19:00

Pokud chceš změnit barvu celého obrázku (a ne jen pozadí), tak nemáš jinou možnost než vytvořit druhý png obrázek a ten použít. JavaScript nemá žádné funkce pro manupulaci s PNG (a vzhledem ke složitosti se ani nedivím). Pokud chceš změnit jen pozadí tak po najetí myši změn background-color.

Nahoru Odpovědět
29.3.2015 19:00
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Avatar
Pavel Junek
Tvůrce
Avatar
Odpovídá na Patrik Valkovič
Pavel Junek:29.3.2015 19:30

Právěže chci změnit jenom ten obrázek (bez pozadí).

A dělat nový ručně se mi moc nechce, protože není jeden, ale je jich víc.

 
Nahoru Odpovědět
29.3.2015 19:30
Avatar
Peas
Člen
Avatar
Odpovídá na Pavel Junek
Peas:30.3.2015 12:45

Cauko. Jedno z rieseni je pouzit -webkit-filtre, ktore ti umoznuju zmenit okrem ineho aj farbu obrazkov s alfa kanalom, pricom pozadie ostane stale priehladne. Patria sem napriklad: saturate; grayscale; contrast; brightness; blur; invert; sepia; huerotate alebo rss.opacity.
Jednoduchy priklad:
https://jsfiddle.net/g4phppf2/

V pripade, ze pozadovane obrazku su ikony, tak vhodnym riesenim je vygenerovat si z nich icon font a farby uz mozes menit podla potreby ako pri fontoch (color: blue;).

 
Nahoru Odpovědět
30.3.2015 12:45
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:30.3.2015 12:59

Nebo strašně jednoduše :hover::after { // zde bude div, který se zobrazí po najetí a je fuk, jestli to bude obrázek nebo jen barva }.

Nahoru Odpovědět
30.3.2015 12:59
Však ono půjde ...
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Pavel Junek
Aleš Lulák:30.3.2015 13:08

Nevím jaké máš přesně účely, ale na složitější manipulace s obrázkem budeš muset sáhnout po canvasu.

Ve finále to není nic težkého, jen si vlastně hraješ s pixely. Například pro odstranění barev bys použil něco jako:

var c = document.getElementById("workspace");
var ctx = c.getContext("2d");

function greyscale() {
        horizontal = picture.width; //picture bude tvuj canvas vlastne
        vertical = picture.height;
        imgData = ctx.getImageData(0, 0, horizontal-1, vertical-1);
        for (var i=0;i<imgData.data.length;i+=4) {
         averge = Math.round((imgData.data[i] + imgData.data[i+1] + imgData.data[i+2]) / 3);
         imgData.data[i] = averge;
         imgData.data[i+1] = averge;
         imgData.data[i+2] = averge;
         //imgData.data[i+3] = 255; toto je jiz alfakanal
        }
        ctx.putImageData(imgData,0,0);
}
Editováno 30.3.2015 13:13
Nahoru Odpovědět
30.3.2015 13:08
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:30.3.2015 13:20

Můžeš se mrknout http://www.itnetwork.cz/…ubliny-efekt tam tím způsobem jsi schopný udělat cokoliv.

 
Nahoru Odpovědět
30.3.2015 13:20
Avatar
Pavel Junek
Tvůrce
Avatar
Pavel Junek:7.4.2015 19:39

Díky moc za odpovědi, vypadá to, že jinak než přes canvas to nepůjde. Bohužel teď nemám moc času, ale hned jak budu mít, tak se a to podívám a označím řešení ;)

 
Nahoru Odpovědět
7.4.2015 19:39
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.