Altes Köln

Widget:3D-Modell

Aus Altes Köln
Version vom 17. Januar 2021, 10:29 Uhr von Simon (Diskussion | Beiträge) (Highlight-Bilder für Schreinsbezirke nicht vorladen um das initiale Laden der Bilder hoffentlich zu beschleunigen)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu:Navigation, Suche

<style type="text/css"> body { margin: 0; padding: 0; }

.ak-3dmodel__widget { position: relative; height: calc(100vh - 56px); overflow:hidden; }

.ak-3dmodel__background-blur { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background-image: url(../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(10px); opacity: 0.7; }

.ak-3dmodel__view { position: relative; height: 100%; width: calc((100vh - 56px) * 1.171646162858817); margin-left: auto; margin-right: auto; }

.ak-3dmodel__fullview { position: relative; z-index: 1; width: auto; height: 100%; opacity: 1; transition: opacity .2s; }

.ak-3dmodel__view:hover .ak-3dmodel__fullview, .ak-3dmodel__view.ak-3dmodel__view_highlighted .ak-3dmodel__fullview { opacity: 0; }

/* TODO Can we do this with a CSS colour overlay instead to avoid loading this data? But it probably wouldn't match the colour of the highlight images. Maybe we can do that purely with canvas/SVG and very precise outlines? */ .ak-3dmodel__fowview { position: absolute; top: 0; left: 0; width: auto; height: 100%; }

.ak-3dmodel__sb { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .2s; /* TODO Use cutouts from the images and position them relative to the full image to reduce amount of data to be loaded. How to scale and position them to the responsive image? */ width: auto; height: 100%; }

.ak-3dmodel__sb.ak-3dmodel__sb_active { opacity: 1; }

.ak-3dmodel__sidebar { position: absolute; right: 2em; bottom: 2em; z-index: 11; width: calc((100vh - 56px) * 1.171646162858817 / 4); font-family: Arial, sans-serif; font-size: 16px; color: #495057; }

.ak-3dmodel__sidebar a { color: #495057; text-decoration: none; }

.ak-3dmodel__poi-list h3 { margin: 0; padding: 0.5em 1em; background-color: rgba(73, 80, 87, .85); color: #fefefe; font-weight: bold; font-size: 16px; line-height: normal; }

.ak-3dmodel__poi-list h3:hover { background-color: rgb(73, 80, 87); }

.ak-3dmodel__poi-list ol { list-style-type: none; margin: 0; padding: 0; overflow-y: auto; height: calc(50vh - 56px); }

.ak-3dmodel__poi-list ol li { margin: 0; }

.ak-3dmodel__poi-list ol li + li { border-top: 1px solid #ccc; }

.ak-3dmodel__poi-list ol a { display: block; padding: 0.5em 1em; background-color: hsla(0,0%,99.6%,.85); transition: background-color .2s; }

.ak-3dmodel__poi-list ol a:hover, .ak-3dmodel__poi-list ol a.ak-3dmodel__poi-list-link_active { background-color: #fefefe; }

.ak-3model__info-link { position: absolute; right: 2em; top: 2em; z-index: 11; display: inline-block; width: 2.5em; height: 2.5em; color: #495057; /* Info icon taken from https://feathericons.com/ and adjusted. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); background-color: hsla(0,0%,99.6%,.85); border-radius: 50%; }

.ak-3model__info-link:hover { background-color: #fefefe; } </style>

<script>

var sbHighlightImageSources = { 'ak-3dmodel__sb-martin': '../alteskoeln/3dmodel/SB_01_St_Martin.jpg', 'ak-3dmodel__sb-brigiden': '../alteskoeln/3dmodel/SB_02_St_Brigiden.jpg', 'ak-3dmodel__sb-unterlan': '../alteskoeln/3dmodel/SB_03_Unterlan.jpg', 'ak-3dmodel__sb-alban': '../alteskoeln/3dmodel/SB_04_St_Alban.jpg', 'ak-3dmodel__sb-laurenz': '../alteskoeln/3dmodel/SB_05_St_Laurenz.jpg', 'ak-3dmodel__sb-peter': '../alteskoeln/3dmodel/SB_06_St_Peter.jpg', 'ak-3dmodel__sb-kolumba': '../alteskoeln/3dmodel/SB_07_St_Columba.jpg', 'ak-3dmodel__sb-aposteln': '../alteskoeln/3dmodel/SB_08_St_Aposteln.jpg', 'ak-3dmodel__sb-niederich': '../alteskoeln/3dmodel/SB_09_Niederich.jpg', 'ak-3dmodel__sb-airsbach': '../alteskoeln/3dmodel/SB_10_Airsbach.jpg', 'ak-3dmodel__sb-christoph': '../alteskoeln/3dmodel/SB_11_St_Christoph.jpg', 'ak-3dmodel__sb-mauritius': '../alteskoeln/3dmodel/SB_12_St_Mauritius.jpg', 'ak-3dmodel__sb-severin': '../alteskoeln/3dmodel/SB_13_St_Severin.jpg', 'ak-3dmodel__sb-gereon': '../alteskoeln/3dmodel/SB_14_St_Gereon.jpg', 'ak-3dmodel__sb-eigelstein': '../alteskoeln/3dmodel/SB_15_Eigelstein.jpg', 'ak-3dmodel__sb-hacht': '../alteskoeln/3dmodel/SB_16_Hacht.jpg' };

document.addEventListener('DOMContentLoaded', function(event) { var widgets = document.getElementsByClassName('ak-3dmodel__widget'); for (var i = 0; i < widgets.length; i++) { initWidget(widgets[i]); } });

function initWidget(widget) { var imageMap = widget.getElementsByClassName('ak-3dmodel__imagemap')[0]; var view = widget.getElementsByClassName('ak-3dmodel__view')[0];

var areas = imageMap.children; for (var i = 0; i < areas.length; i++) { addAreaEventListeners(areas[i], view); }

var poiList = widget.getElementsByClassName('ak-3dmodel__poi-list-sb')[0]; var sbLinks = poiList.querySelectorAll('ol li a'); for (i = 0; i < sbLinks.length; i++) { addSBLinksEventListeners(sbLinks[i], view); } }

function getOrCreateSBHighlightImage(id, view) { var highlightImage = document.getElementById(id); if (!highlightImage) { highlightImage = document.createElement('img'); highlightImage.id = id; highlightImage.src = sbHighlightImageSources[id]; highlightImage.classList.add('ak-3dmodel__sb'); highlightImage.alt = ; view.appendChild(highlightImage); } return highlightImage; }

function addAreaEventListeners(area, view) { // TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile. area.addEventListener('mouseenter', function() { if (area.dataset.highlightImage) { var highlightImage = getOrCreateSBHighlightImage(area.dataset.highlightImage, view); highlightImage.classList.add('ak-3dmodel__sb_active');

var sbLink = document.querySelector('.ak-3dmodel__poi-list-sb a[data-highlight-image="' + area.dataset.highlightImage + '"]'); if (sbLink) { sbLink.classList.add('ak-3dmodel__poi-list-link_active'); sbLink.scrollIntoView(); } } }); area.addEventListener('mouseleave', function() { if (area.dataset.highlightImage) { var highlightImage = getOrCreateSBHighlightImage(area.dataset.highlightImage, view); highlightImage.classList.remove('ak-3dmodel__sb_active');

var sbLink = document.querySelector('.ak-3dmodel__poi-list-sb a[data-highlight-image="' + area.dataset.highlightImage + '"]'); if (sbLink) { sbLink.classList.remove('ak-3dmodel__poi-list-link_active'); } } }); }

function addSBLinksEventListeners(sbLink, view) { // TODO How to make this accessible on mobile? Tapping would activate the link. Maybe change that on mobile. sbLink.addEventListener('mouseenter', function() { if (sbLink.dataset.highlightImage) { var highlightImage = getOrCreateSBHighlightImage(sbLink.dataset.highlightImage, view); highlightImage.classList.add('ak-3dmodel__sb_active'); view.classList.add('ak-3dmodel__view_highlighted'); } }); sbLink.addEventListener('mouseleave', function() { if (sbLink.dataset.highlightImage) { var highlightImage = getOrCreateSBHighlightImage(sbLink.dataset.highlightImage, view); highlightImage.classList.remove('ak-3dmodel__sb_active'); view.classList.remove('ak-3dmodel__view_highlighted'); } }); } </script>

<img src="../alteskoeln/3dmodel/Giesen-Stadtmodell-2000.jpg" class="ak-3dmodel__fullview" usemap="#ak-3dmodel__imagemap" width="2000" height="1707" alt="Plastisches Stadtmodell von Köln um 1571" /> <img src="../alteskoeln/3dmodel/Giesen-Stadtmodell-2000_fow.jpg" class="ak-3dmodel__fowview" alt="" width="2000" height="1707" />

<map name="ak-3dmodel__imagemap" class="ak-3dmodel__imagemap"> <area alt="S. Martin" title="S. Martin" href="/wiki/Schreinsbezirk_I_S._Martin" coords="711,846,727,832,757,854,764,875,780,871,798,894,824,910,845,944,865,937,890,963,920,974,913,991,937,1034,980,1020,990,1023,1001,1013,1093,958,1123,938,1123,928,1176,882,1169,871,1114,816,1056,774,1038,749,913,831,897,838,881,818,851,809,807,763,789,760,697,838" shape="poly" data-highlight-image="ak-3dmodel__sb-martin"> <area alt="S. Brigiden" title="S. Brigiden" href="/wiki/Schreinsbezirk_II_S._Brigiden" coords="1055,757,1075,765,1114,771,1087,788,1184,877,1227,838,1275,799,1262,788,1280,780,1275,769,1375,700,1361,686,1307,705,1255,735,1206,696,1181,684,1149,707,1134,716,1121,700,1111,716,1052,742" shape="poly" data-highlight-image="ak-3dmodel__sb-brigiden"> <area alt="Unterlan" title="Unterlan" href="/wiki/Schreinsbezirk_III_Unterlan" coords="1084,792,1116,770,1103,762,1082,765,1066,767" shape="poly" data-highlight-image="ak-3dmodel__sb-unterlan"> <area alt="S. Alban" title="S. Alban" href="/wiki/Schreinsbezirk_IV_S._Alban" coords="904,831,920,811,934,816,1034,744,1006,709,980,659,962,656,941,673,881,710,845,740,814,760,833,788" shape="poly" data-highlight-image="ak-3dmodel__sb-alban"> <area alt="S. Laurenz" title="S. Laurenz" href="/wiki/Schreinsbezirk_V_S._Laurenz" coords="1038,739,1119,702,1142,702,1181,673,1149,638,1128,622,1116,594,1123,585,1109,562,1052,603,1026,615,978,647" shape="poly" data-highlight-image="ak-3dmodel__sb-laurenz"> <area alt="S. Peter" title="S. Peter" href="/wiki/Schreinsbezirk_VI_S._Peter" coords="695,839,812,746,909,694,872,668,838,650,824,663,799,654,766,601,718,511,688,486,655,507,639,521,625,534,602,539,564,576,534,599,513,620,489,622,464,611,416,620,386,633,351,643,324,645,338,657,367,702,414,744,448,758,503,786" shape="poly" data-highlight-image="ak-3dmodel__sb-peter"> <area alt="S. Kolumba" title="S. Kolumba" href="/wiki/Schreinsbezirk_VII_S._Kolumba" coords="655,346,716,401,725,420,743,429,754,442,692,472,708,500,723,509,782,622,801,646,822,652,842,652,860,664,874,661,914,687,1031,609,1110,553,1110,539,1174,491,1128,449,1070,403,1010,343,902,267,881,244,826,233,775,263,734,260,708,279,693,277,674,295,640,311,637,323,607,344,619,364" shape="poly" data-highlight-image="ak-3dmodel__sb-kolumba"> <area alt="S. Apostel" title="S. Apostel" href="/wiki/Schreinsbezirk_VIII_S._Apostel" coords="331,634,466,608,499,620,557,578,595,537,609,546,637,525,670,495,688,479,745,438,655,348,623,376,602,348,681,286,670,263,589,198,547,157,547,143,542,134,466,164,437,177,368,235,393,270,444,320,462,345,497,389,494,401,510,410" shape="poly" data-highlight-image="ak-3dmodel__sb-aposteln"> <area alt="Niederich" title="Niederich" href="/wiki/Schreinsbezirk_IX_Niederich" coords="1405,675,1547,611,1639,572,1738,560,1720,493,1702,496,1692,447,1667,401,1607,336,1584,283,1561,268,1534,270,1511,258,1404,222,1381,224,1303,240,1269,249,1241,252,1208,252,1149,251,1140,267,1102,277,1087,274,1068,297,1019,321,1027,339,1015,344,1075,394,1082,383,1087,404,1125,440,1169,482,1190,498,1202,484,1331,599,1338,627,1388,666" shape="poly" data-highlight-image="ak-3dmodel__sb-niederich"> <area alt="Airsbach" title="Airsbach" href="/wiki/Schreinsbezirk_X_Airsbach" coords="636,1292,642,1283,656,1286,654,1271,767,1170,781,1150,845,1096,859,1094,886,1073,919,1050,926,1028,912,1005,875,967,857,947,847,954,801,907,771,885,758,875,727,861,668,829,617,823,589,809,564,811,525,793,456,767,483,786,454,786,433,800,424,829,419,875,416,914,416,961,428,998,433,1048,446,1073" shape="poly" data-highlight-image="ak-3dmodel__sb-airsbach"> <area alt="S. Gereon" title="S. Gereon" href="/wiki/Schreinsbezirk_XIV_S._Gereon" coords="920,90,948,72,999,106,1008,110,1010,122,999,134,989,127,962,145,946,110" shape="poly" data-highlight-image="ak-3dmodel__sb-gereon"> <area alt="S. Christoph" title="S. Christoph" href="/wiki/Schreinsbezirk_XI_S._Christoph" coords="543,133,632,92,681,72,739,51,796,44,851,37,909,37,974,30,1027,35,1080,46,1133,57,1211,74,1305,97,1436,129,1420,180,1414,217,1381,210,1338,221,1294,233,1257,242,1218,253,1140,249,1140,263,1100,277,1087,276,1075,288,1019,316,1008,322,1017,334,1008,341,971,313,920,274,897,258,856,230,838,228,819,226,777,258,759,258,741,256,713,276,701,269,690,277,663,256,617,223,591,198,577,193,549,147" shape="poly" data-highlight-image="ak-3dmodel__sb-christoph"> <area alt="S. Mauritius - Weyerstraße" title="S. Mauritius - Weyerstraße" href="/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe" coords="430,1021,418,933,418,874,428,818,435,797,449,788,442,765,388,724,336,661,320,648,319,629,347,629,363,592,423,502,458,456,504,406,488,394,488,376,456,339,448,325,396,283,379,281,370,263,370,247,359,240,320,283,271,344,232,392,179,466,167,461,158,480,165,493,133,542,119,579,103,613,86,657,84,691,77,791,75,924,117,935,245,929,305,926,330,929,333,952,358,958,361,977,377,982,377,1007" shape="poly" data-highlight-image="ak-3dmodel__sb-mauritius"> <area alt="S. Severin" title="S. Severin" href="/wiki/Schreinsbezirk_XIII_S._Severin" coords="436,1686,471,1665,480,1650,513,1631,480,1635,487,1610,471,1610,510,1527,542,1445,572,1384,640,1285,527,1175,510,1140,497,1113,473,1092,455,1085,448,1069,430,1030,377,1004,374,979,358,977,358,958,333,954,331,931,291,926,102,935,75,926,66,1380,93,1415,434,1633,439,1645,421,1663" shape="poly" data-highlight-image="ak-3dmodel__sb-severin"> <area alt="Eigelstein" title="Eigelstein" href="/wiki/Schreinsbezirk_XV_Eigelstein" coords="1930,558,1936,544,1971,532,1967,514,1921,528,1916,511,1904,514,1886,459,1849,399,1812,346,1777,300,1750,267,1722,230,1716,209,1665,191,1617,175,1556,156,1446,133,1418,219,1490,247,1573,272,1593,293,1616,345,1644,380,1670,398,1695,447,1701,463,1706,489,1723,488,1732,518,1743,560,1755,567,1764,558,1902,541" shape="poly" data-highlight-image="ak-3dmodel__sb-eigelstein"> <area alt="Hacht" title="Hacht" href="/wiki/Schreinsbezirk_XVI_Hacht" coords="1245,725,1209,689,1199,693,1140,636,1132,587,1112,557,1178,497,1190,502,1199,491,1273,544,1319,585,1335,622,1372,663,1391,677,1393,663,1404,682,1400,691,1386,698,1374,677,1287,703" shape="poly" data-highlight-image="ak-3dmodel__sb-hacht"> </map>

Schreinsbezirke

  1. <a href="/wiki/Schreinsbezirk_I_S._Martin" data-highlight-image="ak-3dmodel__sb-martin">I S. Martin</a>
  2. <a href="/wiki/Schreinsbezirk_II_S._Brigiden" data-highlight-image="ak-3dmodel__sb-brigiden">II S. Brigiden</a>
  3. <a href="/wiki/Schreinsbezirk_III_Unterlan" data-highlight-image="ak-3dmodel__sb-unterlan">III Unterlan</a>
  4. <a href="/wiki/Schreinsbezirk_IV_S._Alban" data-highlight-image="ak-3dmodel__sb-alban">IV S. Alban</a>
  5. <a href="/wiki/Schreinsbezirk_V_S._Laurenz" data-highlight-image="ak-3dmodel__sb-laurenz">V S. Laurenz</a>
  6. <a href="/wiki/Schreinsbezirk_VI_S._Peter" data-highlight-image="ak-3dmodel__sb-peter">VI S. Peter</a>
  7. <a href="/wiki/Schreinsbezirk_VII_S._Kolumba" data-highlight-image="ak-3dmodel__sb-kolumba">VII S. Kolumba</a>
  8. <a href="/wiki/Schreinsbezirk_VIII_S._Apostel" data-highlight-image="ak-3dmodel__sb-aposteln">VIII S. Apostel</a>
  9. <a href="/wiki/Schreinsbezirk_IX_Niederich" data-highlight-image="ak-3dmodel__sb-niederich">IX Niederich</a>
  10. <a href="/wiki/Schreinsbezirk_X_Airsbach" data-highlight-image="ak-3dmodel__sb-airsbach">X Airsbach</a>
  11. <a href="/wiki/Schreinsbezirk_XI_S._Christoph" data-highlight-image="ak-3dmodel__sb-christoph">XI S. Christoph</a>
  12. <a href="/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe" data-highlight-image="ak-3dmodel__sb-mauritius">XII S. Mauritius - Weyerstraße</a>
  13. <a href="/wiki/Schreinsbezirk_XIII_S._Severin" data-highlight-image="ak-3dmodel__sb-severin">XIII S. Severin</a>
  14. <a href="/wiki/Schreinsbezirk_XIV_S._Gereon" data-highlight-image="ak-3dmodel__sb-gereon">XIV S. Gereon</a>
  15. <a href="/wiki/Schreinsbezirk_XV_Eigelstein" data-highlight-image="ak-3dmodel__sb-eigelstein">XV Eigelstein</a>
  16. <a href="/wiki/Schreinsbezirk_XVI_Hacht" data-highlight-image="ak-3dmodel__sb-hacht">XVI Hacht</a>

<a href="/wiki/Stadtmodell/Info_zum_Stadtmodell" class="ak-3model__info-link" aria-label="Über das Stadtmodell" title="Über das Stadtmodell"></a>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script type="text/javascript" src="../alteskoeln/jquery.rwdImageMaps.min.js"></script> <script> $(document).ready(function() { $('img[usemap]').rwdImageMaps(); }); </script>

Abgerufen von „https://altes-koeln.de/index.php?title=Widget:3D-Modell&oldid=19484“
Cookies helfen uns bei der Bereitstellung von Altes Köln. Durch die Nutzung von Altes Köln erklärst du dich damit einverstanden, dass wir Cookies speichern.