+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][Javascript] Editeur de carte (/showthread.php?tid=2951)
[Résolu][Javascript] Editeur de carte - fenix - 25-08-2008
Bonjour a tous
mon petit editeur de map n'est pas très pratique j'ai donc voullu le changer de façons à ce que lorsque l'on sélectionne une image dans la liste celle ci s'affiche affin de savoir précisément ce que l'on mes sans avoir a regarder dans le fichier img a chaque fois.
mais seulement voila il faut du javascript et personnellement je ne sais faire afficher une img depuis un questionnaire qu'en donnant l'url complete de l'img dans celui.
ce qui donne un script du genre :
Code :
<script>
function charger()
{
var image = document.getElementsByTagName('img')[0];
image.src = document.getElementById('source').value;
}
</script>
<img src="" alt=""/><br/>
<p>
Source : <input type="text" id="source"/><br/>
<input type="button" value="charger !" onclick="javascript:charger();"/>
</p>Moi je voudrait un truc qui fasse que lorsque l'on sélectionne notre img dans une liste celle ci ce charge afin de donner un aperçut.
mais apres une bonne dizaine d'essaie j'en suis toujours au point mort et comme je sais pas trop quoi taper dans google les recherche ne donnent rien
si vous pouviez m'aidez ou si vous connaissez un bon tuto
RE: editeur de map en Js - Sephi-Chan - 25-08-2008
Salut,
Il faudrait que tu nous décrives comment tu veux que ton éditeur réagisse. Personnellement, quand j'ai appris à utiliser Javascript, j'ai fais ce petit éditeur. C'est quelque chose comme ça que tu cherches à faire ?
Explique-nous, qu'on puisse t'aider efficacement.
Sephi-Chan
RE: editeur de map en Js - Ruz - 25-08-2008
ta liste, c'est bien un menu déroulant?
sinon, je procéderait totalement différement... j'explique:
1) récupérer la valeur de la liste (le value, qui contient le nom de l'image
2) créer une chaine '<img src="chemin_complet/' + image + '" alt="ceque tu veux" />'
placer cette chaine dans un div => tu as ton affichage
enfin, raisonnement rapide... je dois partir.
Je reviendrai plus tard, si on t'as pas répondu ou si t'as encore des soucis
RE: editeur de map en Js - fenix - 25-08-2008
bon voila mon editeur d'origine. (un peut confus deja)
Code PHP :
<?php
function carte() {
if (isset($_POST['submit'])) {
extract($_POST);
$errors = 0;
$errorlist = "";
if ($longitude1 == "") { $errors++; $errorlist .= "- La latitude est exigée sur le premier champ.<br />"; }
if ($latitude1 == "") { $errors++; $errorlist .= "- La longitude est exigée sur le premier champ.<br />"; }
if (preg_match("/[^0-9_\-]/", $longitude1)==1) { $errors++; $errorlist .= "- La longitude doit être écrit en valeurs numériques.<br />"; }
if (preg_match("/[<>\[\]]/", $latitude1)==1) { $errors++; $errorlist .= "- La latitude doit être écrit en valeurs numériques.<br />"; }
if ($errors == 0) {
if ($longitude1 && $latitude1 !=''){
$update1 = doquery("INSERT INTO {{table}} SET id='',nom='$nom1', lati='$latitude1', longi='$longitude1', passable='$passable1'", "sol");
}
admindisplay('La carte a été modifiée avec succès!<br /><br />Maintenant vous pouvez:<br /><br /><a href="admin.php?do=carte">» retourner pour éditer la map</a><br /><a href="index.php">» retourner au jeu</a>','Editer la carte');
} else {
admindisplay('<b>Erreurs:</b><br /><br /><span class="alerte">'.$errorlist.'</span><br /><a href="admin.php?do=carte">Veuillez retourner et essayer encore</a>.', 'Editer la carte');
}
}
$page = '
<b><u><span class="mauve1">Editer la carte</span></u></b><br /><br /><u>Légende:</u> Arbre = <img src="images/carte/arbre.gif" width="15" height="15"> Fleur = <img src="images/carte/fleur.jpg" width="15" height="15"> Fleur2 = <img src="images/carte/fleur1.jpg" width="15" height="15"> Rocher = <img src="images/carte/rocher.jpg" width="15" height="15"> Eau = <img src="images/carte/mer.jpg" width="15" height="15"><br /><br />
<form method="post" action="admin.php?do=carte">
<table width="586" border="0" cellspacing="0" cellpadding="0">
<tr valign="top"><td style="width:500px">Type: <select name="nom1"><option value="route">route</option><option value="montagne1">angle haut gauche</option><option value="montagne2">haut cantre</option><option value="montagne3">angle haut droite</option><option value="montagne4">droite centre</option><option value="montagne5">angle droite bas</option><option value="montagne6">cantre bas</option><option value="montagne7">angle bas gauche</option><option value="montagne8">centre gauche</option><option value="arbre">Arbre</option><option value="herbe">herbe</option><option value="rocher">Rocher</option><option value="mer">Eau</option><option value="cascade1">cascade gauche bas</option><option value="cascade2">cascade droit bas</option><option value="cascade3">cascade haut gauche</option><option value="cascade4">cascade haut droit</option><option value="riviere1">coude bas gauche</option><option value="riviere2">coude bas droit</option><option value="riviere3">coude ext gauche</option><option value="riviere4">coude ext droit</option><option value="riviere5">coude haut gauche</option><option value="riviere6">coude haut droit</option><option value="riviere7">long bas</option><option value="riviere8">long droit</option><option value="riviere9">long gauche</option><option value="riviere10">long haut</option><option value="riviere11">angle ext haut gauche</option><option value="riviere12">angle ext haut droit</option></select> Longitude: <input type="text" name="longitude1" size="4" maxlength="5"> Latitude: <input type="text" name="latitude1" size="4" maxlength="5"> Passable: <select name="passable1"><option value="1">Oui</option><option value="0">Non</option></select></td></tr>
<tr valign="top"><td style="width:500px"><br /><br /><input type="submit" name="submit" value="Valider" /> <input type="button" value="Retour" OnClick="javascript:location=\'index.php\'"/</td></tr>
</table><br /></form>';
}
Normalement il y a 10 ligne de sélection comme celle ci
et donc ce que je voudrait précisément ce que lorsque dans le menue déroulant je choisie par exemple montagne 1 un aperçu de l'img correspondante apparaise afin de m'eviter de faire des erreur sur la map.
@Ruz je vais essayé ton système pour voir
RE: editeur de map en Js - fenix - 25-08-2008
apres plusieurs essaie je suis arriver sur un truc comme ça
Code PHP :
<?php
<script>
function charger()
{
var image = document.getElementsByTagName('img')[0];
image.src = document.getElementById('http://negima-rpg.net/images/carte/' + 'source' + '.gif').value;
}
</script>
<img src="" /><br/>
<p>
<form method="post" action="test2.html">
<select name="nom1" id="source"><option value="route" id="source">route</option><option value="montagne1">angle haut gauche</option>
<input type="button" value="charger !" onclick="javascript:charger();"/>
</form>
</p>
il a marcher une fois et ensuite plus rien
RE: editeur de map en Js - fenix - 25-08-2008
bon en attendant j'ai décide d'uriliser ce code
Code PHP :
<?php
<script>
function clicimage(num) {
// Booléen reconnaissant le navigateur (vu en partie 2)
isIE = (document.all)
isNN6 = (!isIE) && (document.getElementById)
// Compatibilité : l'objet menu est détecté selon le navigateur
if (isIE) menu = document.all['menu' + num];
if (isNN6) menu = document.getElementById('image' + num);
// On ouvre ou ferme
if (menu.style.display == "none"){
// Cas ou le tableau est caché
menu.style.display = ""
} else {
// On le cache
menu.style.display = "none"
}
}
</script>
<table>
<tr>
<td class="titre" onClick="clicimage('1')">mer</td>
<td class="soustitre" style="display:none" id="image1"><img src='http://negima-rpg.net/images/carte/mer.gif'/></td>
<td class="titre" onClick="clicimage('2')">route</td>
<td class="soustitre" style="display:none" id="image2"><img src='http://negima-rpg.net/images/carte/route.gif'/>
</td>
</tr>
<tr >
//emplacement vide
</tr>
<tr>
//emplacement vide
</tr>
<tr >
//emplacement vide
</tr>
</table>
il est pas pratique mais il marche
RE: editeur de map en Js - Sephi-Chan - 25-08-2008
En même temps, tu ne nous donnes pas ce qu'on te demande. On ne risque donc pas de t'aider comme tu le veux.
RE: editeur de map en Js - fenix - 25-08-2008
bon je reprend ^^
je voudrait que ,lorsque je sélectionne dans le menu déroulant la mention montagne 1 par exemple,
l'image correspondante s'affiche sans recharger la page. c'est la seul chose que je veut rajouter.
donc en gros il faudrait que Js récupérer la valeur du <select> puis selon cette valeur affiche l'img correspondante
je sais pas trop quoi mettre d'autre a part que si possible je preferai ne pas tout changer l'editeur
RE: editeur de map en Js - Ruz - 25-08-2008
1) mettre un ID à ton select (nom1 dans mon exemple) et mettre un id au div de destination de ton image (ici, je vois large: div_destination)
2) récupérer le truc choisi
var truc = document.getElementById('nom1').options[document.getElementById('nom1').selectedIndex].value;
(truc contient donc le "value" de l'option en cours du select)
var chaine= '<img src="http://long/chemin/vers/mes/images/' + truc + '.png" alt="une image" />';
SetDiv(chaine, div_destination);
le code JS de setDiv (un truc que j'utilise partout)
Code PHP :
<?php
function SetDiv(text,div)
{
if (document.getElementById)
{
document.getElementById(div).innerHTML = '';
document.getElementById(div).innerHTML = text;
}
else if (document.all)
{
x = document.all[div];
x.innerHTML = text;
}
else if (document.layers)
{
x = document.layers[div];
text2 = '<p class="testclass">' + text + '</p>';
x.document.open();
x.document.write(text2);
x.document.close();
}
}
ca correspond à ce que tu cherches?
PS: je fais pas la fonction, ni son appel, hein, ca tu sais faire ^^
RE: editeur de map en Js - fenix - 27-08-2008
dsl j'ai ete long ^^;
mais Merci ça marche me reste plus qu'a voir la mise en page
encore merci.