|
Obrázková mapa Od časů, kdy HaTMatiLka byla pouze textová, uplynulo hodně paketů. Prvním grafickým prohlížečem byl Mosaic, později se objevil Netscape, Internet Explorer a řada dalších. Stránky zkrásněly o obrázky, všelijaká tlačítka, šipky a podobné efekty. Brzy se objevila potřeba udělat jeden obrázek, jehož části by odkazovaly na různé dokumenty. Cesta byla jednoduchá: obrázek, citlivý na myší ukazovátko, odeslal na server pozici myši a ten rozhodl, co bude posláno zpět. Mělo to jednu vadu — bylo to nepohodlné. Proto vznikla pohodlnější cesta, jménem „klientské mapy” (client side image maps). Princip je stejný, jako v předcházejícím odstavci, jen práci serveru nahradil sám prohlížeč. Tvorba takovéto mapy má dvě části. Tou první je rozdělení obrázku na části a popis těchto oblastí v definici mapy. Druhou je vlastní vložení obrázku. Definice mapy odkazů
Nejjednodušším příkladem je dělené tlačítko:
Jeho velikost je 64×24 bodů. Požadavkem je, aby ukazovalo na lekce 7, 8 a 9 tohoto kursu. Jak vidno, je rozdělené na tři části. První je obdélník [0,0]-[20,23], druhou obdélník [21,0]-[42,23] a třetí pak má rohy [43,0]-[63,24]. Pro zjednodušení pomíjím, že část je kulatá. Definice citlivého prostoru bude vypadat:
Jak vidíte, celá definice se skládá z tagů a neobsahuje žádný text. To proto, aby se zachovala kompatibilita se starými prohlížeči. Je ohraničena tagem <map>, jehož parametrem je jméno definované oblasti. To umožňuje definovat v jednom dokumentu více map s různými jmény.
Následují definice oblastí. Přestože teoreticky je možné definovat oblasti několika typů, většina browserů podporuje zatím jen Pokud se někde souřadnice překrývají, platí vždy ta oblast, která je uvedená jako první!
Parametr
Samotné definice obrázku se jeho „zmapování” příliš nedotkne. Jediné, co přibyde, je parametr
Pokud se někomu zdá, že jde vlastně o lokální odkaz, tak se mu to nezdá — ono to tak skutečně je. Vyplývá z toho jediné: klidně můžete definovat mapy v jiném souboru a ze všech ostatních se na ně odkazovat jako na
Naše tlačítko bude vypadat: ![]() Dodávám, že jest záhodno zadávat rozměry obrázku. Mělo by se pro něj rezervovat místo na obrazovce a mapa by měla fungovat, i když se nezobrazí. Na závěr této lekce ukázka trošku složitější mapy. Samo slovo „mapa” přímo svádí k takovému příkladu.
|
Obsah Lekce 1 Lekce 2 Lekce 3 Lekce 4 Lekce 5 Lekce 6 Lekce 7 mapy definice obrázek úkol Lekce 9 Lekce 10 Lekce 11 Lekce 12 |
|