Du texte sur une image ?

Version imprimable

07/08/2006, 13h05
renaud26

Du texte sur une image ?

Bonjour à tous,

Je voudrais savoir si il est possible, en javascript, de tracer une zone de texte sur une image et d'écrire dedans...Pensez-vous que ce soit possible ? Si oui, avez vous une piste à m'indiquer pour creuser ?
D'avance, merci.
07/08/2006, 14h34
marcha

Salut,

Tu veux placer une champs de saisie sur ton image ?
que veux-tu faire exactement ?
07/08/2006, 14h36
gerald2545

si tu mets ton image en background de ton container html?
sinon expliques un peu plus ce que tu souhaites
07/08/2006, 15h24
renaud26

merci de votre intérêt pour ma question. Oui, en fait, je suis en train de créer un site de création de bannières et les gens peuvent saisir une ligne de texte sur une image appelée par un src. Je sais afficher les coordonnées X et Y mais je trouve ça peu clair. Je veux donc, comme dans un éditeur de texte, leur permettre de créer une zone de saisie déplaçable pour qu'il puissent taper leur texte exactement à l'endroit voulu...pas simple, hein ?
07/08/2006, 15h47
marcha
Salut,

Tu peux placer un champ texte sans fond par dessus une image.

voici un exemple:
Code:

1 2 3 <img src="image.jpg" /> <input type='text' style='position: absolute; left: 20px; top: 20px; background: none; border: none;' value='du texte' />
Pour pouvoir le déplacer utilise un framework javascript comme script.aculo.us
qui offre des fonctionnalités drag&drop
07/08/2006, 15h59
renaud26

merci ! je vais tester ça et regarder du côté du framework. Je reviens dire comment ça fonctionne...
08/08/2006, 13h57
renaud26

re bonjour,

je viens de passer 4h sur ce fabuleux script...génial ! les possibilités sont immenses ! malheureusement, dans mon cas, ça ne semble pas s'appliquer. Je n'ai pas vu comment utiliser le dropDrag sur un champ input...seulement des images...
une idée ?
08/08/2006, 14h29
marcha

Salut,

je viens de tester, ça pose problème sur un champ input, je pense
que c'est dû au fait que le champ "capture" les événements souris
nécessaires au drag&drop

J'ai mis le champs input dans un div, et la tu peux le glisser sans
problème, mais il faut clicker en dehors de l'input mais sur le div.

Ce que je te conseil de tester c'est de mettre un padding-left à ton
div et de mettre une image background sur le :hover avec un symbole
qui apparait pour indiquer ou il faut prendre l'objet pour le dragger.

oui merci, bonne idée. ça fonctionne, le déplacement. Sauf que le style hover ne s'applique pas. Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
 
<style type="text/css">
<!--
.zone {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: solid #FF0000;
	position: absolute;
	padding: 5px;
}
.zone:hover {
	background-image: url(images/angle.gif);
}
-->
</style>
 
//le div
 
  <div id="Bloque" class="zone">
  <form><textarea>Votre texte</textarea>
  </form></div>
  <script type="text/javascript">
<!--
SET_DHTML("Bloque"+CURSOR_MOVE);
 
//-->
</script>

tu vois le lézard ?

08/08/2006, 16h51
marcha

Est-ce que ça marche sur FireFox ?
08/08/2006, 17h00
renaud26

je ne sais pas je n'ai que IE...:oops:
Je m'aperçois aussi que même si je mets des attributs top et left dans la classe, le calque se positionne en haut à gauche de la fenêtre mais pas du tout où je veux dans la page...à savoir sur la bannière en cours de créa...c'est dur dur...
08/08/2006, 17h09
marcha

Citation:

Envoyé par renaud26

je ne sais pas je n'ai que IE...:oops:

Mon pauvre :-)

Télécharge-le, tu pourra plus t'en passer

http://www.mozilla.com/

Installe à l'occasion les extensions: Web Developer, ColorZilla, MeasureIt

Test ton code sure FireFox, et après si ça marche, on trouvera un hack pour IE :)
08/08/2006, 18h45
renaud26

voila c'est chargé et installé ;-)
Et oui ça fonctionne impec: le cadre est exactement à l'endroit voulu. J'ai une résolution 1024*768, il faudrait peut être donner les top et left en %age plutôt qu'en pixels pour les résolutions inférieures, non ?
08/08/2006, 20h48
marcha

Pour que ça marche sur IE6 tu peux

soit écrire toi-même des onmouseover onmouseout sur le div
pour modifier le style du background du div.

soit utiliser le script csshover.htc proposé sur ce site http://www.xs4all.nl/~peterned/index.html

C'est une bonne solution transitionnelle puisque IE7 supporte les :hover
ailleur que sur des liens.
09/08/2006, 11h16
renaud26

Salut et merci pour le tuyau du scrip css. Je vais tâcher de me débrouiller pour faire fonctionner ça avec les 2 navigs. Cependant, je m'aperçois que le champ text ou le textarea n'est pas très souple ni pratique: pas de possibilité de modifier taille ou police...pas redimensionnable...bref je vais essayer de voir comment créer une véritable zone de texte sur l'image, un peu comme un wysiwyg où le user pourrait saisir un texte, le déplacer, le redimensionner...peut être que je rêve un peu, mais bon...:roll:
09/08/2006, 11h42
marcha

Citation:

Envoyé par renaud26

Cependant, je m'aperçois que le champ text ou le textarea n'est pas très souple ni pratique: pas de possibilité de modifier taille ou police...pas redimensionnable...

La taille de la police ainsi que la taille du champs sont redimensionnables
à l'aide des styles css. Tu as rencontré des problème de ce côté là ?
09/08/2006, 13h08
renaud26

en fait pour le moment, ce *?*grrr? de IE6 ne veut même pas prendre en compte les attributs top et left du css ! Le layer reste obstinément en haut et à gauche de la fenêtre, c'est dingue. Pour ce qui est de la police, oui, le CSS ne devrait pas poser problème. Mais à ton avis, est ce qu'il est possible que javascript "lise" le choix d'un select (taille de police, par exemple) et l'applique dynamiquement au css sans valider le form ?

Salut,

pour le top et le left, est tu sur que ton élément est en position: absolute ?

pour ce qui est d'appliquer un style dynamiquement en fonction d'une liste
c'est assez simple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<style type='text/css'>
#texte { font-size: 12px; }
</style>
<script language='javascript' type='text/javascript'>
function setFontSize(liste) {
  var taille = liste.options[liste.selectedIndex].value;
  var e = document.getElementById('texte');
  e.style.fontSize = taille + 'px';
}
</script>
<input type='text' id='texte' value='un peu de texte' />
<select onchange='setFontSize(this)'>
<option value='12'>Taille 12</option>
<option value='18'>Taille 18</option>
<option value='24'>Taille 24</option>
<option value='36'>Taille 36</option>
</select>

10/08/2006, 12h44
renaud26

Bonjour et encore merci pour tes précieux conseils. Je pense que je vais me débrouiller avec ça...Mais effectivement, le fait d'avoir chargé mozilla me fait voir les lacunes de IE...;)