Spotlight

Die Widgetkit Spotlight laat jou toe om ‘n overlay oor jou grafika te plaas wat vervaag of beweeg as jy jou muis daaroor hou.

Voorbeeld

As geen eie overlay gestel is, is die default spotlight soos bo beskryf.  Jy kan egter ook kies uit die volgende – fade, bottom, top, right en left.

Hoe om te gebruik

Gebruik die HTML5 custom data attribute data-spotlight om die spotlight te aktiveer.

<a data-spotlight="on" href="/mypage.html">
	<img src="/image.jpg" width="180" height="120" alt="" />
</a>

Om jou eie overlay te definieer, gebruik ‘n div element met die CSS class overlay. Jy kan die volgende parameters stel:

<a data-spotlight="effect:bottom;" href="/mypage.html">
	<img src="/image.jpg" width="180" height="120" alt="" />
	<div class="overlay">Custom Overlay</div>
</a>

Jy kan die parameter vir die effek stel na fade, bottom, top, right en left.