Jak utworzyć mapę obrazu HTML?

Gdy link jest dodawany do obrazu w języku znaczników hipertext (HTML), link ten jest dodawany do całego obrazu. Może to stanowić problem, jeśli programista chce zrobić pojedynczy obraz z kilkoma obszarami lub przyciskami, a każdy obszar jest używany do innego linku. Mapa obrazu HTML umożliwia programistowi określenie niektórych obszarów, w których link się przejdzie, umożliwiając mu osadzenie kilku linków do jednego obrazu. Odbywa się to poprzez określenie kształtu linku i informowanie HTML, jakie współrzędne mają być używane dla linku.

Obrazy używane w Internecie są mierzone w pikselach. Wiedza, ile pikseli jest na obrazie, jest pierwszym niezbędnym krokiem do stworzenia mapy obrazu. Na przykład stosuje się prostokątny obraz o wysokości 400 pikseli i szerokość 250 pikseli. Następnie programista musi wiedzieć, jak dokładnie zmierzyć kształt we współrzędnych, aby mapa obrazu HTML działała poprawnie.

tPo lewym górnym rogu nazywa się 0,0 podczas używania mapy obrazu HTML. W tym przypadku prawy dolny róg wyniósłby 250 400. Pomiary są wykonywane najpierw z szerokością, a następnie wysokością. Łatwym sposobem na myślenie jest to, że pierwszym pomiarem mówi HTML, jak daleko w prawo, aby przejść od lewej krawędzi, a drugie to, jak powiedzieć, ile pikseli w dół. Jeśli programista chce, aby punkt na mapie wynosił 10 pikseli od lewej krawędzi i 50 pikseli w dół, współrzędne wyniesie 10,50.

Istnieją trzy różne kształty, które programista może wywołać mapę obrazu HTML: Rect, Circle and Polygon. „Rect” oznacza prostokąt, a programista musi najpierw wpisać współrzędne dla lewego górnego rogu, a następnie w prawym dolnym rogu. Okrąg jest określany przez wpisanie współrzędnych, w których zaczyna się okrąg, a następnie promień koła. Wielokąt jest tworzony przez wpisanie we wszystkich pięciu współrzędnych, od góry do prawej.

kodowanie map obrazu HTML jest takie:

Każda mapa obrazu HTML musi mieć nazwę, a sekcja „url.html” to link, w którym ta sekcja mapy obrazu poprowadzi użytkownika, gdy kliknie go. Gdy obraz jest umieszczony na stronie internetowej za pomocą HTML, programista musi napisać: usemap = „test”. To pokaże obraz, jakiej mapy obrazu HTML należy użyć.