Er is geen CSS ondersteuning.
De titel van deze pagina is highlight map area. Excuses! Ik wist gewoon geen andere manier
om deze procedure bij jou te brengen. Als ik deze pagina "afbeelding gedeeltelijk highlighten"
had genoemd was hij gegarandeerd door google dusdanig geindexeerd dat niemand hem zou kunnen
vinden...
De reden van deze pagina is dat ik met "gekrulde tenen" de "oplossingen" van ultra-domme
scripters heb zitten bekijken, die met loodzware libraries en "tonnen" html en scripts het
nog niet voor elkaar kunnen krijgen om overlappende area's op een plaatje van links
(en signalering) te voorzien. En dat terwijl het echt heel makkelijk te doen is (met alleen maar
CSS en zonder een snippertje javascript).
Ga met je muis maar over het plaatje, en zie wat er gebeurt.
Voordat ik de CSS van de highlight-map-area geef, zal ik even uitleggen hoe je alles kan instellen: .highlight-area-1 (de class) bevat de coordinaten van het beginpunt van de "highlight-area" (top en left), en de "width" en "height" bepalen de afmeting van de area. De afbeelding die je wilt gebruiken staat in de class "afbeelding" als background-image. Waar het plaatje op het scherm moet verschijnen plaats je de div met de class "afbeelding". Daarna voeg je in de div zoveel "a-tags" toe als je hebt aangemaakt in de css.
<style type="text/css" media="screen">
.afbeelding {
margin-left:100px;
position:relative;
width:480px;
height:360px;
background-image:url(http://static.dns5.nl/image-map.jpg)}
.deel-plaatje{
position:absolute;
background:transparent}
.highlight-area-1{top:250px;left:75px;width:280px;height:100px}
.highlight-area-2{top:5px;left:5px;width:80px;height:280px}
.highlight-area-3{top:5px;left:160px;width:180px;height:80px}
.highlight-area-4{top:285px;left:5px;width:80px;height:70px}
.highlight-area-5{top:265px;left:85px;width:70px;height:80px}
.highlight-area-6{top:75px;left:265px;width:110px;height:280px}
.highlight-area-7{top:135px;left:95px;width:80px;height:70px}
.highlight-area-8{top:5px;left:395px;width:70px;height:340px}
.deel-plaatje:hover{
color:#000;
background-color:#f00;
opacity:0.3;
filter:alpha(opacity=30);
border:solid #a00 4px}
</style>
Hieronder plaats ik nog de html-code voor de body. Plaats de div op de plaats waar je de (ge)highlight(e) map area wilt hebben. De code valideert volkomen html5.
<div class="afbeelding"> <a class="deel-plaatje highlight-area-1" href="http://www.dns5.nl/css/highlight-map-area.html" rel="nofollow"></a> <a class="deel-plaatje highlight-area-2" href="http://www.dns5.nl/css/highlight-map-area.html" rel="nofollow"></a> <a class="deel-plaatje highlight-area-3" href="http://www.dns5.nl/css/highlight-map-area.html" rel="nofollow"></a> <a class="deel-plaatje highlight-area-4" href="http://www.dns5.nl/css/highlight-map-area.html" rel="nofollow"></a> <a class="deel-plaatje highlight-area-5" href="http://www.dns5.nl/css/highlight-map-area.html" rel="nofollow"></a> <a class="deel-plaatje highlight-area-6" href="http://www.dns5.nl/css/highlight-map-area.html" rel="nofollow"></a> <a class="deel-plaatje highlight-area-7" href="http://www.dns5.nl/css/highlight-map-area.html" rel="nofollow"></a> <a class="deel-plaatje highlight-area-8" href="http://www.dns5.nl/css/highlight-map-area.html" rel="nofollow"></a> </div>
cache 25-01-2011