<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="code.xsl" ?>
<dns4.nl>
<voorbeeld>
<title>CSS sprites - CSS code en een voorbeeld-link</title>
<verwijzende_link>http://www.dns4.nl/pagina/css_code/css_sprites_inline_plaatjes.html</verwijzende_link>
<informatie>


</informatie>
<programma_code>
<![CDATA[
<!-- de code begint vanaf hier.


	<style type="text/css">
		.links{float:left;display:block;height:75px;width:75px;}
		.rechts{float:right;display:block;height:75px;width:75px;}
		.rij_1_plaatje_1{background:url(de_sprites.png) no-repeat 0px 0px;}
		.rij_1_plaatje_2{background:url(de_sprites.png) no-repeat -75px 0px;}
		.rij_1_plaatje_3{background:url(de_sprites.png) no-repeat -150px 0px;}
		.rij_1_plaatje_4{background:url(de_sprites.png) no-repeat -225px 0px;}
		.rij_2_plaatje_1{background:url(de_sprites.png) no-repeat 0px -75px;}
		.rij_2_plaatje_2{background:url(de_sprites.png) no-repeat -75px -75px;}
		.rij_2_plaatje_3{background:url(de_sprites.png) no-repeat -150px -75px;}
		.rij_2_plaatje_4{background:url(de_sprites.png) no-repeat -225px -75px;}
		.rij_3_plaatje_1{background:url(de_sprites.png) no-repeat 0px -150px;}
		.rij_3_plaatje_2{background:url(de_sprites.png) no-repeat -75px -150px;}
		.rij_3_plaatje_3{background:url(de_sprites.png) no-repeat -150px -150px;}
		.rij_3_plaatje_4{background:url(de_sprites.png) no-repeat -225px -150px;}
		.rij_4_plaatje_1{background:url(de_sprites.png) no-repeat 0px -225px;}
		.rij_4_plaatje_2{background:url(de_sprites.png) no-repeat -75px -225px;}
		.rij_4_plaatje_3{background:url(de_sprites.png) no-repeat -150px -225px;}
		.rij_4_plaatje_4{background:url(de_sprites.png) no-repeat -225px -225px;}
		.rij_5_plaatje_1{background:url(de_sprites.png) no-repeat 0px -300px;}
		.rij_5_plaatje_2{background:url(de_sprites.png) no-repeat -75px -300px;}
		.rij_5_plaatje_3{background:url(de_sprites.png) no-repeat -150px -300px;}
		.rij_5_plaatje_4{background:url(de_sprites.png) no-repeat -225px -300px;}

		.rij_1_plaatje_1:hover{background:url(de_sprites.png) no-repeat -225px -0px;}
		.rij_1_plaatje_2:hover{background:url(de_sprites.png) no-repeat -0px -75px;}
		.rij_1_plaatje_3:hover{background:url(de_sprites.png) no-repeat -75px -0px;}
		.rij_1_plaatje_4:hover{background:url(de_sprites.png) no-repeat -0px -0px;}
		.rij_2_plaatje_1:hover{background:url(de_sprites.png) no-repeat -225px -75px;}
		.rij_2_plaatje_2:hover{background:url(de_sprites.png) no-repeat -150px -75px;}
		.rij_2_plaatje_3:hover{background:url(de_sprites.png) no-repeat -75px -75px;}
		.rij_2_plaatje_4:hover{background:url(de_sprites.png) no-repeat -0px -75px;}
		.rij_3_plaatje_1:hover{background:url(de_sprites.png) no-repeat -225px -150px;}
		.rij_3_plaatje_2:hover{background:url(de_sprites.png) no-repeat -150px -150px;}
		.rij_3_plaatje_3:hover{background:url(de_sprites.png) no-repeat -75px -150px;}
		.rij_3_plaatje_4:hover{background:url(de_sprites.png) no-repeat -0px -150px;}
		.rij_4_plaatje_1:hover{background:url(de_sprites.png) no-repeat -225px -225px;}
		.rij_4_plaatje_2:hover{background:url(de_sprites.png) no-repeat -150px -225px;}
		.rij_4_plaatje_3:hover{background:url(de_sprites.png) no-repeat -75px -225px;}
		.rij_4_plaatje_4:hover{background:url(de_sprites.png) no-repeat -0px -225px;}
		.rij_5_plaatje_1:hover{background:url(de_sprites.png) no-repeat -225px -300px;}
		.rij_5_plaatje_2:hover{background:url(de_sprites.png) no-repeat -150px -300px;}
		.rij_5_plaatje_3:hover{background:url(de_sprites.png) no-repeat -75px -300px;}
		.rij_5_plaatje_4:hover{background:url(de_sprites.png) no-repeat -0px -300px;}
	</style>


	*** VOORBEELD LINK ***
	<a href="#" rel="nofollow"><span class="links rij_1_plaatje_1"></span></a>



de code is hier geeindigd.
// -->
]]>
</programma_code>
<code_link>http://www.dns4.nl/pagina/alle_tekst_files.html</code_link>
</voorbeeld>
</dns4.nl>
