Area: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
| (En mellanliggande sidversion av samma användare visas inte) | |||
| Rad 27: | Rad 27: | ||
=== <code>target</code> === | === <code>target</code> === | ||
Anger vilken [[browsing context]] länken ska adressera, kan t.ex. vara en tabb, ett fönster eller en namngiven <code>[[iframe]]</code>. Följande värden har speciellt betydelse: | Anger vilken [[browsing context]] länken ska adressera, kan t.ex. vara en tabb, ett fönster eller en namngiven <code>[[iframe]]</code>. Följande värden har speciellt betydelse: | ||
* <code>_self</code> - Laddar resursen i samma [[browsing context]] som nuvarande sida. Detta är default-värdet som används om man inte anger detta | * <code>_self</code> - Laddar resursen i samma [[browsing context]] som nuvarande sida. Detta är default-värdet som används om man inte anger detta attribut. | ||
* <code>_blank</code> - Ladda in resursen i ett icke-namngivet [[browsing context]]. | * <code>_blank</code> - Ladda in resursen i ett icke-namngivet [[browsing context]]. | ||
* <code>_parent</code> - Ladda in resursen i eventuellt överliggande [[browsing context]]. Om inget sådant finns, gör den samma sak som <code>_self</code>. | * <code>_parent</code> - Ladda in resursen i eventuellt överliggande [[browsing context]]. Om inget sådant finns, gör den samma sak som <code>_self</code>. | ||
* <code>_top</code> - Ladda in resursen i det högsta överliggande [[browser context]]. Om inget sådant finns, gör den samma sak som <code>_self</code>. | * <code>_top</code> - Ladda in resursen i det högsta överliggande [[browser context]]. Om inget sådant finns, gör den samma sak som <code>_self</code>. | ||
=== <code>type</code> === | === <code>type</code> === | ||
Anger vilken media typ den länkad resurs har. Detta anges som en [[MIME-typ]]. Detta är inte bindande, så resursen kan egentligen vara vilken typ som helst. | Anger vilken media typ den länkad resurs har. Detta anges som en [[MIME-typ]]. Detta är inte bindande, så resursen kan egentligen vara vilken typ som helst. | ||
== Exempel == | == Exempel == | ||
<codepen pen="yNjJBO" tab="html" height="200"> | <codepen pen="yNjJBO" tab="html,result" height="200"> | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<map> | <map> | ||
Nuvarande version från 12 januari 2019 kl. 21.53
Används för att definiera klickbara regioner i en bild. Man kan även associera en länk till denna region. Kan enbart användas inuti en map-tagg.
Tillgänliga attribut
De globala attributen är tillgängliga för denna tagg.
alt
Anger en textsträng som visas istället för regionen för de webbläsare som inte kan hantera bilder. Om man anger href-attributet måste man även ange detta attribut.
coords
En samling värden som anger koordinaterna för den klickbara regionen. Vilka koordinater som anges beror på vad man satt i shape-attributet. Alla koordinater anges i CSS-pixlar.
Om formen är satt till rect, anger koordinaterna två x-, y-koordinater; vänsterkanten, toppen och högerkanten, botten.
Om formen är satt till circle, anger koordinaterna en x-, y-koordinat och en radie. X-/y-koordinaten anger mittpunkten på cirkeln.
Om formen är satt till poly, anger koordinaterna x-, y-koordinaterna för varje punkt i polygonen.
download
Om attributet är satt, indikerar det att den länkade resursen ska laddas ner som en fil, snarare än att visas.
href
Anger vilken resurs-URL som regionen ska peka på. I HTML5 kan man utelämna detta attribut, t.ex. om man vill använda det för skripting.
hreflang
Det här attributet används för att indikera vilket språk den länkade resursen använder. Detta är bara ett förslag på vilket språk resursen kan använda. Se http://www.ietf.org/rfc/bcp/bcp47.txt för en lista över tillgängliga språkkoder.
media
Attributet används för att specificera vilka typer av media länken är tillför. Se media query för mer info om giltiga värden.
rel
Förkortning av engelskans "relationship" och indikerar vilket förhållande denna sida har till den länkade resursen. Man kan skicka flera olika roller med samma attribut, varje roll särskiljs med ett mellanslag. Används enbart om href är angiven.
shape
Anger vilken form arean har. Möjliga värden är:
circle- anger en cirkulär region.default- anger vad som ska hända med allt som ligger utanför de definierade regionerna.poly- anger en polygon som region.rect- anger en rektangulär region.
target
Anger vilken browsing context länken ska adressera, kan t.ex. vara en tabb, ett fönster eller en namngiven iframe. Följande värden har speciellt betydelse:
_self- Laddar resursen i samma browsing context som nuvarande sida. Detta är default-värdet som används om man inte anger detta attribut._blank- Ladda in resursen i ett icke-namngivet browsing context._parent- Ladda in resursen i eventuellt överliggande browsing context. Om inget sådant finns, gör den samma sak som_self._top- Ladda in resursen i det högsta överliggande browser context. Om inget sådant finns, gör den samma sak som_self.
type
Anger vilken media typ den länkad resurs har. Detta anges som en MIME-typ. Detta är inte bindande, så resursen kan egentligen vara vilken typ som helst.
Exempel
Ovanstående exempel skapar en cirkulär region som ligger 200 CSS-pixlar ifrån vänsterkanten och 100 CSS-pixlar ifrån toppen. Dess radie kommer att vara 25 CSS-pixlar.
Referenser
Taggens definition i WHATWGs levande HTML-standard
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#the-area-element
Taggens definition i HTML5-standarden
http://www.w3.org/TR/html5/embedded-content-0.html#the-area-element