IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Comment insérer la zone de texte dans une image ?
Phoenixx
* 25/06/06 à 14:28
Message #1


Tordu
Group Icon

Groupe : Members
Messages: 140
Inscrit : 24/07/2005
Lieu : Orléans
Membre No. : 3 010



Suite au tutorial de Cyprien (voir ici), je voudrais savoir si on peut insérer la zone de texte pour rentrer une réponse, dans l'image, comme c'est fait pour les énigmes avec flash.

En effet, mon énigme se présente sous formes de plusieurs étapes successives, et une seule d'elles ne comporte pas de flash comme élément central, pour plusieurs raisons. Et comme j'ai besoin de faire une zone de texte, je voudrais qu'elle soit du même type que les autres, c'est à dire qu'elle soit sur l'image, et non au-dessus ou en-dessous. D'ailleurs, si c'était possible, j'aimerais aussi pouvoir modifier le bouton OK, mais je pense savoir à peu près comment m'y prendre pour ça.

Si je me suis mal expliqué, je peux répondre en MP, afin de ne pas trop spoiler mon énigme wink.gif


--------------------
Un clavier azerty en vaut deux.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
Cyprien
* 29/06/06 à 19:04
Message #2


Tordu
Group Icon

Groupe : Members
Messages: 203
Inscrit : 08/04/2006
Lieu : Moselle
Membre No. : 18 556
Niveau Atteint: 91 !! Ca approche !!



Pour le bouton OK, je ne vois pas grand-chose d'autre que de faire une image, qui sera intégrée à l'image de base puis mappée (comme ça tu peux faire ce que tu veux comme bouton OK).

Par contre pour le texte, ça risque d'être dur à faire...


--------------------
(\__/)
(+'.'+)
(")_(")

Voici Bunny. Copie et place bunny dans ta signature pour l'aider a envahir le monde
Écrire "Modèle réduit" sur la boîte d'un Boeing 747 en plastique à assembler c'est pas vraiment nécessaire

Des problèmes ? Contactez-moi ici
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
FRiZ
* 29/06/06 à 20:15
Message #3


Gros sot modo
Group Icon

Groupe : Modérateurs
Messages: 2 050
Inscrit : 23/07/2005
Lieu : Vire
Membre No. : 2 977
Niveau Atteint: En attente du 94



En fait ça doit être possible avec un bordel de balise <DIV> et de CSS, mais ça serait sûrement plus simple de le faire en flash avec le fichier de base donné par Swan tongue.gif


--------------------
Signature
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
Cyprien
* 29/06/06 à 20:32
Message #4


Tordu
Group Icon

Groupe : Members
Messages: 203
Inscrit : 08/04/2006
Lieu : Moselle
Membre No. : 18 556
Niveau Atteint: 91 !! Ca approche !!



Effectivement FRiZ, j'y avais pas pensé.

Tu peux donc insérer ça dans ta source:

<div id="Layer1" style="position:absolute; left:570px; top:450px; visibility: visible;">
<form name="reponse">
<input type="text" name="texte" value="Votre réponse">
<input type="button" value="OK">
</form>
</div>


Ca te mettre sur ton image (ou n'importe quel autre endroit) un calque contenant une zone de texte et un bouton OK. Tu peux évidemment supprimer le bouton si tu comptes finalement mettre autre chose, ou ajuster des paramètres, comme par exemple la place: tu modifies left:570px pour l'emplacement horizontal et top:450px pour l'emplacement vertical.

EDIT: c'est vrai que c'est assez sommaire, mais c'est parce que je ne connais pas le CSS, je me suis contenté de HTML

EDIT2: j'ai vérifié, tu peux également le faire en HTML pour que ça ne dépende pas de la résolution: tu peux remplcer 570px et 450px par un nombre en % 'par exemple 50% et 50%).


--------------------
(\__/)
(+'.'+)
(")_(")

Voici Bunny. Copie et place bunny dans ta signature pour l'aider a envahir le monde
Écrire "Modèle réduit" sur la boîte d'un Boeing 747 en plastique à assembler c'est pas vraiment nécessaire

Des problèmes ? Contactez-moi ici
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
FRiZ
* 29/06/06 à 20:58
Message #5


Gros sot modo
Group Icon

Groupe : Modérateurs
Messages: 2 050
Inscrit : 23/07/2005
Lieu : Vire
Membre No. : 2 977
Niveau Atteint: En attente du 94



Ptit truc fait en 3sec pour montrer c'que ça donne ici
(C'est un peu plus long que ce que vient de dire Cyprien, mais ça doit être un peu mieux dans le sens où ça ne dépend pas de la résolution d'écran de celui qui regarde la page. Même s'il peut y avoir un décalage de quelques pixels selon les navigateurs [Merci IE].)

Juste une petit remarque pour ton tuto Cyprien, le "formulaire" ne semble pas fonctionner sur Firefox (chez moi en tout cas).

Edit : en changeant onClick="document.URL=document.form.reponse.value+'.html'" par onClick="java script:location.href=reponse.value+'.html'" çà semble aller mieux (cf Exemple).
Un modo pourrait modifier le tuto (avec ton accord).


--------------------
Signature
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
Phoenixx
* 29/06/06 à 22:52
Message #6


Tordu
Group Icon

Groupe : Members
Messages: 140
Inscrit : 24/07/2005
Lieu : Orléans
Membre No. : 3 010



Ah oui, c'est bien ça ! C'est à peu près ce que je cherchais !
Je vous remercie et comme ça, je vais enfin boucler mon énigme.

Et merci aussi à Friz pour l'exemple, parce que ça me permet de mieux voir ce que je dois faire (même si le post de Cyprien m'a aidé à le comprendre) ...

