Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
Klikací mapy v GIMPu Tvorba tzv. klikacích (obrázkových) map s pomocí grafického editoru GIMP Dostupné z Metodického portálu ISSN: , financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.
2
Klikací (obrázkové) mapy
Na internetu se často setkáme na www stránkách s obrázky, které slouží jako odkazy (např. tento…). Můžeme se setkat také s obrázky, u kterých kliknutí na různé části obrázku vyvolá různé odkazy. Obrázku, za jehož částmi se skrývají odkazy, říkáme klikací mapa. Takový obrázek můžeme využít pro navigaci po stránkách nebo jako opravdovou mapu, která bude reagovat na kliknutí. Z hlediska použitelnosti a přístupnosti webu jsou již zastaralé, ale někdy se najdou případy, kdy je jejich použití jednodušší než např. technologie flash. Dejte pozor na to, že klikací mapa je sice efektním navigačním prvkem, neumožňuje však definovat alternativní text pro každou aktivní oblast, a proto je nutné každou mapu, která slouží jako navigace po stránkách, doplnit textovou navigační lištou z důvodu zpřístupnění webu pro nevidomé či některé alternativní prohlížeče.
3
Tvorba klikacích mapy V principu jde o rozdělení obrázku na oblasti pomocí souřadnic a o sdělení informace o tomto rozdělení prohlížeči. Lze to samozřejmě udělat ručně pomocí editace HTML kódu, ale je to poměrně zdlouhavé a v případě občasné potřeby i neefektivní. Naštěstí existují programy, které umožňují pohodlné vizuální definování aktivních oblastí. Pokud máme na svém počítači nainstalován grafický editor GIMP, nic nám nebrání využít jeho vestavěnou funkci na vytváření map.
4
GIMP – filtr Obrázková mapa
Pro vytvoření klikací (obrázkové) mapy využijeme zásuvný modul Filtry … WWW … Obrázková mapa.
5
Zde vybereme nástroj pro vytvoření tvaru aktivní oblasti.
Pro vytvoření klikací (obrázkové) mapy využijeme zásuvný modul Filtry … WWW … Obrázková mapa. Zde vybereme nástroj pro vytvoření tvaru aktivní oblasti. Požadované místo obrázku obtáhneme.
6
Zde si vybereme typ odkazu.
Po ukončení definice aktivní oblasti (v případě definice mnohoúhelníku poklepáním) zadáme do dialogového okna veškeré potřebné informace (co se má stát po poklepání na oblast, komentář atd.). Zde si vybereme typ odkazu.
7
Tvar může být kruh, obdélník či mnohoúhelník.
Všechny výběry se zobrazují vpravo v okně Výběr.
8
Poklepáním na výběr lze výběr upravovat a opravovat.
9
V menu Pohled … Zdroj si můžeme zobrazit zdrojový kód, který umístíme do stránek.
Obrázek mapy Parametry výběru
10
V menu Pohled … Zdroj si můžeme zobrazit zdrojový kód, který umístíme do stránek.
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE>mapa</TITLE> </HEAD> <BODY> <CENTER><img src="cz.jpg" width="1000" height="609" border="0" usemap="#map" /></CENTER> <map name="map"> <area shape="poly" coords="686,226,699,214,704,222,704,209,698,200,689,184,690,176,707,183,725,188,743,203,752,213,754,208,756,222,749,226,732,239,731,255,722,267,727,277,722,288,728,296,732,309,750,309,776,318,799,334,819,356,808,374,758,390,746,398,743,411,725,414,713,395,695,370,687,373,692,383,689,393,678,388,677,366,680,327,683,325,670,298,665,268,677,261,684,227,689,228" alt="Olomoucký kraj - sídlo Gymnázia Šternberk" href="gymnazium.htm" /> <area shape="circle" coords="525,212,100" alt="WWW stránky Gymnázia Šternberk" href=" /> </map> </BODY> </HTML> Tento zdrojový kód můžeme upravit, např. vymazat některé informativní údaje, které vložil sám GIMP.
11
Na závěr soubor uložíme, můžeme pak kdykoli mapu změnit.
12
Úkol: Vyzkoušejte si tvorbu klikací mapy
Úkol: Vyzkoušejte si tvorbu klikací mapy. Vhodné obrázky map najdete např. na níže uvedené adrese Wikipedie. Použitý příklad si můžete stáhnout ve formátu Klikaci_mapy_v_GIMPu.zip. Použitá literatura: VYBÍRAL, J. GIMP: Praktická uživatelská příručka. 2. aktualiz. vyd. Brno : Computer Press, s., CD. ISBN Použitá fotografie: autor materiálu. Použitá mapa: Dostupná pod licencí GNU Free Documentation License na WWW: < LOGO Wilbera dostupné pod licencí Public domain na WWW: <
Podobné prezentace
![Hypertextové odkazy [cit. 2009-27-11]. Dostupné pod licencí Public Domain – na](/12/3769023/big_thumb.jpg "Hypertextové odkazy [cit. 2009-27-11]. Dostupné pod licencí Public Domain – na>")