DHTML - Rand rond figuur bij rollover
|
Het kan grafisch aantrekkelijk zijn om een rand te laten verschijnen rond een
figuur wanneer je er met de muisaanwijzer overheen gaat. Een nuttige toepassing
hiervoor is bijvoorbeeld een afbeeldingengalerij met thumbnails.
De verschillende toestanden
De afbeelding kan gewoon getoond worden, er kan over bewogen worden met de muisaanwijzer en er kan op de afbeelding geklikt worden. Dit zijn de verschillende toestanden die we zullen moeten voorzien.
Tussen <head> en </head> plaats je volgende
code:
<script type="text/javascript">
function mo(o){o.className=='stateoff'?o.className='stateon': o.className=o.className;
}
function mx(o){o.className=='stateon'?o.className='stateoff': o.className=o.className;
}
function mc(o){o.className='stateclicked'; }
</script>
<style type="text/css">
.stateon{ FILTER: alpha; border: 1px #EED38C solid; }
.stateoff{ border: 1px #342D1E solid; }
.stateclicked{ border: 1px #EED38C solid; FILTER: alpha(Opacity=85); }
</style>
Deze code bestaat uit een JavaScriptgedeelte en een opmaakgedeelte in CSS.
Het JavaScriptgedeelte laat je best intact; het CSS-gedeelte mag je aanpassen
naar jouw keuze, zolang je maar het kenmerk FILTER ongewijzigd
laat staan.
Toepassen op de afbeelding
Daarna pas je de code van je afbeelding als volgt aan:
<img style="width: 558px; height: 351px;" alt="zomercollectie"
class="stateoff" onmouseover="mo(this);
window.status='Klik hier om de grote afbeelding te zien';
return true;" onmouseout="mx(this);" onclick="mc(this);"
src="afbeelding23.jpg"> |
Ontwerp je site