Er is geen CSS ondersteuning.
Soms denk ik dat ik volslagen gek ben en de rest van de wereld geheel normaal is...
Bij nader inzien valt dat toch wel mee.
Ik vond een crop-procedure "gestoeld" op "mootools" die zelfs nog iets minder "deed"
dan de crop-procedure (css) die op deze pagina staat. Hoe kan iemand met gezond verstand
nu een pagina "kreupel" maken met een ongezonde hoeveelheid javascript, terwijl je
met een paar "kruimeltjes" CSS het beter voor elkaar kan krijgen. Dit nog buiten
het feit dat als een bezoeker javascript niet ingeschakeld heeft staan, die hele mootools-meuk
nog geeneens zal werken... Sorry voor het gemopper (jullie zijn dat al gewend van mij, denk ik..)
De css-crop stelt natuurlijk ook niets voor, maar voor de liefhebber hieronder even de paar regeltjes CSS die je nodig hebt.
<style type="text/css">
.crop-positie{
position:relative;
margin-left:100px;
height:160px}
.crop-afmeting{
position:absolute;
clip:rect(200px 320px 340px 80px);
top:-200px;
left:-80px}
</style>
En de twee "cropjes" zet je op het scherm met de hieronderstaande html.
<div class="crop-positie"><div class="crop-afmeting"> <img src="http://static.dns5.nl/crop-1.jpg" /> </div></div> <div class="crop-positie"><div class="crop-afmeting"> <img src="http://static.dns5.nl/crop-2.jpg" /> </div></div>
Experimenteer met de waarden in de CSS om de juiste afmetingen en positie van jouw images te bepalen (voor wat betreft de crop). De negative waarden in "crop-afmeting" dienen om de overbodige "crop-randen" te elimineren. Ze moeten gelijk zijn aan de waarden in de "clip:rect".
Nog even een kleine toevoeging:
Het stukje javascript wat op deze pagina is toegevoegd om de plaatjes
in te laden heeft niets te maken met de crop-procedure. Dat dient er
alleen maar voor om de pagina ultra-snel op het scherm te zetten. Je kan
het scriptje gewoon negeren.
cache 09-01-2011