Partage

faire défiler un texte sous une image avec gimp ?

Sujet résolu

30 juin 2011 à 15:44:44

Salut,
Je souhaiterai, dans mon logo, faire défiler un texte, or je n'ai aucun logiciel payant spécialiser là dedans, je ne connais que gimp et ce que je fais n'est pas du tout satisfaisant ! C'est tres saccadé. Vous n'auriez pas une idée pour un autre logiciel gratuit, où une autre super solution anti zero ?
:-°

Anonyme

30 juin 2011 à 15:48:59

Salut,

Moi j'aurais fait ça avec SVG.

Pour un tuto sur SVG http://svground.free.fr/ et ce que tu cherche est expliqué là http://svground.free.fr/animations-chapitre-1.php#répét

Sinon pour un truc aussi simple je peux éventuellement te le coder.

lebelfortain1

30 juin 2011 à 15:55:08

merci, je vais regarder tes liens, sinon pour ta proposition tres tres sympa j'aimerai bien mais je n'arrive pas à coller ma photo sur le forum...

<image></image>

fab@c++

30 juin 2011 à 15:58:16

et pour les anims,y a aussi sur ce site

: http://www.siteduzero.com/tutoriel-3-14858-le-svg.html

Anonyme

30 juin 2011 à 16:03:38

fab@c++ Certes mais le tuto présent sur ce site est incomplet, n'est plus mis à jour et est beaucoup moins pédagogique que svground, dont il s'inspire fortement. Le but de ce forum n'est pas de faire la promotion du SdZ mais d'apporter les meilleures solutions disponibles.

lebelfortain1 Je n'ai pas besoin de ton image mais simplement de :

sa taille en pixel (longueur et largeur)
le texte que tu veux faire défiler (contenu, placement, police, couleur)
le nom du fichier de ton image

lebelfortain1

30 juin 2011 à 16:10:08

ok, j'ai regardé ton tuto et il est ... ultra long.
mon image :
width="314" height="75" son nom : logo.jpg

Le texte que je veux faire défiler c'est "« Rêver votre ville »" en couleur #FC0, il part du milieu de l'image pour aller à droite, pas trop vite, toutes les 12 secondes. Et la police c'est "Arial, Helvetica, sans-serif ".
Merci !

Anonyme

30 juin 2011 à 16:15:01

Ok laisse moi 5min et c'est bon. Par contre si je peux garantir que ça fonctionnera sur Firefox et Opera, il faudra tester pour Internet explorer car je ne l'ai pas d'installé. Mais a priori ses dernières versions supportent SVG.

Merci pour les précisions ça me facilite la tache. Je te commente le code pour que tu puisse le retoucher et le bidouiller si un jour tu veux changer.

lebelfortain1

30 juin 2011 à 16:18:28

ok merci, c'est super sympa

Anonyme

30 juin 2011 à 16:52:30

Désolé pour l'attente, j'ai commenté un max. histoire que tu puisses le modifier donc je te met deux versions : avec et sans commentaire.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x='0' y='0' width="314" height="75" >

<!-- Dans la balise ci dessus tu peux regler l'emplacement de ton element <svg/> dans ta page avec x et y en pixel (par defaut) ou en % (specifier l'unite).-->

<!-- <desc/> contient la description de ton element SVG. Tu peux la modifier a souhait et meme la supprimer. 
Elle est utile pour le referencement par les moteurs de recherches, ca n'a donc pas la meme valeur qu'un commentaire. -->
<desc> Mon logo avec du texte qui defile ! SVG m'a permis de faire defiler le texte sans me prendre le chou ! ;D </desc>

<!-- Les <defs/> contiennent (entre autres) les elements que l'on veut utiliser sans qu'ils ne s'affichent. Ici le chemin que suivra ton texte. -->
<defs> 
		<path id='cheminTexte' d='M 157,37.5 L 314,37.5' /> 
		<!-- Je lui dis : trace un chemin (path) appele 'cheminTexte'
		qui commence (M) au point de coordonnee x= 157 et y=37.5 (centre de l'image) 
		et qui trace une ligne droite (L) jusqu'au point de coordonnee x=314 y=37.5 (bord de l'image).  -->
</defs>
<!-- J'insere mon image en lui specifiant son nom, sa longeur, sa largeur ainsi que les coordonnees de son point le plus en haut a gauche. (ici x='0' et y='0' )-->
<image xlink:href='logo.jpg' x='0' y='0' width="314" height="75" />

