Vis kort i blog eller på hjemmeside

Vis interaktive kort på hjemmeside eller i blog.

Kopier kode til indlejring af udvalgte kort og kortudsnit på hjemmeside eller i blog.

Kopier HTML-kode

Udvælg kort i Kortviseren og zoom ind på det ønskede kortudsnit.
Klik på knappen

Kopier kode i kontrolpanelet og der genereres HTML-kode til indlejring på hjemmeside:

<iframe class="Kortviseren" style="width:100%; height:100%; border:none;" src="https://kortviseren.dk/mitkort?p=724958,6178331,2&k=kbh1730"></iframe> .
Den genererede kode bliver kopieret til klippebordet, og kan indsættes i hjemmeside, som vist nedenfor, eller indlejres som iframe i blog eller CMS.

Kopier kode til indlejring af viste kort og udsnit i blog eller på hjemmeside.

Indsæt kode på hjemmeside

Kopier kode som vist ovenfor, og indsæt den i HTML.

<!DOCTYPE html> <html><head> <title>Min hjemmeside</title></head><body>      .
      .
      Indsæt kopieret kode her.
      .
      .
</body></html>
Den indsatte iframe, kører interaktivt i sit eget afskærmede miljø, og giver med link brugeren mulighed for at se kortet i fuldt vindue hos Kortviseren.

Indsæt den genererede iframe fra Kortviseren i din hjemmesides HTML-kode.

Standard iframe

Som standard genereres kode til et kort i fuld bredde og 150 pixels højt, som eksemplet nedenfor viser.

<!DOCTYPE html> <html><head> <title>Min hjemmeside</title></head><body>
<iframe class="Kortviseren" style="width:100%; height:100%; border:none;" src="https://kortviseren.dk/mitkort?p=724958,6178331,2&k=kbh1730"> </iframe>
</body></html>

Iframe ramme og dimensioner

Ønskes andre dimensioner, kan værdierne for width og height ændres, eller den kopierede kode kan indkapsles i et HTML-element med ønskede dimensioner og ramme.
Ønskes ramme omkring kortet, kan border:none; fjernes eller ændres.

<body>
<iframe class="Kortviseren" style="width:calc(40% - 12px); height:200px; border:solid 1px; margin:5px;" src="https://kortviseren.dk/mitkort?p=723737,6175501,1&k=graa;kbhf1685soerne,b,m"> </iframe>
<div style="width:calc(60% - 12px); height:200px; border:solid 1px; margin:5px;" <iframe class="Kortviseren" style="width:100%; height:100%; border:none;" src="https://kortviseren.dk/mitkort?p=723737,6175501,1&k=graa;kbhf1685soerne,b,m"> </iframe> </div>
</body>
Se simpelt eksempel.
Se også eksempel på kort i fuldt vindue.

CSS

Ønskes flere kort med samme dimensioner kan klassen .Kortviseren benyttes i CSS-definitioner.

<head> <style> .Kortviseren { float: right; width: calc(50% - 10px); height: 250px; margin: 5px; }</style></head>

Script til opdatering af højdekort

Nogle teknikaliteter omkring iframes, kan medføre manglende opdatering af højdekort.
Ved at indsætte nedenstående script i head-afsnittet på de sider, der benytter højdekort, sikres opdatering når brugeren scroller siden.
Hvis det viser sig ikke at være tilfredsstillende udvirkes en løsning, der opdaterer indlejrede højdekort med et tidsinterval.

<head> <title>Min hjemmeside</title> <script> window.onscroll = function(){ var iframes = document.getElementsByClassName("Kortviseren"); for (var iframe = 0; iframe < iframes.length; iframe++ ) iframes[iframe].attributes.src.ownerElement.contentWindow.focus(); }; </script> </head>
Se eksempel på en lang side med farvelagte højdekort, der opdateres, når siden scrolles, eller musen føres hen over det enkelte kort.