Widget:Technology donut

</style>

     <img class="vloca-image" src="/imec_files/tech_donut/network.png" id="vloca_network">

<img src="/imec_files/tech_donut/empty.png" usemap="#image-map"> <map name="image-map" id="image-map"> <area href="Devices" class="vloca_area"

               id="devices"

coords="58,498,66,583,89,654,116,713,154,771,218,836,273,876,249,914,185,868,121,804,75,735,41,662,20,591,13,499" shape="poly"> <area href="Security" class="vloca_area"

               id="security"

coords="330,953,404,974,494,984,596,973,668,954,736,921,711,881,648,911,583,929,495,937,415,928,349,910,277,879,255,917" shape="poly"> <area href="Monitoring" class="vloca_area"

               id="monitoring"

coords="717,877,745,918,822,859,883,796,927,725,961,643,978,569,982,501,938,500,932,563,914,633,884,704,846,770,789,826" shape="poly"> <area href="Infrastructure" class="vloca_area"

               id="infrastructure"

coords="743,80,796,114,861,177,922,262,953,330,974,409,981,494,937,494,931,412,907,339,876,277,829,210,767,151,718,119" shape="poly"> <area href="Network & connectivity" class="vloca_area"

               id="network"

coords="258,77,280,116,340,86,414,67,490,58,565,64,638,83,712,115,738,75,653,37,571,17,486,13,401,22,325,44" shape="poly"> <area href="Applications"

				class="vloca_area"
               id="applications"

coords="252,79,273,117,219,156,164,210,116,283,86,347,66,409,57,491,13,490,23,404,42,332,75,259,128,180,189,124" shape="poly"> <area href="?curid=956"

               class="vloca_area"
               id="personal"

coords="313,647,339,674,372,699,274,863,235,838,194,801,162,770" shape="poly"> <area href="?curid=955"

               class="vloca_area"
               id="iam"

coords="380,703,408,716,441,727,401,917,357,902,311,884,278,869" shape="poly"> <area href="?curid=958" class="vloca_area"

               id="compute"

coords="449,730,525,736,599,715,647,686,688,644,716,595,732,550,919,586,905,639,883,693,843,756,784,820,716,868,641,902,569,922,485,928,405,916" shape="poly"> <area href="?curid=957"

               class="vloca_area"
               id="process"

coords="731,542,917,576,929,493,919,407,900,342,868,275,804,192,668,330,698,364,720,413,735,474" shape="poly"> <area href="?curid=960"

               class="vloca_area"
               id="broker"

coords="379,82,434,268,497,258,556,266,617,289,664,325,801,189,736,138,661,96,565,70,473,65" shape="poly"> <area href="?curid=959" class="vloca_area"

               id="service"

coords="370,87,427,271,382,289,349,313,316,341,294,375,124,280,177,207,262,136,312,108" shape="poly"> <area href="?curid=963" class="vloca_area"

               id="capture"

coords="124,285,286,380,263,441,256,497,264,554,279,599,309,642,159,763,116,697,82,615,68,518,68,436,89,357" shape="poly"> <area href="?curid=954" class="vloca_area"

               id="storage"

coords="499,496,225" shape="circle"> </map>

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, 1000, 700);

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

}); </script>