Flux rss
Rechercher : dans
Par : Mots clés Nom d'utilisateur
Messages sans réponse

Recherche [balise] pour frise HTML

Laurent, le dimanche 4 février 2007 à 19:08:18 
 Signaler ce message aux modérateurs

Bonjour,

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

1

plop!, le dimanche 4 février 2007 à 19:29:17

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é ?

Répondre à plop!

2

Ssylvainsab, le dimanche 4 février 2007 à 21:55:45

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 :

#img_route{
  background:url(route.jpg) repeat-x;
}
Sylvain
"Join us now, and share the software. You'll be Free, hackers."

Répondre à Ssylvainsab

3

Laurent, le vendredi 9 février 2007 à 18:43:15

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.

Répondre à Laurent

4

Ssylvainsab, le vendredi 9 février 2007 à 19:22:32

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 :

<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."

Répondre à Ssylvainsab

5

Laurent, le vendredi 9 février 2007 à 19:58:58

10 milliards de fois merci ! Je t'adore ! lol

Répondre à Laurent

6

Laurent, le vendredi 9 février 2007 à 20:08:54

Euh merci mais... Peut-on faire défiler ce résultat ?

Répondre à Laurent

7

Laurent, le vendredi 9 février 2007 à 20:18:36

Et ne peut-on mettre cette frise en plein milieu d'un page ? :#

Répondre à Laurent

8

Ssylvainsab, le vendredi 9 février 2007 à 22:53:47
  • +1

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 ? Sylvain
"Join us now, and share the software. You'll be Free, hackers."

Répondre à Ssylvainsab

9

Laurent, le vendredi 9 février 2007 à 23:53:43

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.

Répondre à Laurent

10

Laurent, le samedi 10 février 2007 à 08:18:00

"un autre élément que body"... comme quoi, par exemple ?

Répondre à Laurent

11

HackTrack, le samedi 10 février 2007 à 10:50:57

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

Répondre à HackTrack

12

Laurent, le samedi 10 février 2007 à 11:05:51

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)...

Répondre à Laurent

13

Ssylvainsab, le samedi 10 février 2007 à 14:26:00

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 ;-) Sylvain
"Join us now, and share the software. You'll be Free, hackers."

Répondre à Ssylvainsab

14

Laurent, le dimanche 11 février 2007 à 11:21:10

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

Répondre à Laurent

15

Laurent, le dimanche 11 février 2007 à 11:23:05

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.

Répondre à Laurent

16

Ssylvainsab, le dimanche 11 février 2007 à 11:30:58

"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 :

#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."

Répondre à Ssylvainsab

17

Laurent, le dimanche 11 février 2007 à 11:35:55

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 !

Répondre à Laurent

18

Laurent, le dimanche 11 février 2007 à 11:52:08

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 !

Répondre à Laurent

19

Laurent, le dimanche 11 février 2007 à 11:54:52

Si je n'ajoute pas de "

<P ALIGN="CENTER">&nbsp;</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.

Répondre à Laurent
Les balises HTML HTML, un langage à balises Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple. Une page HTML est ainsi un simple fichier texte contenant... www.commentcamarche.net/contents/html/htmlbalise.php3
Je recherche un éditeur HTML gratuit (Résolu) Bonjour à tous, Je suis à la recherche d'un éditeur HTML (en français si possible) le plus performant possible et qui soit gratuit. Je sais ça fait un peu beaucoup mais il me faut la crème de la crème car je ne suis pas un pro du HTML. Pouvez-vous... www.commentcamarche.net/forum/affich-1540839-je-recherche-un-editeur-html-gratuit
Balise html INCLUDE (Résolu) bonjour, quelqu'un peut il m'aider sur la balise include voila j'ai 2 fichiers: index.html menu.html index.html contient dans la balise body menu.html quant a lui ne contient que cela ceci est un essai de menu... www.commentcamarche.net/forum/affich-1019113-balise-html-include
Les balises dans la partie 'head'Avant tout : rappel sur le doctype La partie head Balises meta Mots clés Description Déclaration de la langue du site Catégorie Auteur Restrictions pour les moteurs de recherche Adresse de la page Logiciels utilisés pour la... www.commentcamarche.net/faq/sujet-9060-les-balises-dans-la-partie-head
[Site web] Vérifier, optimiser et nettoyer son code HTMLLes logiciels WYSIWYG de création de pages web produisent parfois du contenu HTML rempli de balises HTML inutiles, voire incompatibles avec les recommandations du W3C. Les outils proposés ci-dessous permettent de vérifier la validité du code HTML... www.commentcamarche.net/faq/sujet-5355-site-web-verifier-optimiser-et-nettoyer-son-code-html
On peut cacher le code source d'une page HTMLMythe: On peut cacher le code source d'une page HTML. Réalité: FAUX. Explications: Pour pouvoir afficher une page web (HTML), le navigateur doit - à un moment où un autre - avoir le code HTML en clair. Il y a donc toujours moyen de le... www.commentcamarche.net/faq/sujet-5712-on-peut-cacher-le-code-source-d-une-page-html
Balise META NAME="keywords" (Résolu)Salut C'est au sujet des mots qu'on ajoute à cette balise pour les meteurs de recherche. Comment faut-il les écrire et les espacé : singulier ? petit caractere ? séparé par un espace, une virgule ? Merci d'avance. www.commentcamarche.net/forum/affich-2377319-balise-meta-name-keywords
[php, HTML] insérer un module de recherche (Résolu)bonjour, existe t il des modules de recherche déjà tous faits capable de rechercher les pages comportant tel ou tel mot ds les pages du site (stockées une arborescence de répertoires) ? je souhaiterais que les résultats soient afficher avec les liens... www.commentcamarche.net/forum/affich-1716605-php-html-inserer-un-module-de-recherche
Attribut de la balise HTML <a HREF>Bonjour à tous, où puis je trouver l'intégralité des attributs de la balise du type target, border, scrolmap ........ et comment les utiliser ? Merci bcp Franck       (-_-)°zzZZZ http://membres.lycos.fr/franck001 www.commentcamarche.net/forum/affich-145458-attribut-de-la-balise-html-a-href
Niveaux de titres en HTMLNiveaux de titre Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte : Balise Effet... www.commentcamarche.net/contents/html/htmltitres.php3
Listes et énumérations en HTMLLes listes Une liste est un paragraphe structuré contenant une suite d'articles. Le langage HTML définit trois types de listes : La liste ordonnée ; La liste non ordonnée ; La liste de définition. Liste ordonnée Conteneur Type de... www.commentcamarche.net/contents/html/htmllistes.php3
Les balises de styleQu'est-ce qu'une balise de style? Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées dans d'autres balises de style de la même façon qu'on le ferait avec un traitement de texte. Voici une liste de balises de... www.commentcamarche.net/contents/html/htmlstyle.php3