<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;
						position: absolute;
						border: 1px dotted #ccc;
					}
					#cssimagemap a:hover{
						border: 1px solid #fff;
					}
					a#lnk1{
						width : 0px;
						height: 0px;
						left  : 0px;
						top   : 0px;
					}
					a#lnk2{
						width : 0px;
						height: 0px;
						left  : 0px;
						top   : 0px;
					}
					a#lnk3{
						width : 0px;
						height: 0px;
						left  : 0px;
						top   : 0px;
					}
				

					bhs = breedte  hotspot
					hhs = hoogte hotspot
					xhs = x coördinaat linker bovenhoek hotspot
					yhs = y coördinaat linker bovenhoek hotspot
					bab = breedte afbeelding
					hab = hoogte afbeelding

					a#lnk1{
						width : calc(bhs / (bab / 100) * 1%);
						height: calc(hhs / (hab / 100) * 1%);
						left  : calc(xhs / (bab / 100) * 1%);
						top   : calc(yhs / (hab / 100) * 1%);
					}