<div id="container"> <div id="cssimagemap"> <img src="images/imagemap-demo.png" alt="demo imagemapafbeelding" /> <a id="lnk1" href="https://joomlaheerenveen.nl" target="_blank" title="Naar joomlaheerenveen.nl" > </a> <a id="lnk2" href="https://cursus.joomlaheerenveen.nl" target="_blank" title="Naar cursus.joomlaheerenveen.nl" > </a> <a id="lnk3" href="https://forum.joomlaheerenveen.nl" target="_blank" title="Naar forum.joomlaheerenveen.nl" > </a> </div> </div>
/* Algemene CSS voor deze pagina zelf is hieronder niet opgenomen! Bekijk daarvoor de broncode van algemeen.css in de browser! */ /* CSS voor #container: centreren en maximale breedte */ #container{ margin: auto; max-width: 800px; } /* CSS voor CSS-imagemap onderdelen */ #cssimagemap{ position: relative; line-height: 0; } #cssimagemap img{ max-width: 100%; height: auto; } #cssimagemap a{ display: block; border: 1px dotted #ccc; position: absolute; } #cssimagemap a:hover{ border: 1px solid #fff; } a#lnk1{ width : calc(97 / (800 / 100) * 1%); height: calc(70 / (400 / 100) * 1%); left : calc(10 / (800 / 100) * 1%); top : calc(200 / (400 / 100) * 1%); border-radius: 10%; } a#lnk2{ width : calc(121 / (800 / 100) * 1%); height: calc(101 / (400 / 100) * 1%); left : calc(268 / (800 / 100) * 1%); top : calc(198 / (400 / 100) * 1%); border-radius: 50%; } a#lnk3{ width : calc(97 / (800 / 100) * 1%); height: calc(146 / (400 / 100) * 1%); left : calc(684 / (800 / 100) * 1%); top : calc(181 / (400 / 100) * 1%); border-radius: 20px 50% 0 50%; transform: rotate(48deg); }