Quelltext der Seite Widget:3D-Modell

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

	.ak-3dmodel__widget {
		height: 100vh;
	}

	.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 * 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;
		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;
	}

	.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: 52vh;
	}

	.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;
	}
</style>

<script>
	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 areas = imageMap.children;
		for (var i = 0; i < areas.length; i++) {
			addAreaEventListeners(areas[i]);
		}

		var view = widget.getElementsByClassName('ak-3dmodel__view')[0];
		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 addAreaEventListeners(area) {
		// 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 = document.getElementById(area.dataset.highlightImage);
				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');
				}
			}
		});
		area.addEventListener('mouseleave', function() {
			if (area.dataset.highlightImage) {
				var highlightImage = document.getElementById(area.dataset.highlightImage);
				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 = document.getElementById(sbLink.dataset.highlightImage);
				highlightImage.classList.add('ak-3dmodel__sb_active');
				view.classList.add('ak-3dmodel__view_highlighted');
			}
		});
		sbLink.addEventListener('mouseleave', function() {
			if (sbLink.dataset.highlightImage) {
				var highlightImage = document.getElementById(sbLink.dataset.highlightImage);
				highlightImage.classList.remove('ak-3dmodel__sb_active');
				view.classList.remove('ak-3dmodel__view_highlighted');
			}
		});
	}
</script>

<div class="ak-3dmodel__widget" style="overflow:hidden">
	<div class="ak-3dmodel__background-blur"></div>
	<div class="ak-3dmodel__view">
		<!-- TODO Attribution -->
		<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" />

		<img src="/alteskoeln/3dmodel/SB_01_St_Martin.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-martin" alt="" />
		<img src="/alteskoeln/3dmodel/SB_02_St_Brigiden.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-brigiden" alt="" />
		<img src="/alteskoeln/3dmodel/SB_03_Unterlan.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-unterlan" alt="" />
		<img src="/alteskoeln/3dmodel/SB_04_St_Alban.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-alban" alt="" />
		<img src="/alteskoeln/3dmodel/SB_05_St_Laurenz.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-laurenz" alt="" />
		<img src="/alteskoeln/3dmodel/SB_06_St_Peter.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-peter" alt="" />
		<img src="/alteskoeln/3dmodel/SB_07_St_Columba.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-kolumba" alt="" />
		<img src="/alteskoeln/3dmodel/SB_08_St_Aposteln.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-aposteln" alt="" />
		<img src="/alteskoeln/3dmodel/SB_09_Niederich.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-niederich" alt="" />
		<img src="/alteskoeln/3dmodel/SB_10_Airsbach.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-airsbach" alt="" />
		<img src="/alteskoeln/3dmodel/SB_11_St_Christoph.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-christoph" alt="" />
		<img src="/alteskoeln/3dmodel/SB_12_St_Mauritius.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-mauritius" alt="" />
		<img src="/alteskoeln/3dmodel/SB_13_St_Severin.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-severin" alt="" />
		<img src="/alteskoeln/3dmodel/SB_14_St_Gereon.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-gereon" alt="" />
		<img src="/alteskoeln/3dmodel/SB_15_Eigelstein.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-eigelstein" alt="" />
		<img src="/alteskoeln/3dmodel/SB_16_Hacht.jpg" class="ak-3dmodel__sb" id="ak-3dmodel__sb-hacht" alt="" />

		<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"> <!-- Has to be before S. Christoph to overlay it. -->
			<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>
		<div class="ak-3dmodel__sidebar">
			<div class="ak-3dmodel__poi-list ak-3dmodel__poi-list-sb">
				<h3>Schreinsbezirke</h3>
				<ol>
					<li><a href="/wiki/Schreinsbezirk_I_S._Martin" data-highlight-image="ak-3dmodel__sb-martin">I S. Martin</a></li>
					<li><a href="/wiki/Schreinsbezirk_II_S._Brigiden" data-highlight-image="ak-3dmodel__sb-brigiden">II S. Brigiden</a></li>
					<li><a href="/wiki/Schreinsbezirk_III_Unterlan" data-highlight-image="ak-3dmodel__sb-unterlan">III Unterlan</a></li>
					<li><a href="/wiki/Schreinsbezirk_IV_S._Alban" data-highlight-image="ak-3dmodel__sb-alban">IV S. Alban</a></li>
					<li><a href="/wiki/Schreinsbezirk_V_S._Laurenz" data-highlight-image="ak-3dmodel__sb-laurenz">V S. Laurenz</a></li>
					<li><a href="/wiki/Schreinsbezirk_VI_S._Peter" data-highlight-image="ak-3dmodel__sb-peter">VI S. Peter</a></li>
					<li><a href="/wiki/Schreinsbezirk_VII_S._Kolumba" data-highlight-image="ak-3dmodel__sb-kolumba">VII S. Kolumba</a></li>
					<li><a href="/wiki/Schreinsbezirk_VIII_S._Apostel" data-highlight-image="ak-3dmodel__sb-aposteln">VIII S. Apostel</a></li>
					<li><a href="/wiki/Schreinsbezirk_IX_Niederich" data-highlight-image="ak-3dmodel__sb-niederich">IX Niederich</a></li>
					<li><a href="/wiki/Schreinsbezirk_X_Airsbach" data-highlight-image="ak-3dmodel__sb-airsbach">X Airsbach</a></li>
					<li><a href="/wiki/Schreinsbezirk_XI_S._Christoph" data-highlight-image="ak-3dmodel__sb-christoph">XI S. Christoph</a></li>
					<li><a href="/wiki/Schreinsbezirk_XII_S._Mauritius_-_Weyerstra%C3%9Fe" data-highlight-image="ak-3dmodel__sb-mauritius">XII S. Mauritius - Weyerstraße</a></li>
					<li><a href="/wiki/Schreinsbezirk_XIII_S._Severin" data-highlight-image="ak-3dmodel__sb-severin">XIII S. Severin</a></li>
					<li><a href="/wiki/Schreinsbezirk_XIV_S._Gereon" data-highlight-image="ak-3dmodel__sb-gereon">XIV S. Gereon</a></li>
					<li><a href="/wiki/Schreinsbezirk_XV_Eigelstein" data-highlight-image="ak-3dmodel__sb-eigelstein">XV Eigelstein</a></li>
					<li><a href="/wiki/Schreinsbezirk_XVI_Hacht" data-highlight-image="ak-3dmodel__sb-hacht">XVI Hacht</a></li>
				</ol>
			</div>
		</div>
	</div>
</div>

<!-- Make image map responsive. -->
<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>