<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);
					}