Mapa obrazu to obraz z „zmapowanymi” na niego adresami URL. Możesz ubrać swoją witrynę lub osobistą stronę startową za pomocą mapy obrazu z ulubionymi witrynami, które lubisz odwiedzać. Istnieje wiele programów, które możesz to zrobić, ale ten artykuł będzie używał Gimpa.
Kroki
Krok 1. Przygotuj wstępną grafikę, którą będziesz mapować
Możesz używać zdjęć, obrazów, cokolwiek działa dla Ciebie. Tutaj użyjemy wikiHow, wikiHow forum oraz iGoogle.
Krok 2. Po utworzeniu obrazu (lub otwarciu go), przejdź do Filtry >> Sieć >> ImageMap
Okno dialogowe Gimp ImageMap
Krok 3. Kliknij prostokąt po prawej stronie ekranu, a następnie wybierz jeden z obrazów, których chcesz użyć
Na tym zrzucie ekranu wybrano wikiHow. Podaj niezbędne informacje w wyświetlonym oknie dialogowym.
Kliknij prostokąt, a zobaczysz dokładną lokalizację grafiki
Krok 4. Kontynuuj ten proces dla reszty mapy
Krok 5. Po zakończeniu definiowania wszystkich obszarów łączy zapisz mapę obrazu
GIMP automatycznie zaproponuje zapisanie tego jako pliku z rozszerzeniem.map. Jeśli chcesz, możesz to zapisać. Ale ten plik zawiera kod HTML (bez obrazów), który musimy edytować i skopiować na naszą własną stronę internetową, dlatego zaleca się zapisanie go jako [nazwa pliku].html i przejście bezpośrednio do kroku 7.
Krok 6. JEŚLI nie zapisałeś go jako plik HTML, znajdź zapisany plik i zmień nazwę rozszerzenia na.html
Możesz otrzymać ostrzeżenie o zmianie rozszerzeń plików. Kliknij tak, aby kontynuować.
Krok 7. Użyj edytora tekstu, aby otworzyć ten plik HTML
Zauważysz, że ten plik zawiera po prostu listę współrzędnych i adresów URL. Jest to kod, który informuje przeglądarkę, które adresy URL przypisać do której części obrazu.
Krok 8. Upewnij się, że ścieżka pliku zdefiniowana w
linki do obrazu, na który chcesz zmapować adresy URL.
Niewłaściwe skierowanie go na obraz może spowodować, że w ogóle nie będzie wyświetlany obraz.
Krok 9. OPCJONALNIE:
Użyj przeglądarki, aby otworzyć plik HTML; jeśli wszystko działa, powinieneś zobaczyć obraz ze wszystkimi adresami URL zmapowanymi na niego zgodnie ze zdefiniowanymi obszarami.
Krok 10. Dodaj mapę obrazu do kodu HTML swojej strony internetowej
Będziesz musiał skopiować WSZYSTKIE wiersze kodu, które widzisz, w tym
tag (który definiuje ścieżkę do obrazu źródłowego) i wszystko między tagami. Otóż to! Jesteś skończony.
