Salut!
Je me suis penché sur ton problème (je suis trop bon, ça me perdra ;-) ) et je t'ai écrit le script.
tu peux l'utiliser et le dsitribuer à ta guise pour autant que les commentaires restent dans le script.
<html>
<head>
<title>Démo de frise d'image déroulantes - HackTrack 10/02/2007</title>
<script language="javascript" type="text/javascript">
/**
* AnimatedImage
*
* Author: HackTrack (Philippe FERY - philippe.fery@gmail.com)
*
* Date : 10/02/2007
*
* Version 1.0
*
* This script allows you to display a repeated image on the screen width, inside a DOM element.
*
* To use it, just call function 'startAnimation' with parameters (see function 'startAnimation')
*
* TO DO: snap first and last image in order not to see horizontal scrollbar moving
* */
var animatedImage; // image to be animated
var stepX; // number of pixels to move image between each move
var dx; //temporary variable used to calculate the current image offset
var delay; //delay between two moves (in milliseconds)
var imageWidth; //the image width
var imageHeight; //the image height(not used at now)
var width; //window inner width
var height; //window inner height (not used at now)
var domElement; //the DOM element where images have to be displayed
var innerDOMElement;//a temporary DIV element used to display images inside the domElement
/**
* Function :
* name: runAnimation
* description: endless loops image animation
* Parameters: none
*/
function runAnimation(){
dx+=stepX;
dx=parseInt(dx%imageWidth);
width = parseInt(domElement.style.width);
height = domElement.offsetHeight;
var imageCount = parseInt(width/imageWidth)+3;
domElement.style.overflow="hidden";
innerDOMElement.style.width=imageCount*imageWidth;
if(innerDOMElement.children != null){
while(innerDOMElement.children.length>0){
var elm =innerDOMElement.children[0];
innerDOMElement.removeChild(elm);
elm=null;
}
}
var tmpImage;
for(i=0; i<imageCount ; i++){
tmpImage = new Image();
tmpImage.src=animatedImage.src;
tmpImage.style.position="relative";
tmpImage.style.top="0px";
imageLeft=imageWidth*-1;
tmpImage.style.left=imageLeft+"px";
innerDOMElement.appendChild(tmpImage);
}
innerDOMElement.style.position="relative";
innerDOMElement.style.left=dx;
setTimeout("runAnimation()",delay);
}
/**
* Function :
* name: startAnimation
* description: initializes animation then starts it
* Parameters:
* targetElementName: the DOM element where the images have to be displayed
* imageURL: image location
* step: the number of pixels the image will be moved each time (positive value=move right; neagtive value=move left)
* delayInMillis: the delay in milliseconds between each move
*/
function startAnimation(targetElementName, imageURL, step, delayInMillis){
animatedImage= new Image();
animatedImage.src=imageURL;
imageWidth=animatedImage.width;
imageHeight=animatedImage.height;
domElement=document.getElementsByName(targetElementName)[0];
stepX = step;
delay = delayInMillis;
dx=0;
innerDOMElement=document.createElement('div');
domElement.appendChild(innerDOMElement);
runAnimation();
}
</script>
</head>
<!--body onload="startAnimation('frise','file://F:/testBG_mini.jpg',-20,10);"-->
<body onload="startAnimation('frise','file://F:/heartbeat.gif',-1,20);">
<p>Demo de défilement d'images - HackTrack 12/02/2007</p>
<div id="frise" name="frise" style="border: solid 1px black;width:1024;">
</div>
;-)
HackTrack
</body>
</html>
;-)
HackTrack
