<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="image-map-container">
<img src="https://i.imgur.com/1eAUZyk.png" usemap="#image-map" class="img-fluid">
<div class="map-selector"></div>
</div>
<map name="image-map" id="image-map">
<area href="#" alt="We rise you to the top" title="We rise you to the top" coords="421,47,935,561" shape="rect" target="_blank">
<area href="#" alt="We rise you to the top" title="We rise you to the top" coords="958,988,1368,574" shape="rect" target="_blank">
<area href="#" alt="We plan you approach" title="We plan you approach" coords="1401,587,2224,1404" shape="rect" target="_blank">
<area href="#" alt="" title="" coords="2258,866,2771,1403" shape="rect" target="_blank">
<area href="#" alt="We spam the cool way" title="We spam the cool way" coords="2808,309,3331,836" shape="rect" target="_blank">
<area href="#" alt="We set the tone" title="We set the tone" coords="495,1407,11,914" shape="rect" target="_blank">
<area href="#" alt="We create a vision" title="We create a vision" coords="611,1094,1368,2198" shape="rect" target="_blank">
<area href="#" alt="The ad Hacker" title="The ad Hacker" coords="1478,1574,2194,2041" shape="rect" target="_blank">
<area href="#" alt="We Entertain the Community" title="We Entertain the Community" coords="2264,1435,2901,2079" shape="rect" target="_blank">
<area href="#" alt="We lead with heart, So they follow" title="We lead with heart, So they follow" coords="2941,1448,3388,1891" shape="rect" target="_blank">
<area href="#" alt="" title="" coords="101,2202,571,2676" shape="rect" target="_blank">
<area href="#" alt="We make it work" title="We make it work" coords="1401,2244,1878,2721" shape="rect" target="_blank">
<area href="#" alt="" title="" coords="2264,2143,2768,2637" shape="rect" target="_blank">
<area href="#" alt="We level up your game" title="We level up your game" coords="3138,1954,3771,2608" shape="rect" target="_blank">
<area href="#" alt="The story tellers" title="The story tellers" coords="158,2842,758,3216" shape="rect" target="_blank">
<area href="#" alt="We Innovate" title="We Innovate" coords="848,2772,1371,3299" shape="rect" target="_blank">
<area href="#" alt="We connect you to the world" title="We connect you to the world" coords="2611,3457,1918,2774" shape="rect" target="_blank">
<area href="#" alt="The Design Scientists" title="The Design Scientists" coords="2658,2959,3464,3371" shape="rect" target="_blank">
</map>
<script src="https://res.cloudinary.com/positionrelativ/raw/upload/v1492377595/jquery.rwdImageMaps_lq5sye.js"></script>
.image-map-container {
position: relative;
}
.image-map-container img {
display:block;
}
.image-map-container .map-selector {
left:0;top:0;right:0;bottom:0;
color:#546E7A00;
transition-duration: .3s;
transition-timing-function: ease-out;
transition-property: top, left, right, bottom, color;
}
.image-map-container .map-selector.hover {
color:#546E7A80;
}
.map-selector:after {
content: '';
position: absolute;
top: inherit;right: inherit;bottom: inherit;left: inherit;
background: currentColor;
transition-duration: .1s;
transition-timing-function: ease-out;
transition-property: top, left, right, bottom, background;
pointer-events: none;
box-shadow: 0 0 10px 10px black;
}
// * img coords generated with
// http://imagemap-generator.dariodomi.de/
// * made responsive with
// https://github.com/stowball/jQuery-rwdImageMaps
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$(document).on('click', function(e) {
e.preventDefault();
if ( $(e.target).closest('area').length === 0 ) {
$('.selection').html('click a brick');
}
});
$('#image-map area').hover(
function () {
var coords = $(this).attr('coords').split(',');
var width = $('.image-map-container').width();
var height = $('.image-map-container').height();
$('.image-map-container .map-selector').addClass('hover').css({
'left': coords[0]+'px',
'top': coords[1] + 'px',
'right': width - coords[2],
'bottom': height - coords[3]
})
},
function () {
$('.image-map-container .map-selector').removeClass('hover').attr('style','');
}
)
});
