Area: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
Ingen redigeringssammanfattning
 
(4 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 [[Globala attribut|globala attributen]] är tillgängliga för denna tagg.
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 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 <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 argument.
* <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,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 ((WHATWG|WHATWGs)) levande HTML-standarden ===
=== 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. 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

See the Pen yNjJBO by Patrik Grip-Jansson (@PGJ) on 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.

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