<!-- J'ecris mon texte en lui specifiant la couleur, la police, etc. exactement comme avec du xHTML. 
NB : ceci peut etre fait avec une feuille de style, tout comme du xHTML.-->
<text style ='	font-size:1em ;
				font-family:Arial, Helvetica, sans-serif ;
				fill:#FC0 ;
				stroke:none ;' >
	<textPath xlink:href="#cheminTexte" start-offset="100%"> " Rever votre ville " <!-- Ton texte -->

	<animate attributeName="startOffset" attributeType="XML"
		from="-100%" to="100%"
		begin="0s" dur="12s" repeatCount="indefinite"/> 	<!--Commence a 0s, dure 12s et se repete indefiniment. --> 
	</textPath>
</text>

</svg>

Sans commentaire.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x='0' y='0' width="314" height="75" >

<desc> Mon logo avec du texte qui defile ! SVG m'a permis de faire defiler le texte sans me prendre le chou ! ;D </desc>


<defs> 
		<path id='cheminTexte' d='M 157,37.5 L 314,37.5' /> 
		
</defs>

<image xlink:href='logo.jpg' x='0' y='0' width="314" height="75" />


<text style ='	font-size:1em ;
				font-family:Arial, Helvetica, sans-serif ;
				fill:#FC0 ;
				stroke:none ;' >
	<textPath xlink:href="#cheminTexte" start-offset="100%"> " Rever votre ville " 

	<animate attributeName="startOffset" attributeType="XML"
		from="-100%" to="100%"
		begin="0s" dur="12s" repeatCount="indefinite"/>
	</textPath>
</text>

</svg>

lebelfortain1

30 juin 2011 à 16:58:25

Merci beaucoup !

C'est très bien commenté j'ai tout compris ! Juste une question ; le code que tu m'as mis je dois le mettre dans une autre page html ou alors dans le head de ma page ?

Je viens de le tester et ca ne marche pas, le texte ne veut pas bouger, comment ca ce fait ?

Anonyme

30 juin 2011 à 17:24:57

Pour ta première question, tu le traites comme un bloc xHTML.

Je crois que pour le deuxième c'est parce qu'il faut ajouter quelque chose dans le doctype, ça marche chez moi. A tu essayer d'enregistrer juste ce code en .xml et de le lancer dans le navigateur ? Que ce passe t il ?

Je fais des tests et je t'apporte la solution (j'espère).

Edit : Ça marche chez moi en solitaire sous Firefox et Opera. L'erreur est peut être due aux accents du premier commentaire (j'ai édité mon premier code)

http://public.wykiwyc.operaunite.com/w [...] rect=noCookie

lebelfortain1

30 juin 2011 à 17:28:52

Lorsque je le met seul en xml ca fonctionne !
Je dois partir là, je retourne demain matin regarder et réessayer.
En tout cas merci pour ton aide

Anonyme

30 juin 2011 à 17:30:33

Je pense que c'est le doctype de ta page qu'il faut modifier alors, je vais te retrouver ça

Voilà avec ce code avant <body/> ça marche (enregistré en .xml, puisque xHTML en est.)

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Ton titre</title>
       <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1" />
       <meta http-equiv="Content-Type" content="text/svg; charset=iso-8859-1" />
   </head>

Je pense que ce qu'il manque à ta page c'est le deuxième <meta/>

Edit : mais au fait, c'est bien pour une page web que tu code ton truc ?

Non parce que si c'est un formulaire que tu remplis qui attends un .jpeg et que tu lui donnes un .xml c'est normal que ça fonctionne pas.

<svg/> doit être placé en enfant de <body/> ou d'un <div/> lui même enfant de <body/> ou d'un <div/> lui même enfant de …

vkweb

30 juin 2011 à 17:55:21

Citation : WYKIWYC

fab@c++ Certes mais le tuto présent sur ce site est incomplet, n'est plus mis à jour et est beaucoup moins pédagogique que svground, dont il s'inspire fortement. Le but de ce forum n'est pas de faire la promotion du SdZ mais d'apporter les meilleures solutions disponibles.

Propose pas le svg alors car c'est loin d'être la meilleur solution

Anonyme

30 juin 2011 à 18:03:10

C'est pourtant une solution simple et efficace : facile à produire, à intégrer dans du xHTML et à éditer.

