Ovladat JS obrazek ve formatu SVG

7. 9. 2013 23:00:28

Dobrý den, mám obrázek ve formátu SVG, který jsem nakreslil v Inskcape. Mým výstup XML. Tento obrázek je rozdělen na dvě poloviny.

Potřeboval bych docílit toho, že při kliknutí na levou stranu (obdelnik s id=levy_obdelnik) se pravá strana deaktivuje=pruhlednost se nastavi na nízkou hodnotu (id=pravy_obdelnik). A zpět pokud kliknu na pravy obdeník (id=pravy_obdelnik), aby se leva strana deaktivovala (překryla). Níže uvádím xml kód.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

Myslím si, že by se to dalo řešit přes Javascript. Byl by někdo tak hodný a ukázal mi základní kostru, jak by se problém dal řešit? Děkuji

7. 9. 2013 23:00:28

https://webtrh.cz/diskuse/ovladat-js-obrazek-ve-formatu-svg#reply942327

Jan Stejskal

(7 hodnocení)

7. 9. 2013 23:31:36

Možností je několik. Například obrázek rozdělte na dva, pak lze snadno pomocí js+css nastavit průhlednost dané "poloviny". Nebo obrázek, resp. svg generujte dynamicky, tedy průhlednost se bude měnit přímo v svg/xml.

7. 9. 2013 23:31:36

https://webtrh.cz/diskuse/ovladat-js-obrazek-ve-formatu-svg#reply942326

Ondřej Váško

7. 9. 2013 23:48:14

U změny průhlednosti přímo v kódu jsem narazil na ten problém, že na příkaz onclick lze provést jen jednu akci, např. změna průhlednosti ze 100% na 0%. Jakmile kliknu na pole A (průhlednost ze 100% na 0%), potřebuji automaticky u B udělat průhlednost z 0% na 100%. To se mi nepovedlo nastavit. Nebo se mýlím s tímto problémem?

7. 9. 2013 23:48:14

https://webtrh.cz/diskuse/ovladat-js-obrazek-ve-formatu-svg#reply942325

Jan Stejskal

(7 hodnocení)

7. 9. 2013 23:53:48

Napsal ondra15;995714
U změny průhlednosti přímo v kódu jsem narazil na ten problém, že na příkaz onclick lze provést jen jednu akci, např. změna průhlednosti ze 100% na 0%. Jakmile kliknu na pole A (průhlednost ze 100% na 0%), potřebuji automaticky u B udělat průhlednost z 0% na 100%. To se mi nepovedlo nastavit. Nebo se mýlím s tímto problémem?

V události "onclick" volejte uživatelskou funkci a v té funkci můžete měnit průhlednost dle libosti.

7. 9. 2013 23:53:48

https://webtrh.cz/diskuse/ovladat-js-obrazek-ve-formatu-svg#reply942324

Ondřej Váško

7. 9. 2013 23:57:39

Napsal Jan Stejskal;995715
V události "onclick" volejte uživatelskou funkci a v té funkci můžete měnit průhlednost dle libosti.

Můžete mi ukázat příklad této funkce. A kam nacpat funkci mezi značky , je-li to nutné. Jsem nějaký zpomalený..

---------- Příspěvek doplněn 08.09.2013 v 13:09 ----------

Pokusil jsem se vložit funkci do zdrojového kódu xml.

Javascript na přepínání průhledností levého a pravého obdelníka jsem napsal následovně:

a ve zdrojáku obrázku tyto funkce volám následovně:

Počáteční stav je: levý odbelník zašedlý, pravý aktivní. Kliknu-li na pravý obdelník, tak levý zůstane zašedlý (pravý je aktivní, je to v pořádku). Chyba je taková, že kliknu-li na levý obdelník, tak se aktivuje, ale pravý nezašedne. Myslím si, že volám fci Zmen(), kde je u pravého obdelníku průhlednost 90% (téměř zašedlý).

Byl by někdo tak hodný a poradil? Díky

7. 9. 2013 23:57:39

https://webtrh.cz/diskuse/ovladat-js-obrazek-ve-formatu-svg#reply942323

Pro odpověď se přihlašte.

Přihlásit