Vytváření obrazových odkazů a obrazových map

• Smět 2, 2024

Odpověď na tento týden je odpovědí na otázku čtenáře - „Můžete vysvětlit, jak vytvořit odkaz na obrázek na stránku v HTML“. Pro propojené obrázky můžete použít několik různých technik. Jedním je propojení celého obrázku s HTML a druhým je vytvoření obrazové mapy - kde jsou různé části stejného obrázku spojeny s různými místy.

Propojený obrázek v HTML

Propojení malého obrázku nebo ikony je velmi jednoduché. Vše, co musíte udělat, je umístit odkaz na obrázek do hypertextového odkazu takto:



Všechno, co jsem zde udělal, bylo vložit obrázek do html pro odkaz. Toto je nejjednodušší a nejúčinnější způsob, jak propojit malý obrázek, a často se to provádí pomocí vlastních odrážek, ikon atd. Co ale když chcete, aby jeden velký obrázek odkazoval na několik různých míst? Zde se hodí krájení obrázků.

Krájení obrázků ve Photoshopu

To je ve Photoshopu velmi snadné. Měli byste použít obrázek, který není příliš komplikovaný, protože chcete, aby vaši uživatelé mohli jasně vidět, kam na obrázek kliknou. Chcete také zajistit, aby vaši uživatelé pochopili, že musí kliknout na obrázek, aby se dostali tam, kam jdou. Opatrně vyvíjejte obrazové mapy s ohledem na uživatele. Mějte na paměti, že obrazové mapy nejsou obvykle tak přátelské pro vyhledávače jako text na stránce, s tím však může pomoci správné použití značek alt v obrazových řezech.

Jakmile je váš obrázek vytvořen, dalším krokem je „rozřezat“ obrázek. Ikona nástroje řezu vypadá jako malý přesný nůž. Je v horní části panelu nástrojů a je umístěn pod nástrojem oříznutí - pokud kliknete na ikonu „Oříznutí“, zobrazí se nástroje pro výběr řezů a řezů.

Vyberte nástroj řezu, podržte levé tlačítko myši a opatrně přetáhněte řez na požadované místo a poté jej uvolněte. Přesuňte se a pokračujte v krájení celého obrázku. Okolo každé oblasti obrázku, kterou chcete propojit s jinou stránkou, by měl být výřez. Každá velká bílá oblast může být jedním plátkem.

Poté, co je váš obrázek plně nakrájen na plátky, dalším krokem je použití nástroje „slice select“, klikněte na jednotlivé řezy a odtud vyberte typ řezu „image“. Pod tímto vyplňte adresu URL místa, kam chcete tento řez nasměrovat, a poté pole alt alt dole. Ostatní pole nejsou nezbytná pro jednoduché mapování obrázků. Stejným způsobem se pohybujte každým řezem, dokud nebude celý obraz mapován ven.

Jakmile je celý váš obrázek kompletní, použijete možnost „uložit na web a zařízení“. Pokud kliknete na „Soubor“ nahoře a podíváte se dolů pod typické možnosti uložení, zobrazí se možnost uložit na web a zařízení. Vyberte tuto možnost a otevře se dialogové okno, kde si můžete prohlédnout, jak bude váš obrázek vypadat. Pokud jste s tím spokojeni, stiskněte tlačítko Uložit a otevře se další dialogové okno. Ujistěte se, že druhá možnost říká „uložit obrázky a HTML“, a poté práci uložte.

Přejděte do složky, kde jste uložili dokument HTML, a otevřete jej. Tento kód můžete zkopírovat a vložit do svého vlastního souboru HTML. Obvykle bude tento HTML trochu nedbalý. Pokud ovládáte HTML, můžete si jej vyčistit podle svých představ, ale mělo by to fungovat tak dobře, jak je. Ujistěte se, že jako vždy jsou vaše obrazové soubory atd. Na správném místě, jinak se váš obrázek nezobrazí.

Video Návody: 2017 Personality 04/05: Heroic and Shamanic Initiations (Smět 2024).