J'aurais pu le faire en flash, mais le problème, c'est que ça détériore la qualité graphique de l'image sur laquelle porte l'énigme ...

EDIT : C'est vrai que le formulaire de Cyprien ne fonctionnait pas sous IE, et je pensais que ça venait de moi ... En fait, je m'apprêtais à le signaler, mais merci FRiZ pour te lumières.

EDIT bis : J'avais pas vu ! T'as même mis un indice dans ton exemple, excellent ! laugh.gif


--------------------
Un clavier azerty en vaut deux.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
Cyprien
* 30/06/06 à 08:09
Message #7


Tordu
Group Icon

Groupe : Members
Messages: 203
Inscrit : 08/04/2006
Lieu : Moselle
Membre No. : 18 556
Niveau Atteint: 91 !! Ca approche !!



Vous avez raison, j'ai fait les tests chez moi, et j'ai trouvé ce qui clochait: il fallait mettre location.href au lieu de document.URL.

Qui peut me corriger ça ?

EDIT: j'ai écrit ce message avant de voir ton édit, mais évidemment un modo peut corriger, on va pas rester avec un tuto faux sur les bras^^ Par contre ça va être assez long, il faut remplacer à chaque fois qu'il y est document.URL par location.href...

DARWINjun: j'ai modifié mais checké pour voir si j'ai fait ça correctement


--------------------
(\__/)
(+'.'+)
(")_(")

Voici Bunny. Copie et place bunny dans ta signature pour l'aider a envahir le monde
Écrire "Modèle réduit" sur la boîte d'un Boeing 747 en plastique à assembler c'est pas vraiment nécessaire

Des problèmes ? Contactez-moi ici
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
Phoenixx
* 02/07/06 à 00:48
Message #8


Tordu
Group Icon

Groupe : Members
Messages: 140
Inscrit : 24/07/2005
Lieu : Orléans
Membre No. : 3 010



Désolé de vous redéranger, mais comme on m'a déjà apporté une aide précieuse, je me réfère de nouveau aux experts en javascript ... (enfin en tout cas un peu plus experts que moi)

Comme je l'expliquais quelques posts avant, j'ai voulu modifier l'apparence du bouton "OK". J'ai donc inséré l'image du bouton dans l'image principale, et j'aimerais faire un lien sur ce "OK", utilisant le texte tapé afin de pointer vers la suite (sous la forme ***.html).

J'ai essayé sous cette forme, mais ça n'a pas été très concluant, et j'apprécierai que l'on modifie les erreurs de mon codage à l'apprenti sorcier wink.gif

<map name="boutonok">
<area shape="rect" coords="695, 440, 727, 469" href="java script:location.href=reponse.value+'.jpg.html'">
</map>

Comme vous pouvez le voir, j'ai fait le lien avec une map, et j'ai inséré les coordonnées du rectangle. Seulement, lorsque je clique sur le lien, rien ne se passe ...

Merci d'avance pour votre aide.

EDIT : J'avais bien mis la ligne <img usemap="#boutonok" src="nomdetonimage.png" border=0>, mais je ne vois pas de quel espace tu parles ... Si c'est l'espace entre java et script, c'est le forum qui l'ajoute automatiquement, et je ne l'ai pas mis dans ma ligne de code ... Mais ça ne fonctionne toujours pas.


--------------------
Un clavier azerty en vaut deux.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
Cyprien
* 02/07/06 à 08:26
Message #9


Tordu
Group Icon

Groupe : Members
Messages: 203
Inscrit : 08/04/2006
Lieu : Moselle
Membre No. : 18 556
Niveau Atteint: 91 !! Ca approche !!



Supprime l'espace dans ta 2e ligne, ce qui donne:

<area shape="rect" coords="695, 440, 727, 469" href="java script:location.href=reponse.value+'.jpg.html'">

Et pense aussi à mettre pour ton image:

<img usemap="#boutonok" src="nomdetonimage.png" border=0>

usemap="#boutonok" pour qu'il utilise la map définie par les 3 lignes entre les balises <MAP>...</MAP> et border=0 pour ne pas avoir une disgrâcieuse bordure bleue autour de ton image.


--------------------
(\__/)
(+'.'+)
(")_(")

Voici Bunny. Copie et place bunny dans ta signature pour l'aider a envahir le monde
Écrire "Modèle réduit" sur la boîte d'un Boeing 747 en plastique à assembler c'est pas vraiment nécessaire

Des problèmes ? Contactez-moi ici
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
Darwin
* 02/07/06 à 23:22
Message #10


Dieu évolutif !
Group Icon

Groupe : Admin
Messages: 1 879
Inscrit : 16/07/2005
Lieu : Namur (Belgique)
Membre No. : 2 192
Niveau Atteint: OF : 94 - English : 78 - OFJ : 83 - VOF : 22



Je ne sais pas si on vous l'a déjà dis mais les java script et donc les .js (ainsi que le php) sont peu recommandables dans les énigmes smile.gif


--------------------


Waiting for level 94 !!
L'évolution ne cesse d'évoluer !!

DARWINjun ville
Darwin industry
Darwin transport
Darwin sécurité
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 Membre(s):

 






Version bas débit Nous sommes le : 23/10/17 à 21:38