Er is geen CSS ondersteuning.
Volgens sommige "experts" in het bouwen van websites kan je alleen maar rechthoeken en vierkantjes gebruiken om gedeelten van plaatjes te "highlighten". Het is natuurlijk niet erg als je dom bent, maar doe dan niet zo uit de hoogte als je een normale vraag van een webmaster krijgt aangaande een highlight-effect met cirkeltjes (de brave man in kwestie werd volkomen "afgezeken" door de "guru's" op het desbetreffende forum). Daarom op de dns5 deze procedure die wat doorzichtige cirkeltjes op een plaatje "plakt".
Ik ga er verder niet ingewikkeld over doen. De procedure zet ik hieronder. Gewoon de hele pagina. Kopieer de broncode naar jouw website en verander de code om die op jouw website een goede bestemming te geven. Met al die IE-code valideert de CSS natuurlijk van geen kanten, maar de html(5)-validator staat helemaal in het groen...
<!--[if IE]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v">
<![endif]-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>highlight circle image</title>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<![endif]-->
<meta name='keywords' content="highlight,circle,image" />
<meta name='description' content="met alleen maar CSS kan je onderdelen van een plaatje 'highlighten'." />
<meta name="language" content="nederlands">
<style type="text/css" media="screen">
v\: * { behavior:url(#default#VML);display:inline-block}
.afbeelding{
margin-left:100px;
position:relative;
width:300px;
height:386px;
background-image:url('DE-NAAM-VAN-JOUW-PLAATJE.jpg')}
#positie-1{
position:absolute;
top:15px;
left:15px}
#positie-2{
position:absolute;
top:280px;
left:90px}
.highlight-cirkel,.highlight-circle{
width:90px;
height:90px;
opacity:0.2;
filter:alpha(opacity=20)}
.highlight-circle{
display:block;
color:#000;
background:#fff;
-moz-border-radius:65px;
-webkit-border-radius:65px;
border-radius:65px}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
v\: * { behavior:url(#default#VML);display:inline-block}
.highlight-circle{color:inherit;background:transparent}
body{margin:8px 8px 80px 8px}
</style>
<![endif]-->
</head>
<body>
<div class="afbeelding">
<div id="positie-1">
<em><span class='highlight-circle' >
<!--[if IE]>
<v:roundrect class="highlight-cirkel" fillcolor="#fff" arcsize="50%"></v:roundrect>
<![endif]-->
</span></em>
</div>
<div id="positie-2">
<span class='highlight-circle' >
<!--[if IE]>
<v:roundrect class="highlight-cirkel" fillcolor="#fff" arcsize="50%"></v:roundrect>
<![endif]-->
</span>
</div>
</div>
<script type="text/javascript">
var detaglengte,detagstyle,detag,i,x0=0.005,x1=0.005,y1=0.005,x2=0.55,y2=0.24,x3=9.6,y3=0.24,x4=50,y4=10,x5=50,y5=1,start;
detag=document.getElementsByTagName("em");
detaglengte=detag.length;
function animeerHet(){
for(i=0; i-detaglengte; i++){
detagstyle=detag[i].style; detagstyle.position='absolute';
detagstyle.left=(Math.sin(x0*x1+i*x2+x3)*x4+x5)+"px";
detagstyle.top=(Math.cos(x0*y1+i*y2+y3)*y4+y5)+"px";
}
x0++;}
setInterval(function(){animeerHet();},1);
</script>
</body>
</html>
Ondanks dat er een stukje javascript in de procedure zit, staat dit voorbeeld toch in de CSS-sectie. Om de transparante cirkeltjes op een pagina te zetten heb je geen javascript nodig. Het scriptje staat er alleen maar om de pagina wat minder saai te maken.
cache 02-02-2011