CSS highlight-map-area.html | Javascript highlight-map-area.html | SVG highlight-map-area.html
Deze procedure is een schoolvoorbeeld van "progressive enhancement". In alle ultra-moderne browsers werkt deze svg-procedure (opera werkt er op dit moment nog aan...). Alle oude(re) browsers laten alleen een andere cursor zien (bij een hover), maar wat niet weet - wat niet deert... Het is plezierig dat eindelijk IE(9) een moderne browser begint te worden. Het werkt zowaar!
Deze procedure gebruikt SVG om rect(angle), circle en poly's te maken. Dit betekent dat er geen javascript of "dikke" style-sheets nodig zijn. Eigenlijk bestaat de procedure alleen maar uit een paar "html-regeltjes" met wat "inline" CSS en "SVG-statements". De code hieronder stelt dus (qua grootte) geheel niets voor... Plaats deze code (ergens in de body-sectie) op jouw pagina, en pas alles dusdanig aan dat je een soepel werkende procedure er aan over houdt.
<div style="height:410px">
<div style="position:absolute;z-index:-1">
<img class="highlight_map_area" src="/javascripts/image-effects/highlight-map-area.jpg" usemap="#highlight-map-area" width="273" height="390" alt="" />
</div>
<map name="highlight-map-area">
<area href="/manuals/html5/svg.html" shape="circle" coords="115,49,40" />
<area href="/manuals/html5/svg.html" shape="rect" coords="153,0,229,176" />
<area href="/manuals/html5/svg.html" shape="poly" coords="157,235,250,232,247,333,138,336,139,302,162,263" />
<area href="/manuals/html5/svg.html" shape="poly" coords="38,237,122,236,120,300,114,316,94,340,43,342" />
</map>
<svg width="273px" height="390px" xmlns="http://www.w3.org/2000/svg">
<a xlink:href="/manuals/html5/svg.html">
<circle cx="115" cy="49" r="40"
fill="transparent" fill-opacity="0.2"
onmouseover="evt.target.setAttribute('fill', 'red');"
onmouseout="evt.target.setAttribute('fill','transparent');">
</circle>
</a>
<a xlink:href="/manuals/html5/svg.html">
<rect x="153" y="0" width="78" height="176"
fill="transparent" fill-opacity="0.2"
onmouseover="evt.target.setAttribute('fill', 'red');"
onmouseout="evt.target.setAttribute('fill','transparent');">
</rect>
</a>
<a xlink:href="/manuals/html5/svg.html">
<polyline points=" 157,235 250,232 247,333 138,336 139,302 162,263"
fill="transparent" fill-opacity="0.2"
onmouseover="evt.target.setAttribute('fill', 'red');"
onmouseout="evt.target.setAttribute('fill','transparent');">
</polyline>
</a>
<a xlink:href="/manuals/html5/svg.html">
<polyline points=" 38,237 122,236 120,300 114,316 94,340 43,342"
fill="transparent" fill-opacity="0.2"
onmouseover="evt.target.setAttribute('fill', 'red');"
onmouseout="evt.target.setAttribute('fill','transparent');">
</polyline>
</a>
</svg>
</div>