Je ne sais pas ce qu'on peut demander de mieux.

fab@c++

30 juin 2011 à 18:05:41

Je suis entièrement d'accord, ce type de fichier est très modulable, facile à mettre en oruvre et pas plus dur à utiliser qu'un logiciel, de plus, il permet d'utiliser d'autres technologie avec (JS, XSK, PHP)

vkweb

30 juin 2011 à 18:24:05

Il s'affiche pas sur tout les navigateurs ça semble être pour moi un argument qui en vaut mille !

Anonyme

30 juin 2011 à 18:35:52

Certes mais pour des fonctionnalités aussi simples il y a de fortes chances que si.

Ça fonctionne sous Opera et Firefox et je suis prêt a parier que sur IE aussi. Il faudrait tester pour chrome et safari mais je pense que ça fonctionne.

De plus l'implémentation progresse, sur tous les navigateurs.

vkweb

30 juin 2011 à 18:57:09

Citation : WYKIWYC

Certes mais pour des fonctionnalités aussi simples il y a de fortes chances que si.

Ça fonctionne sous Opera et Firefox et je suis prêt a parier que sur IE aussi. Il faudrait tester pour chrome et safari mais je pense que ça fonctionne.

Fonctionne pas sur IE8 ou sur les mobiles !

Citation : WYKIWYC

De plus l'implémentation progresse, sur tous les navigateurs.

C'est pas une raison, le css3 progresse mais il est encore très peu utilisé !

Anonyme

30 juin 2011 à 19:06:46

Sur les mobiles c'est fait exprès : les animations ralentissent le chargement de la page donc son implémentation n'est pas une priorité.

Sous IE 8 je veux bien le croire mais il me semble que justement il y a eu de gros progrès avec IE 9...

Edit : testé sous Chrome. Ça fonctionne, mais mal : le texte ne va pas jusqu'au bord de la page.

lebelfortain1

1 juillet 2011 à 8:57:53

