Widget:KH nav

<style> /* #vloca_all { opacity: 0.7 } */ .vloca-frame:hover #vloca_all { filter: grayscale(100%); }

.vloca-layer > img {

 width: 700px;

} .vloca-layer { position: absolute; } </style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<img src="/imec_files/kh_nav/vlocanavmap.png" id="vloca_all" >

<img class="vloca-image" src="/imec_files/kh_nav/bouwlaag.png" id="vloca_bouwlaag">

<img class="vloca-image" src="/imec_files/kh_nav/architectuur.png" id="vloca_architectuur">

<img class="vloca-image" src="/imec_files/kh_nav/component.png" id="vloca_component">

<img class="vloca-image" src="/imec_files/kh_nav/capaciteit.png" id="vloca_capaciteit">

<img class="vloca-image" src="/imec_files/kh_nav/vereisten.png" id="vloca_vereisten">

<img class="vloca-image" src="/imec_files/kh_nav/randvoorwaarden.png" id="vloca_randvoorwaarden">

<img class="vloca-image" src="/imec_files/kh_nav/standaard.png" id="vloca_standaard">

<img class="vloca-image" src="/imec_files/kh_nav/organisatie.png" id="vloca_organisatie">

<img class="vloca-image" src="/imec_files/kh_nav/systeemeigenschappen.png" id="vloca_systeemeigenschappen">

<img class="vloca-image" src="/imec_files/kh_nav/principes.png" id="vloca_principes">

<img class="vloca-image" src="/imec_files/kh_nav/vlocausecase.png" id="vloca_vlocausecase">

<img src="/imec_files/kh_nav/emptynav.png" usemap="#image-map">

<map name="image-map" id="image-map"> <area href="VLOCA_Trajecten" class="vloca_area" id="vlocausecase" coords="1081,193,1423,390" shape="rect"> <area class="vloca_area" id="principes" href="VLOCA_Charter" coords="2514,227,2862,390" shape="rect"> <area class="vloca_area" id="organisatie" href="Organisaties" coords="135,562,476,755" shape="rect"> <area class="vloca_area" id="randvoorwaarden"

             href="Randvoorwaarden" 

coords="797,559,1138,746" shape="rect"> <area class="vloca_area" id="vereisten" href="Vereisten" coords="1356,559,1698,752" shape="rect"> <area class="vloca_area" id="capaciteit"

             href="Capaciteiten" 

coords="2012,556,2357,755" shape="rect"> <area class="vloca_area" id="standaard" href="Standaarden" coords="138,1073,482,1272" shape="rect"> <area class="vloca_area" id="component" href="Componenten" coords="1045,1076,1383,1266" shape="rect"> <area class="vloca_area" id="bouwlaag" href="Bouwlagen" coords="1668,1076,2006,1269" shape="rect"> <area class="vloca_area" id="architectuur" href="Open_Smart_City_Architectuur" coords="2285,1079,2626,1275" shape="rect"> <area class="vloca_area" id="systeemeigenschappen" href="Systeemeigenschappen" coords="2923,1073,3273,1275" shape="rect"> </map>

<script type="text/javascript">

class ResponsiveImageMap {

   constructor(map, oldWidth, newWidth) {
       this.originalWidth = oldWidth;

this.newWidth = newWidth

       this.areas = [];

       for (const area of map.getElementsByTagName('area')) {
           this.areas.push({
               element: area,
               originalCoords: area.coords.split(',')
           });
       }

       window.addEventListener('resize', e => this.resize(e));
       this.resize();
   }

   resize() {
       const ratio = this.newWidth / this.originalWidth;

       for (const area of this.areas) {
           const newCoords = [];
           for (const originalCoord of area.originalCoords) {
               newCoords.push(Math.round(originalCoord * ratio));
           }
           area.element.coords = newCoords.join(',');
       }

       return true;
   };

}

$(document).ready(function(){

$('.vloca-image').hide();

var map = document.getElementById('image-map'); new ResponsiveImageMap(map, 3432, 700);

$('.vloca_area').mouseover(function() { $('#vloca_' + $(this)[0].id).fadeIn(200); }).mouseout(function(){ $('#vloca_' + $(this)[0].id).fadeOut(100); });

}); </script>