[Résolu][Javascript] Editeur de carte

[fenix]

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

[Sephi-Chan]

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

[Ruz]

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

[fenix]

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>';

} 

[fenix]

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> 

[fenix]

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> 

[Sephi-Chan]

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.

[fenix]

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

[Ruz]

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();

    }

} 

[fenix]

dsl j'ai ete long ^^;
mais Merci ça marche me reste plus qu'a voir la mise en page
encore merci.