Jak vytvořit mapu obrázků pomocí aplikace Photoshop

Krok 1

Otevřete obrázek, který použijete pro vytvoření mapy obrázků ve Photoshopu. Obraz by již měl být optimalizován pro internet.

Krok 2

Přístup ke komponentě Image Ready ve Photoshopu stisknutím klávesy "Shift-Ctrl-M" nebo klepnutím na tlačítko "Edit in Image Ready" v dolní části panelu nástrojů.

Krok 3

Stiskněte tlačítko "P" nebo vyberte ikonu nástroje "Image Map" v standardní sadě nástrojů pro přístup k nástroji "Image Map". Udržujte nástroj "Image Map" stisknutý a uvidíte obdélníkový, kruhový nebo mnohoúhelníkový tvar. Vyberte tvar, který nejlépe vyhovuje oblasti obrázku, kterou chcete použít jako aktivní bod.

Krok 4

Pomocí myši klikněte na obrázek a zvýrazněte oblast aktivního bodu klepnutím a přetažením myši. Po uvolnění tlačítka myši vytvoří Image Ready nový aktivní bod na obrázku.

Krok 5

Kliknutím na rozbalovací nabídku "Okno" a výběrem možnosti "Mapa obrázku" otevřete pole možností obrázku. Použijte volbu "Name" k označení aktivního bodu. Pomocí rozbalovací nabídky Adresy URL zvýrazněte místní stránku nebo zadejte adresu externí webové stránky pro přístup k tomuto aktivnímu bodu. Použijte rozbalovací nabídku "Cíl", abyste zvýraznili, jak se má otevřít externí odkaz. Oblast "Alt" bude obsahovat text, který se zobrazí, když je kurzor myši umístěn v tomto aktivním bodě.

Krok 6

Pomocí možností "Rozměry" můžete jemně naladit polohu a velikost aktivního bodu. X a Y označují přesné umístění vašeho aktivního bodu pomocí vertikálních a horizontálních pixelů. W a H umožňují definovat velikost vašeho aktivního bodu pomocí počtu pixelů.

Krok 7

Opakujte kroky 4, 5 a 6 pro každý aktivní bod, který chcete vytvořit.

Krok 8

Stiskněte tlačítko "Ctrl-Shift-Alt-S" nebo vyberte rozbalovací nabídku "Soubor" a zvolte "Uložit optimalizované jako". Zadejte název souboru a ujistěte se, že v části "Uložit jako typ" se zobrazí "HTML a obrázky". Klikněte na "Uložit" pro dokončení procesu ukládání souborů. Tím vytvoříte soubor HTML a přidruženou složku pro obrázky.

Krok 9

Klikněte na nově vytvořený soubor HTML a otestujte provoz nové mapy obrázků.