Ako vytvoriť obrázkovú mapu pomocou Gimpu?

Pridajte svoju obrázkovú mapu do HTML svojej webovej stránky
Pridajte svoju obrázkovú mapu do HTML svojej webovej stránky. Budete musieť skopírovať VŠETKY riadky kódu, ktoré vidíte, vrátane značky (ktorá definuje cestu k zdrojovému obrázku) a všetko medzi značkami.

Obrázková mapa je obrázok, na ktorom sú „namapované“ adresy URL. Svoju webovú stránku alebo osobnú úvodnú stránku môžete ozdobiť obrázkovou mapou s vašimi obľúbenými webmi, ktoré radi navštevujete. Existuje veľa softvéru, ktorý môžete vykonať, ale tento článok bude používať Gimp.

Kroky

  1. 1
    Zostavte počiatočnú grafiku, ktorú budete mapovať. Môžete použiť obrázky, obrázky, čokoľvek, čo vám vyhovuje. Tu použijeme sprievodcu, fórum sprievodcov a iGoogle.
  2. 2
    Po vytvorení obrázku (alebo jeho otvorení) prejdite na filtre >> web >> imagemap.
    • Dialógové okno Gimp ImageMap.
  3. 3
    Kliknite na obdĺžnik v pravej časti obrazovky a potom vyberte jeden z obrázkov, ktoré chcete použiť. Na tejto snímke obrazovky je vybraný sprievodca. V dialógovom okne, ktoré sa zobrazí, vyplňte potrebné informácie.
    • Kliknutím na obdĺžnik zobrazíte presnú polohu grafiky.
  4. 4
    Pokračujte v tomto procese pre zvyšok mapy.
  5. 5
    Keď ste definovali všetky oblasti odkazov, uložte svoju obrázkovú mapu. GIMP automaticky ponúkne uloženie tohto súboru ako súboru s príponou. rozšírenie mapy. Ak si to želáte, môžete to takto uložiť. Tento súbor však obsahuje HTML kód (žiadne obrázky), ktorý musíme upraviť a skopírovať na vlastnú webovú stránku, preto vám odporúčame uložiť ho ako [názov súboru].html a prejsť priamo na krok 7.
  6. 6
    AK ste ho neuložili ako súbor HTML, nájdite ho a premenujte príponu na.html. Môže sa zobraziť upozornenie na zmenu prípon súborov. Pokračujte kliknutím na tlačidlo áno.
    Na ktorom sú „namapované“ adresy URL
    Obrázková mapa je obrázok, na ktorom sú „namapované“ adresy URL.
  7. 7
    Na otvorenie tohto súboru HTML použite textový editor. Všimnite si, že tento súbor jednoducho obsahuje zoznam súradníc a adries URL. Toto je kód, ktorý informuje prehliadač o tom, ktoré adresy URL má priradiť ku ktorej časti obrázku.
  8. 8
    Zaistite, aby cesta k súboru definovaná v <img src> odkazovala na obrázok, na ktorý chcete mapovať adresy URL. Nesprávne nasmerovanie na obrázok môže viesť k tomu, že sa nezobrazí žiadny obrázok.
  9. 9
    VOLITELNÉ: Na otvorenie súboru HTML použite prehliadač; ak všetko funguje, mali by ste vidieť obrázok so všetkými namapovanými adresami URL podľa oblastí, ktoré ste definovali.
  10. 10
    Pridajte svoju obrázkovú mapu do HTML svojej webovej stránky. Budete musieť skopírovať VŠETKY riadky kódu, ktoré vidíte, vrátane značky <img> (ktorá definuje cestu k zdrojovému obrázku) a všetko medzi značkami <map>. To je všetko! Skončil si.

Varovania

  • Obrázkové mapy môžu pri nesprávnej alebo nepotrebnej implementácii spôsobovať určité problémy s prístupnosťou. Vyhnite sa ich používaniu na účely štýlu, ktoré je možné dosiahnuť efektívnejšie pomocou CSS.

Veci, ktoré budete potrebovať

FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail