Area

Från Webbling
Version från den 12 januari 2019 kl. 21.53 av PGJ (diskussion | bidrag) (→‎Exempel)
(skillnad) ← Äldre version | Nuvarande version (skillnad) | Nyare version → (skillnad)
Hoppa till: navigering, sök

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