IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Du texte sur une image ?


Sujet :

JavaScript

  1. #1
    Membre éprouvé Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Par défaut 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.

  2. #2
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    Salut,

    Tu veux placer une champs de saisie sur ton image ?
    que veux-tu faire exactement ?

  3. #3
    Membre émérite
    Avatar de gerald2545
    Profil pro
    Inscrit en
    Février 2003
    Messages
    744
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2003
    Messages : 744
    Par défaut
    si tu mets ton image en background de ton container html?
    sinon expliques un peu plus ce que tu souhaites

  4. #4
    Membre éprouvé Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Par défaut
    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 ?

  5. #5
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    Salut,

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

    voici un exemple:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  6. #6
    Membre éprouvé Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Par défaut
    merci ! je vais tester ça et regarder du côté du framework. Je reviens dire comment ça fonctionne...

  7. #7
    Membre éprouvé Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Par défaut
    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 ?

  8. #8
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    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.

  9. #9
    Membre éprouvé Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Par défaut
    oui merci, bonne idée. ça fonctionne, le déplacement. Sauf que le style hover ne s'applique pas. Voici mon code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ?

  10. #10
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    Est-ce que ça marche sur FireFox ?

  11. #11
    Membre éprouvé Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Par défaut
    je ne sais pas je n'ai que IE...
    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...

  12. #12
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    Citation Envoyé par renaud26
    je ne sais pas je n'ai que IE...
    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

  13. #13
    Membre éprouvé Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Par défaut
    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 ?

  14. #14
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    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.

  15. #15
    Membre éprouvé Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Par défaut
    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...

  16. #16
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    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à ?

  17. #17
    Membre éprouvé Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Par défaut
    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 ?

  18. #18
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  19. #19
    Membre éprouvé Avatar de renaud26
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2003
    Messages
    1 365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2003
    Messages : 1 365
    Par défaut
    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...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [HTML] HTML: Superposer du texte sur une image
    Par claralavraie dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 09/02/2006, 13h44
  2. [HTML][DREAMWEAVER] Texte sur une image
    Par Nicos77 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 12/10/2005, 09h43
  3. Centrer un texte sur une image créée dynamiquement
    Par rigolman dans le forum Langage
    Réponses: 7
    Dernier message: 11/10/2005, 17h22
  4. Positionnement de texte sur une image
    Par inddzen dans le forum Windows
    Réponses: 2
    Dernier message: 08/08/2005, 12h22
  5. [HTML]Peut-on écrire un texte sur une image ?
    Par flogreg dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 28/02/2005, 17h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo