Désintégration d'une image
Ce script permet de faire "exploser" une image en cliquant dessus.
Exemple
Cliquez ici pour voir l'exemple !
- Le code
Entre <HEAD> et </HEAD>
<SCRIPT>
// © http://developpement.west-indie.org
var imgwidth=141 // LARGEUR DE L'IMAGE
var imgheight=106 // HAUTEUR DE L'IMAGE
var imgurl="01.jpg" // MODIFIEZ ICI VOTRE IMAGE
var redirurl="#" // URL DE REDIRECTION APRES CLIC
var x_finalpos=500 // DISTANCE DU BORD GAUCHE DE L'ECRAN
var y_finalpos=200 // DISTANCE DU HAUT DE L'ECRAN
var x_slices=8 // NOMBRE DE PIECES
var y_slices=5 // NOMBRE DE PIECES
var pause=10
var marginright
var width_slice=Math.floor(imgwidth/x_slices)
var height_slice=Math.floor(imgheight/y_slices)
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var x_random=new Array()
var y_random=new Array()
var max_explsteps=15
var i_explsteps=0
function initiate() {
spancounter=0
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
x_random[spancounter]=Math.ceil(240*Math.random())-120
y_random[spancounter]=Math.ceil(240*Math.random())-120
spancounter++
}}}
function explode_IE() {
spancounter=0
if (i_explsteps<=max_explsteps) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
thisspan.posLeft+=x_random[spancounter]
thisspan.posTop+=y_random[spancounter]
spancounter++
}}
i_explsteps++
var timer=setTimeout("explode_IE()",pause)
}
else {
spancounter=0
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
thisspan.posLeft=-5000
spancounter++
}}
clearTimeout(timer)
window.location=redirurl
}}
</script>
Dans la balise <BODY>
onload="initiate()"
Entre <BODY> et </BODY>
<script>
// © Web-O-Concept.com
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
marginright=screen.width+50
document.write("<span id='span"+spancounter+"' style='position:absolute;visibility:visible;
left:"+x_finalpos+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px
"+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")
document.write("<a href='javascript:explode_IE()'>")
document.write("<img src='"+imgurl+"' border='0' width='"+imgwidth+"'
height='"+imgheight+"'><BR>")
document.write("</a>")
document.write("</span>")
clipleft+=width_slice
clipright+=width_slice
spancounter++
}
clipleft=0
clipright=width_slice
cliptop+=height_slice
clipbottom+=height_slice
}
</script>
