<style>
:root {
--red: #ff0000;
}
body {
margin: 0;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
display: block;
}
area {
outline: 5px solid var(--red);
cursor: pointer;
}
.popup {
padding: 20px;
background-color: rgba(100, 100, 100, 0.9);
color: white;
font-weight: 100;
font-size: 14px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: opacity 300ms, transform 300ms;
z-index: 1000;
}
.popup:target {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.popup > .close {
position: absolute;
right: -10px;
top: -10px;
background-color: black;
padding: 4px 10px;
text-decoration: none;
color: white;
cursor: pointer;
}
</style>
<img src="https://static1.squarespace.com/static/653a2a46b2903c2a45a176c6/t/685a9fdf08f2ce19b28d3c4a/1750769657644/Added_value_modified_without+title.png" usemap="#image-map">
<map name="image-map">
<area target="_self" alt="Project Brief" title="Project Brief" href="#project-brief" coords="2251,894,1424,611" shape="rect">
<area target="_self" alt="Initiation Stage Plan" title="Initiation Stage Plan" href="#initiation-stage-plan" coords="1442,997,2616,1248" shape="rect">
<area target="_self" alt="PID" title="PID" href="#pid" coords="3772,2918,1194,1642" shape="rect">
<area target="_self" alt="Benefits Mgt Approach" title="Benefits Mgt Approach" href="#benefits-mgt-approach" coords="1453,2941,3243,3169" shape="rect">
<area target="_self" alt="Work Package Definition" title="Work Package Definition" href="#work-package-definition" coords="2385,3749,1175,3544" shape="rect">
<area target="_self" alt="Work Package Delivery" title="Work Package Delivery" href="#work-package-delivery" coords="1194,3919,2937,4108" shape="rect">
<area target="_self" alt="Highlight Exception Report" title="Highlight Exception Report" href="#highlight-exception-report" coords="1194,4131,2848,4317" shape="rect">
<area target="_self" alt="End Stage Report" title="End Stage Report" href="#end-stage-report" coords="1194,4340,2033,4526" shape="rect">
<area target="_self" alt="Updated Project Plan" title="Updated Project Plan" href="#updated-project-plan" coords="1473,4572,4201,4788" shape="rect">
<area target="_self" alt="Project Closure Preparation" title="Project Closure Preparation" href="#project-closure-preparation" coords="2180,7165,3703,7467" shape="rect">
<area target="_self" alt="End Project Report" title="End Project Report" href="#end-project-report" coords="1445,8004,2520,8247" shape="rect">
</map>
<div class="popup" id="project-brief">
An awesome pair of headphones!
<a class="close" href="javascript:void(0)" onclick="closePopup('project-brief')">X</a>
</div>
<div class="popup" id="initiation-stage-plan">
These are the peripherals: the keyboard and the mouse.
<a class="close" href="javascript:void(0)" onclick="closePopup('initiation-stage-plan')">X</a>
</div>
<div class="popup" id="pid">
This is my stationery: a notepad and a pen.
<a class="close" href="javascript:void(0)" onclick="closePopup('pid')">X</a>
</div>
<div class="popup" id="benefits-mgt-approach">
Benefits management approach content
<a class="close" href="javascript:void(0)" onclick="closePopup('benefits-mgt-approach')">X</a>
</div>
<div class="popup" id="work-package-definition">
Work package definition content
<a class="close" href="javascript:void(0)" onclick="closePopup('work-package-definition')">X</a>
</div>
<div class="popup" id="work-package-delivery">
Work package delivery content
<a class="close" href="javascript:void(0)" onclick="closePopup('work-package-delivery')">X</a>
</div>
<div class="popup" id="highlight-exception-report">
Highlight exception report content
<a class="close" href="javascript:void(0)" onclick="closePopup('highlight-exception-report')">X</a>
</div>
<div class="popup" id="end-stage-report">
End stage report content
<a class="close" href="javascript:void(0)" onclick="closePopup('end-stage-report')">X</a>
</div>
<div class="popup" id="updated-project-plan">
Updated project plan content
<a class="close" href="javascript:void(0)" onclick="closePopup('updated-project-plan')">X</a>
</div>
<div class="popup" id="project-closure-preparation">
Project closure preparation content
<a class="close" href="javascript:void(0)" onclick="closePopup('project-closure-preparation')">X</a>
</div>
<div class="popup" id="end-project-report">
End project report content
<a class="close" href="javascript:void(0)" onclick="closePopup('end-project-report')">X</a>
</div>
<script>
window.addEventListener('load', function() {
var img = document.querySelector('img[usemap]');
var originalWidth = 4266;
var areas = document.querySelectorAll('area');
function resizeMap() {
var currentWidth = img.offsetWidth;
var scale = currentWidth / originalWidth;
areas.forEach(function(area) {
var originalCoords = area.getAttribute('data-original-coords');
if (!originalCoords) {
originalCoords = area.getAttribute('coords');
area.setAttribute('data-original-coords', originalCoords);
}
var coords = originalCoords.split(',').map(function(coord) {
return Math.round(coord * scale);
});
area.setAttribute('coords', coords.join(','));
});
}
resizeMap();
window.addEventListener('resize', resizeMap);
});
function closePopup(popupId) {
window.location.hash = '';
history.replaceState(null, null, ' ');
}
</script>