Inkscape – změna tlačítka při přejetí myší

V dnešním článku Vám chci ukázat některé možnosti tvorby interaktivních dokumentů, které nabízí opensource program Inkscape.

V programu Inkscape můžete vytvořit dokument ve formátu .SVG. Kromě toho, že je SVG vektorový formát, umožňuje také tvorbu animací a vkládání funkcí pro různé události. Přímo v programu najdete jednoduchou možnost jak přidat objektu vlastnost například při najetí myší, nebo třeba při kliknutí. Výsledkem je interaktivní dokument, který reaguje na pokyny uživatele. Velkou výhodou je možnost otevření souborů SVG přímo v prohlížeči internetu, nebo snadné vložení do webové stránky (POZOR! Internet Explorer 8 neumí interaktivní prvky správně zobrazit).

V příkladu uvidíte jak vytvořit jednoduché tlačítko včetně efektu při najetí myší.

1, Vytvořte si nový prázdný dokument v Inkscape.
2, Nakreslete požadovaný objekt. Já jsem použil obdélník se zaoblenými rohy.
3, Klikněte na objekt pravým tlačítkem myši a vyberte možnost Vlastnosti Objektu.
4, Ve spodní části dialogového okna klikněte na tlačítko Interactivity

5, Do řádku Onmouseover nastavte jak chcete aby tlačítko vypadalo při najetí myší.
Například:
this.style.cursor=“pointer“;
Parametr „this“ říká, že budete nastavovat označený objekt, „style“ znamená že měníme vzhled objektu, a „kursor=’pointer‘“ nastaví změnu kurzoru při najetí na objekt.

this.style.fill=“#ff0000″;

Do stejného řádku přidejte ještě změnu výplně (fill). A nastavte barvu, která se objeví jako rollover efekt.

6, Do řádku Onmouseout nastavte this.style.fill a původní barvu objektu (např.: this.style.fill=“#888888″;

Pokud se chcete o tomto tématu dozvědět více přijďte na kurz Inkscape pro pokročilé, nebo nám napište.

Ukázka interaktivní miniaplikace z Inkscapu:

Přidání odkazu

Pokud chcete tlačítku přidat link (odkaz) směřující na nějakou jinou stránku použijte následující nastavení:

Klikněte na objekt pravým tlačítkem myši a zvolte možnost Vytvořit odkaz – v okně napravo do pole Href zadejte požadovanou cílovou adresu. Dokument uložet a v prohlížeči vyzkoušejte.