|
|
|
|
Recherche [balise] pour frise HTML
Dernière réponse le 5 jui 2008 à 19:21:20 Laurent, le 4 fév 2007 à 19:08:18Bonjour,
Mon problème dans une page HTML est que je n'arrive pas à faire défiler une frise à l'infini.
Je m'explique : j'ai une image rectangulaire que je voudrais faire défiler non stop vers la gauche ou vers la droite sans qu'il n'y ait jamais d'espace, même si elle doit être repétée un certain nombre de fois par page. J'ai trouvé des balises pour faire défiler l'image comme une voiture, mais je voudrais plutôt faire défiler l'image comme une route (j'espère me faire comprendre).
Comment faire ?
Merci beaucoup.
Configuration: Windows XP Firefox 2.0.0.1
Salut.
#img_route{
background:url(route.jpg) repeat-x;
}
Sylvain
"Join us now, and share the software. You'll be Free, hackers." |
Merci, mais je n'utilise jamais le CCS. Donc, mettre cette propriété seule ne fonctionne pas ! Que dois-je mettre d'autre pour que cette propriété fonctionne ?
|
Salut.
<html>
<head>
<style type="text/css">
#frise{background:url(adresse de ton image) repeat-x;}
</style>
<title>Une frise</title>
</head>
<body id="frise">
</body>
</html>J'ai fait ceci et ca marche :
http://ssylvainsab.free.fr/CCM/FORUMS/image-repetee-frise.html Sylvain "Join us now, and share the software. You'll be Free, hackers." |
Salut!
<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 |
Waow...
|
Tu peux me donner un exemple de ta dernière astuce, Sylvain ? Merci !
|
"je suis chiant"
#image_1{background:...;height:hauteur de l'image en pixelspx}
Pour les setInterval et autres, désolé, je suis nul en JavaScript. Je sais (pense) juste qu'on peut faire ce que tu veux avec ca. Quelques recherches : http://www.google.fr/search?q=setinterval+js http://www.google.fr/search?q=defiler+image+javascript http://www.google.fr/search?q=repeter+action+interval http://www.google.fr/search?q=repeter+action+javascript Sylvain "Join us now, and share the software. You'll be Free, hackers." |
Le code de dimension ne fonctionne pas chez moi ! Et j'ai aussi essayé d'additionner les frises (126 pixels, 252 px, 378 et 604) : il n'affiche que la dernière si je n'ajoute pas de <P> </P> !
|
