Recherche [balise] pour frise HTML
Résolu/Fermé
A voir également:
- Recherche [balise] pour frise HTML
- Recherche musique - Guide
- Editeur html - Télécharger - HTML
- Google recherche par image - Guide
- Recherche automatique des chaînes ne fonctionne pas - Guide
- Espace en html - Astuces et Solutions
44 réponses
Utilisateur anonyme
10 févr. 2007 à 10:50
10 févr. 2007 à 10:50
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.
;-)
HackTrack
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
plop!
Messages postés
54
Date d'inscription
jeudi 1 février 2007
Statut
Membre
Dernière intervention
16 mai 2007
27
4 févr. 2007 à 19:29
4 févr. 2007 à 19:29
Nan je ne te compreds pas, mais alors pas du tout. Faire défiler ? Des espaces ? Pourquoi répétée ?? Une voiture ? Une route ?
Tu fais un dessin animé ?
Tu fais un dessin animé ?
Oui. C'est faire défiler l'image mais qu'il n'y ait pas d'extremité à la frise. L'image doit bien sûr repasser...
C'est comme un ruban dont les deux extrémités sont nouées ensemble : il n'y a plus d'extrémité, mais on peut faire défiler l'image qui est dessus.
C'est comme un ruban dont les deux extrémités sont nouées ensemble : il n'y a plus d'extrémité, mais on peut faire défiler l'image qui est dessus.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
4 févr. 2007 à 21:55
4 févr. 2007 à 21:55
Salut.
Si je comprends bien, tu veux mettre une image répetée en arrière plan.
C'est possible en CSS, avec la propriété background :
ton_élément{background:url(url de ton image)}
Si tu veux répeter seulement sur la largeur, il faut ajouter "repeat-x", et si tu veux seulement sur la longueur, c'est "repeat-y".
Par exemple :
Si je comprends bien, tu veux mettre une image répetée en arrière plan.
C'est possible en CSS, avec la propriété background :
ton_élément{background:url(url de ton image)}
Si tu veux répeter seulement sur la largeur, il faut ajouter "repeat-x", et si tu veux seulement sur la longueur, c'est "repeat-y".
Par exemple :
#img_route{ background:url(route.jpg) repeat-x; }
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 ?
C'est pourtant simple : je veux faire défiler une frise sans que l'image se casse (s'en aille), même si elle revient par le bout par lequel elle a disparue ou par l'autre (parce que ce n'est pas une image infinie, évidemment). Je veux que la frise défile à l'infini (si l'on ne l'arrête pas ; une fonction pour la faire s'arrêter en plus serait géniale).
À la limite, je voudrais une frise immobile faisant toute la largeur (ou longeur) de la page, quelle que soit la résolution, avec une seule image.
C'est pourtant simple : je veux faire défiler une frise sans que l'image se casse (s'en aille), même si elle revient par le bout par lequel elle a disparue ou par l'autre (parce que ce n'est pas une image infinie, évidemment). Je veux que la frise défile à l'infini (si l'on ne l'arrête pas ; une fonction pour la faire s'arrêter en plus serait géniale).
À la limite, je voudrais une frise immobile faisant toute la largeur (ou longeur) de la page, quelle que soit la résolution, avec une seule image.
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
9 févr. 2007 à 19:22
9 févr. 2007 à 19:22
Salut.
Avec le CSS, tu peux faire exactement ce que tu veux.
(ou du moins ce que j'ai compris que tu voulais faire ;-) )
Essaye ce code dans un fichier .html :
http://ssylvainsab.free.fr/CCM/FORUMS/image-repetee-frise.html
Avec le CSS, tu peux faire exactement ce que tu veux.
(ou du moins ce que j'ai compris que tu voulais faire ;-) )
Essaye ce code dans un fichier .html :
<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
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
9 févr. 2007 à 22:53
9 févr. 2007 à 22:53
Oui, tu peux mettre en plein milieu de la page, en utilisant un autre élément que body pour pouvoir lui applicauer certaines marges, dimensions, etc.
"Faire défiler", c'est à dire faire bouger l'image ?
"Faire défiler", c'est à dire faire bouger l'image ?
Merci !
Le must pour moi serait une frise qui défile seulement pendant un certain temps (le temps d'un passage d'un son, de 2 ou 3 passages de l'image de la frise)...
Le must pour moi serait une frise qui défile seulement pendant un certain temps (le temps d'un passage d'un son, de 2 ou 3 passages de l'image de la frise)...
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
10 févr. 2007 à 14:26
10 févr. 2007 à 14:26
Waow...
Bravo HackTrack :-)
Pour faire défiler pendant un cetain temps, tu peux utiliser setInterval je pense.
Ca permet de répéter une action toutes les x secondes.
Ensuite, utilises clearInterval pour terminer le défilement.
Je n'en sais pas plus, tu devras te renseigner ;-)
Bravo HackTrack :-)
Pour faire défiler pendant un cetain temps, tu peux utiliser setInterval je pense.
Ca permet de répéter une action toutes les x secondes.
Ensuite, utilises clearInterval pour terminer le défilement.
Je n'en sais pas plus, tu devras te renseigner ;-)
Tu peux me donner un exemple de ta dernière astuce, Sylvain ? Merci !
Voilà ce que je veux faire défiler à l'infini (pas périodiquement) : http://quedza.lorenzo.free.fr/ .
Celui qui me parle de la balise <MARQUEE>, je le mords.
D'ailleurs, avec cette balise, on ne peut faire défiler que périodiquement un message ou une image, que ce soit IE ou Firefox (en plus, la balise n'est destinée qu'à IE, ça merde sur Firefox, quelle merde). Balistons cette balise ! lol
Voilà ce que je veux faire défiler à l'infini (pas périodiquement) : http://quedza.lorenzo.free.fr/ .
Celui qui me parle de la balise <MARQUEE>, je le mords.
D'ailleurs, avec cette balise, on ne peut faire défiler que périodiquement un message ou une image, que ce soit IE ou Firefox (en plus, la balise n'est destinée qu'à IE, ça merde sur Firefox, quelle merde). Balistons cette balise ! lol
C'est que je tiens à la simplicité, aux codes simples et courts, facile à comprendre, et j'aime pas trop les "bordels"... Oui je sais, chuis chiant.
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
11 févr. 2007 à 11:30
11 févr. 2007 à 11:30
"je suis chiant"
Non, tu as raison.
Par contre, les "<P ALIGN="CENTER"> </P>" et les div pas refermés ne vont pas trop avec ce que tu as dit...
A la place des "<P ALIGN="CENTER"> </P>", utilises des dimensions pour tes blocs divs :
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 :
https://www.google.fr/search?q=setinterval+js&gws_rd=ssl
https://www.google.fr/search?q=defiler+image+javascript&gws_rd=ssl
https://www.google.fr/search?q=repeter+action+interval&gws_rd=ssl
https://www.google.fr/search?q=repeter+action+javascript&gws_rd=ssl
Non, tu as raison.
Par contre, les "<P ALIGN="CENTER"> </P>" et les div pas refermés ne vont pas trop avec ce que tu as dit...
A la place des "<P ALIGN="CENTER"> </P>", utilises des dimensions pour tes blocs divs :
#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 :
https://www.google.fr/search?q=setinterval+js&gws_rd=ssl
https://www.google.fr/search?q=defiler+image+javascript&gws_rd=ssl
https://www.google.fr/search?q=repeter+action+interval&gws_rd=ssl
https://www.google.fr/search?q=repeter+action+javascript&gws_rd=ssl
J'ai cru me faire comprendre que je suis un être simple... Sorry. C'est vrai, c'est plus propre, mais c'est la première fois que j'utilise ces codes ! Et donc, ne connaissant pas le code de dimension...
Merci !
Merci !
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> !
Tu as peut-être fait une faute dans ce que tu m'as donné ?...
Regarde à http://quedza.lorenzo.free.fr !
Tu as peut-être fait une faute dans ce que tu m'as donné ?...
Regarde à http://quedza.lorenzo.free.fr !
Si je n'ajoute pas de "
Sinon, j'ai cru que toutes les frises s'étaient superposées, c'est pour cela que j'ai cru qu'il fallait au moins les additionner.
<P ALIGN="CENTER"> </P>", je voulais écrire...
Sinon, j'ai cru que toutes les frises s'étaient superposées, c'est pour cela que j'ai cru qu'il fallait au moins les additionner.
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
11 févr. 2007 à 11:56
11 févr. 2007 à 11:56
C'est parce que tes div ne sont pas refermés.
Fait :
<div id="..."></div> pour chaque bloc et ca devait marcher.
Fait :
<div id="..."></div> pour chaque bloc et ca devait marcher.