KOMPOOS.NL

watermark CSS

home » css » image-effects » watermark.html

php/image-effects/watermark/watermark.html | css/image-effects/watermark.html

voorbeeld watermark javascript procedure

uitleg watermark over een image

Deze watermark procedure werkt dan wel prima met een gedegen stylesheet; de echte bedoeling van een watermark is dat de afbeelding "beschermd" wordt. Omdat je met de rechtermuisknop het plaatje niet kan kopiëren, wil dat nog niet zeggen dat het plaatje beschermd is. Integendeel. Ongeveer elke browser kan het plaatje, zonder het watermerk, tevoorschijn "toveren". Als het is om de "snelle jongens" een beetje af te remmen, met het kopiëren, is deze stylesheet bruikbaar. Als je echte beveiliging wilt toepassen raad ik je aan om de php-watermark-procedure te gebruiken. Gebruik de html voorbeeld regels om een afbeelding ergens in de broncode van de body-sectie te plaatsen, en plaats de stylesheet in de head-sectie van de pagina. De procedure is, zoals alle voorbeelden op de kompoos.nl, cross browser.

html-code watermark procedure


<p class="watermark">
	<a href="http://kompoos.nl/css/image-effects/watermark.html"><img width="200" height="225" src="watermark.jpg" alt="watermerk voorbeeld" />
	<span class="watermark_inner">watermark</span></a>
</p>
<p class="clear_watermark"></p>

stylesheet watermerk procedure


<style type="text/css">
	.watermark{
		overflow:hidden;
		float:left;
		position:relative}
	.watermark a{
		cursor: pointer;
		font-size:2em;
		text-decoration:none}
	.watermark a img{
		border:none}
	.watermark a .watermark_inner{
		display:inline-block;
		width:100%;
		height:100%;
		color:#000;
		background:#ddd;
		filter:alpha(opacity=20);
		opacity:0.2;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
		position:absolute;
		top:0px;	
		left:0px;
		text-align:center;
		font-size:1em}
	.watermark a:hover .watermark_inner:hover{
		filter:alpha(opacity=0);
		opacity:.0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
	.clear_watermark{
		clear:both}
</style>