fenix
Membre
Messages : 106
Inscription : Sep 2007
Réputation : 1
|
[Résolu][Javascript] Editeur de carte
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
prochaine etape de la creation :
reussir de creer la MAP
(Ce message a été modifié le : 08-27-2008 07:13 PM par Sephi-Chan.)
|
|
| 08-25-2008 12:35 PM |
|
Sephi-Chan
Administrateur
Messages : 4,492
Inscription : Aug 2006
|
RE: editeur de map en Js
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
www.sephi-chan.fr
|
|
| 08-25-2008 12:41 PM |
|
Ruz
Membre
Messages : 182
Inscription : Apr 2008
Réputation : 1
|
RE: editeur de map en Js
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
attendez, je cherche...
|
|
| 08-25-2008 12:44 PM |
|
fenix
Membre
Messages : 106
Inscription : Sep 2007
Réputation : 1
|
RE: editeur de map en Js
bon voila mon editeur d'origine. (un peut confus deja)
Code 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
prochaine etape de la creation :
reussir de creer la MAP
|
|
| 08-25-2008 01:02 PM |
|
fenix
Membre
Messages : 106
Inscription : Sep 2007
Réputation : 1
|
RE: editeur de map en Js
apres plusieurs essaie je suis arriver sur un truc comme ça
Code 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
prochaine etape de la creation :
reussir de creer la MAP
|
|
| 08-25-2008 01:55 PM |
|
fenix
Membre
Messages : 106
Inscription : Sep 2007
Réputation : 1
|
RE: editeur de map en Js
bon en attendant j'ai décide d'uriliser ce code
Code 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
prochaine etape de la creation :
reussir de creer la MAP
|
|
| 08-25-2008 02:56 PM |
|
Sephi-Chan
Administrateur
Messages : 4,492
Inscription : Aug 2006
|
RE: editeur de map en Js
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.
www.sephi-chan.fr
|
|
| 08-25-2008 03:15 PM |
|
fenix
Membre
Messages : 106
Inscription : Sep 2007
Réputation : 1
|
RE: editeur de map en Js
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
prochaine etape de la creation :
reussir de creer la MAP
|
|
| 08-25-2008 03:51 PM |
|
Ruz
Membre
Messages : 182
Inscription : Apr 2008
Réputation : 1
|
RE: editeur de map en Js
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 :
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
attendez, je cherche...
(Ce message a été modifié le : 08-25-2008 10:23 PM par Ruz.)
|
|
| 08-25-2008 10:22 PM |
|
fenix
Membre
Messages : 106
Inscription : Sep 2007
Réputation : 1
|
RE: editeur de map en Js
dsl j'ai ete long ;
mais Merci ça marche me reste plus qu'a voir la mise en page
encore merci.
prochaine etape de la creation :
reussir de creer la MAP
|
|
| 08-27-2008 06:51 PM |
|
[Résolu][Javascript] Editeur de carte
