HTML
Mapy obrazów
Szukaj…
Składnia
-
<img usemap="#[map-name]"> -
<map name="[map-name]"></map> -
<area>
Parametry
| Tag / Atrybut | Wartość |
|---|---|
<img> | Poniżej znajdują się atrybuty specyficzne dla mapy obrazu do użycia z <img> . Obowiązują zwykłe atrybuty <img> . |
usemap | name mapy z dodanym do niej symbolem skrótu. Na przykład dla mapy o name="map" obraz powinien mieć usemap="#map" . |
<map> | |
name | Nazwa mapy, aby ją zidentyfikować. Do użycia z atrybutem usemap obrazu. |
<area> | Poniżej znajdują się atrybuty <area> . Kiedy href jest określone, dzięki czemu <area> link, <area> obsługuje również wszystkie atrybuty tagu kotwicy ( <a> ) z wyjątkiem ping . Zobacz je w dokumentach MDN . |
alt | Tekst alternatywny wyświetlany, jeśli obrazy nie są obsługiwane. Jest to konieczne tylko wtedy, gdy href jest również ustawiony w <area> . |
coords | Współrzędne wyznaczające obszar do wyboru. Gdy shape="polygon" , należy ustawić na listę par „x, y” oddzielonych przecinkami (tj. shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." ). Gdy shape="rectangle" , należy ustawić na left, top, right, bottom . Gdy shape="circle" , należy ustawić na centerX, centerY, radius . |
href | Adres URL hiperłącza, jeśli jest określony. Jeśli zostanie pominięty, <area> nie będzie reprezentować hiperłącza. |
shape | Kształt <area> . Można ustawić default aby zaznaczyć cały obraz (brak coords przypisują to konieczne), circle lub circ dla okręgu, rectangle lub rect do prostokąta i polygon lub poly o wielobocznym obszarze określonym przez punkty narożne. |
Uwagi
Powyższa lista parametrów jest modyfikowana z dokumentów MDN:
<map>i<area>.Możliwe jest utworzenie współrzędnych mapy obrazu za pomocą dla obrazu o prostszych kształtach (np. We wstępnym przykładzie powyżej) za pomocą edytora obrazów, który pokazuje współrzędne (takie jak GIMP). Jednak generalnie łatwiejsze może być użycie generatora mapy obrazu, takiego jak ten .
Wprowadzenie do map obrazów
Opis
Mapy obrazu to obraz z klikalnymi obszarami, które zwykle działają jak hiperłącza.
Obraz jest zdefiniowany przez <img> , a mapa jest zdefiniowana przez znacznik <map> ze znacznikami <area> , aby oznaczyć każdy klikalny obszar. Użyj usemap i name aby powiązać obraz i mapę.
Podstawowy przykład
Aby utworzyć mapę obrazu, aby każdy z kształtów na obrazku poniżej był klikalny:
Kod wyglądałby następująco:
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords="79,6,5,134,153,134">
<area shape="rectangle" coords="177,6,306,134">
<area shape="circle" coords="397,71,65">
</map>
Powinieneś zobaczyć, że przeglądarka rozpoznaje obszary, kiedy kursor staje się wskaźnikiem. Zobacz prezentację na żywo w JSFiddle lub zobacz demonstrację poniżej:
