photo en tranches javascript - Tout pour le Javascript aux 1001 Astuces Nam@ni

1001 Astuces Nam@ni
http://www.namani.net
Découvrir la photo

...en tranches !

Bouger la souris ...lentement !

Placer après le tag <body>

<script>
<!-- 
// largeur, puis hauteur, de l'image
var imgwidth=274
var imgheight=244

// largeur des tranches
var imgslices=24

// URL de la photo
var imgurl="image.gif"

var width_slice=Math.ceil(imgwidth/imgslices)
var cliptop=0
var clipbottom=imgheight
var clipleft=0
var clipright=width_slice
var postop=0
var thispos=0
var x,y
var flag=0
var box
function handlerMM(e){
	x = event.clientX
	y = event.clientY
	flag=1
}
if (document.all) {
	document.onmousemove = handlerMM;
}
var xpos=new Array()
for (i=0;i<=imgslices;i++) {
	xpos[i]=-imgwidth
}
var ypos=new Array()
for (i=0;i<=imgslices;i++) {
	ypos[i]=-imgheight
}
function initiateworm() {
	if (document.all) {makeworm()}
}// http://www.namani.net
function makeworm() {
	if (flag==1) {
    	for (i=imgslices; i>=0; i--) {
			thispos=width_slice
   			xpos[i]=xpos[i-1]-thispos
			ypos[i]=ypos[i-1]
    	}
		xpos[0]=x
		ypos[0]=y
		thispos=0
		for (i=0; i<imgslices; i++) {
    		var thisspan = eval("document.all.span"+(i)+".style")
    		thisspan.posLeft=xpos[i]
			thisspan.posTop=ypos[i]
    	}
	}
	var timer=setTimeout("makeworm()",10)
}
document.write('<body bgcolor=#000000 onLoad=initiateworm()>')
for (i=0;i<=imgslices-1;i++) {
    document.write("<span id='span"+i+"' style='position:absolute;visibility:visible;left:"+(-imgheight)+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")
	document.write("<img src="+imgurl+">")
    document.write("</span>")
	clipleft+=width_slice
	clipright+=width_slice
}
// http://www.namani.net -->
</script>