Area: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) (Skapade sidan med '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 <code>map</code>-tagg. == Tillgänl...') |
PGJ (diskussion | bidrag) |
||
| (5 mellanliggande sidversioner av samma användare visas inte) | |||
| Rad 1: | Rad 1: | ||
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 <code>map</code>-tagg. | 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 <code>[[map]]</code>-tagg. | ||
== Tillgänliga attribut == | == Tillgänliga attribut == | ||
De [[ | De [[globala attribut|globala attributen]] är tillgängliga för denna tagg. | ||
=== <code>alt</code> === | === <code>alt</code> === | ||
Anger en textsträng som visas istället för regionen för de webbläsare som inte kan hantera bilder. Om man anger <code>href</code>-attributet måste man även ange detta attribut. | Anger en textsträng som visas istället för regionen för de webbläsare som inte kan hantera bilder. Om man anger <code>href</code>-attributet måste man även ange detta attribut. | ||
| Rad 12: | Rad 12: | ||
Om attributet är satt, indikerar det att den länkade resursen ska laddas ner som en fil, snarare än att visas. | Om attributet är satt, indikerar det att den länkade resursen ska laddas ner som en fil, snarare än att visas. | ||
=== <code>href</code> === | === <code>href</code> === | ||
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. | 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 [[skript|skripting]]. | ||
=== <code>hreflang</code> === | === <code>hreflang</code> === | ||
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. | 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. | ||
=== <code>media</code> === | === <code>media</code> === | ||
Attributet används för att specificera vilka typer av media länken är tillför. Se | 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. | ||
=== <code>rel</code> === | === <code>rel</code> === | ||
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 <code>href</code> är angiven. | 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 <code>href</code> är angiven. | ||
| Rad 26: | Rad 26: | ||
*<code>rect</code> - anger en rektangulär region. | *<code>rect</code> - anger en rektangulär region. | ||
=== <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: | |||
* <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 | * <code>_blank</code> - Ladda in resursen i ett icke-namngivet [[browsing context]]. | ||
* <code>_parent</code> - Ladda in resursen i eventuellt överliggande [[browsing | * <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 | * <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,result" height="200"> | |||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<map> | <map> | ||
| Rad 39: | Rad 41: | ||
</map> | </map> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
</codepen> | |||
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. | 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 == | == Referenser == | ||
=== Taggens definition i | === Taggens definition i [[WHATWG]]s levande HTML-standard === | ||
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#the-area-element | http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#the-area-element | ||
=== Taggens definition i HTML5-standarden === | === Taggens definition i HTML5-standarden === | ||
http://www.w3.org/TR/html5/embedded-content-0.html#the-area-element | http://www.w3.org/TR/html5/embedded-content-0.html#the-area-element | ||
Nuvarande version från 12 januari 2019 kl. 23.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