je comprend pas, ca ne fonctionne toujours pas ...
J'ai toujours le logo et le texte mais aucun mouvement !
(j'ai utilisé ton code non commenté que tu as mis)
Je rappel que je suis sur une page html, je sais pas quoi dire de plus, sauf que lorsque sur un nouvelle page xml je met le code, ca fonctionne...
Je vous donne toute ma page comme ca ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title> Boulevard du littoral vous propose son mobilier urbain </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Type" content="text/svg; charset=iso-8859-1" />

<title>Accueil</title>
<style type="text/css">
<!--
@import url("site-internet-boulevard-du-littoral/style/style-site-css indexx.css");
a:hover {
	color: #000;
	text-decoration: none;
}
a:active {
	color: #999;
	text-decoration: none;
}
a:link {
	color: #999;
	text-decoration: none;
}
a:visited {
	color: #999;
	text-decoration: none;
}
-->
</style>
<meta name="Description" content="<p>Aménagement urbain : BOULEVARD DU LITTORAL</p>
Découvrez notre mobilier urbain, en robinier, pin classe 4, ceranova, inox 316L, écoteck pour vos bancs, corbeilles, potelets, passerelles, table de pique-nique, abribus... Bienvenue sur le site de boulevard du littoral !" />

</head>

<body onload="startPix()">
<meta name="keywords" content="Boulevard du littoral, mobilier urbain, mobilier urbain loire atlantique" />

<div id="page">
    <div id="scpage">
      <div id="bando">
        <ul>
          <li><a href="Demande de renseignement.php">demande de renseignement</a></li>
          <li><a href="Contact.html">contact</a></li>
          <li><a href="Article de presse.html">article de presse</a></li>
          <li><a href="Mission.html">missions</a></li>
          <li><a href="index.html"><span style="color: #FC0;">Accueil </span></a></li>
          <li></li>
        </ul>
      <img src="site-internet-boulevard-du-littoral/images/logo.jpg" width="314" height="75" /> </div>
      <div id="centregauche">
        <p>Entreprise dynamique créée en 2006 et dirigée par Madame Waqué, 
          BOULEVARD DU LITTORAL, assure à sa clientèle, un service de qualité, une grande réactivité.</p>
<p>Notre capacité d'écoute, d'analyse nous permettent de vous proposer des solutions adaptées à vos besoins. Nous représentons SQUARE, MOBEXTAN, URBASTYLE sur la Bretagne, les Pays de la Loire.</p>
<p> Notre domaine d'activité concerne l'aménagement extérieur : mobilier urbain et pavage.</p>
<p> Nos clients apprécient d'avoir la même interlocutrice, depuis le début du projet jusqu'à la livraison. Je vous invite à découvrir quelques unes de nos réalisations.</p>
<p><a href="http://www.urbastyle.com/fr/home"><img src="site-internet-boulevard-du-littoral/images/logo partenaire 1.jpg" width="80" height="31" /></a><a href="http://www.square-urbain.com/"><img src="site-internet-boulevard-du-littoral/images/logo partenaire 2.jpg" width="80" height="31" /></a><a href="http://www.mobextan.fr/"><img src="site-internet-boulevard-du-littoral/images/logo partenaire 3.jpg" width="80" height="31" /></a><a href="http://www.developpement-durable.gouv.fr/"><img src="site-internet-boulevard-du-littoral/images/logo partenaire 4.jpg" width="61" height="80" /></a></p>
      </div>
      <div id="centredroite">
      <p>
      <script type="text/javascript">
<!--
var timeDelay = 4;
var Pix = new Array (
					 "site-internet-boulevard-du-littoral/images/velorencontre.jpg","site-internet-boulevard-du-littoral/images/rondin.jpg","site-internet-boulevard-du-littoral/images/saintnazpot.jpg","site-internet-boulevard-du-littoral/images/terrassepin.jpg","site-internet-boulevard-du-littoral/images/structuretoitchalet.jpg","site-internet-boulevard-du-littoral/images/siegenoir.jpg","site-internet-boulevard-du-littoral/images/pyramide.jpg"
);
var howMany = Pix.length;
timeDelay *= 1200;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
	setInterval("slideshow()", timeDelay);
}
function doc(elt){
	return document.getElementById(elt);
}
function slideshow() {
	PicCurrentNum++;
	if (PicCurrentNum == howMany) {
		PicCurrentNum = 0;
	}
	doc('pixOne').style.filter = 'alpha(opacity=100)';
	doc('pixOne').style.opacity = 1;
	var interval = setInterval(function(){
		var level = (document.getElementById('pixOne').style.opacity * 100) - 20;
		doc('pixOne').style.filter = 'alpha(opacity='+level+')';
		doc('pixOne').style.opacity = (level/100);
		if(level <= 0){
			doc('pixOne').src = Pix[PicCurrentNum];
			doc('pixOne').style.opacity = 1;
			doc('pixOne').style.filter = 'alpha(opacity=100)';
			next = (PicCurrentNum == howMany - 1) ? 0 : PicCurrentNum+1;
			doc('pixTwo').src = Pix[next];
			clearInterval(interval);
		}
	}, 100);
}
//  End -->
</script>
      <img id="pixOne" src="site-internet-boulevard-du-littoral/images/velorencontre.jpg" style="position: absolute; z-index: 10; left: 420px;" /><img id="pixTwo" src="site-internet-boulevard-du-littoral/images/rondin.jpg" style="position: absolute;z-index: 5" /></p>

  </div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x='0' y='0' width="314" height="75" >



<defs> 
		<path id='cheminTexte' d='M 157,55 L 314,55' /> 
		
</defs>

<image xlink:href='site-internet-boulevard-du-littoral/images/logo.jpg' x='0' y='0' width="314" height="75" />


<text style ='	font-size:1em ;
				font-family:Arial, Helvetica, sans-serif ;
				fill:#FC0 ;
				stroke:none ;' >
	<textPath xlink:href="#cheminTexte" start-offset="100%"> " Rever votre ville " 

	<animate attributeName="startOffset" attributeType="XML"
		from="-100%" to="100%"
		begin="0s" dur="12s" repeatCount="indefinite"/>
	</textPath>
</text>

</svg>
</body>
</html>

Anonyme

1 juillet 2011 à 10:02:18

Oui j'ai oublié de te le dire mais il faut enregistrer en .xml ou .xhtml

(j'ai pas onstaté de différence de l'un à l'autre).

Du coup il n'accepte plus que tu ne fermes pas <div id="page"> ligne 39 il faut la fermer avec </div> ligne 105.

Chez moi ça marche avec ça.

lebelfortain1

1 juillet 2011 à 10:10:11

COol ca marche !
merci !