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>
<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>