Mettre une variable dans un script

Bonjour

J'essaie modestement d'améliorer mon site et mes connaissances en html et javascript sont désastreuses.

Je suis confronté au problème suivant- je voudrais que le visiteur puisse cliquer sur une image

pour faire un choix en faisant cela il attribue à une variable le nom du chemin du dossier du style ( variable="gimg/soleil/" ou variable="gimg/fleur/" )

le code de l'image est ici:

<div style="position:absolute;left:800;top:230;width:30;height:30;">

<img src="soleil_artist020002.jpg" title="" alt="soleil_artist020002.jpg" align="top" border="0" vspace="0" hspace="0">

</div>

dans la suite du problème je voudrais insérer cette variable dans le src"xxxx/xxxxx/img6.jpg" du code suivant:

<DIV style="POSITION: absolute; TOP: 200px; LEFT: 300px" id=img6><A

href="java script:Bouge('img6')"><IMG

style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none"

alt="image 6 " src="gimg/gdosss/img6.jpg">

</A></DIV>

Merci à tous d'avance

papillo

Salut papillo,

Si je comprend bien ton problème, tu veux que quand l'utilisateur clique sur ton image, ça change une autre image ?

Tout d'abord, il va falloir ajouter un attribut "id" sur la balise img dont tu souhaites modifier l'attribut "src".

Pour cela, c'est simple :

 <DIV style="POSITION: absolute; TOP: 200px; LEFT: 300px" id=img6><A
href="java script:Bouge('img6')"><IMG
style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none"
alt="image 6 " src="gimg/gdosss/img6.jpg" id="monImageCible"> 
</A></DIV>

Ensuite dans ta page

 <script>
function updateImgSrc(dirImg)
{
  var img= Self.document.getElementbyId("monImageCible");
  //recherche le nom de l'image
  var tableau=img.src.split("/");
  img.src = dirImg + tableau[tableau.length-1];
}
</script>

Ensuite sur l'image qui entraîne l'action, on aura ce type de code:

 <div style="position:absolute;left:800;top:230;width:30;height:30;">
<img src="soleil_artist020002.jpg" title="" alt="soleil_artist020002.jpg" align="top" border="0" vspace="0" hspace="0" onClick="updateImgSrc('gimg/soleil/')">
</div>
<div style="position:absolute;left:800;top:230;width:30;height:30;">
<img src="fleur_artist020002.jpg" title="" alt="fleur_artist020002.jpg" align="top" border="0" vspace="0" hspace="0" onClick="updateImgSrc('gimg/fleur/')">
</div>

voili voilu, ensuite on peut aussi ajouter un curseur "main" sur les images si tu veux :blush:

@+°

RaiD

Bonjour

J'essaie modestement d'améliorer mon site et mes connaissances en html et javascript sont désastreuses.

Je suis confronté au problème suivant- je voudrais que le visiteur puisse cliquer sur une image

pour faire un choix en faisant cela il attribue à une variable le nom du chemin du dossier du style ( variable="gimg/soleil/" ou variable="gimg/fleur/" )

le code de l'image est ici:

<div style="position:absolute;left:800;top:230;width:30;height:30;">

<img src="soleil_artist020002.jpg" title="" alt="soleil_artist020002.jpg" align="top" border="0" vspace="0" hspace="0">

</div>

dans la suite du problème je voudrais insérer cette variable dans le src"xxxx/xxxxx/img6.jpg" du code suivant:

<DIV style="POSITION: absolute; TOP: 200px; LEFT: 300px" id=img6><A

href="java script:Bouge('img6')"><IMG

style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none"

alt="image 6 " src="gimg/gdosss/img6.jpg">

</A></DIV>

Merci à tous d'avance

papillo

bonjour Radiwan Kenoby

Tout d'abord merci de ta réponse rapide.

Cela m'a pris un peu de temps pour tester ta soluce.

Apparement je suis une truffe en programation. J'ai tout de meme reussi à implanter mes 2 images vignettes avec ton code placé dans le body.

J'ai placé le script - function updateImgSrc(dirImg) ...- au début dans la tete de la page.

Et ensuite remplacé le code dans une des 9 images (img6) qui entraînent l'action par le tien.

après test cela ne fonctionne pas.

1) le clic sur les deux vignettes semble inopérant - onClick="updateImgSrc('gimg/soleils/')" et onClick="updateImgSrc('gimg/groseilles/') -

quand je clique sur les 2 vignettes l'image img6 ne change pas.

2) Quand je clique sur l'image (img6) elle devrait se déplacer et cela me renvoie une erreur d'adresse

resultat le raccourci devrait me donner - java script:Bouge('img8') -

me donne - file:///C:/Users/xxxxxx/Documents/xxx%20xxxx/xxxxxxxxxxxxx/java%20script:bouge('img6') -

3) l'image 6 en question s'affiche correctement mais ne change pas avec le onClick des vignettes.

je ne maitrise pas le processus mais c'est bien le dossier <gimg/soleils/> ou <gimg/groseilles/> qui doit

changer et pas le nom de l'image qui est fixe dans chaque dossier (img1,img2,img3,img4...).

j'ai un peu de mal à comprendre la syntaxe - src="gimg/soleils/img6.jpg" id="monImageCible"> - de l'image qui entraine l'action.

je ne comprend pas comment le nom du sous dossier <soleils> va changer en <groseilles> ?

A part ca le reste des images img1 img2 img3.. auxquelles je n'ai pas modifié le code fonctionnent toujours

donc pas il n'y a pas d'interaction désagréable avec la fonction bouge.

voici les 3 partie du code que j'ai implanté:

// head

<script>

function updateImgSrc(dirImg)

{

var img= Self.document.getElementbyId("monImageCible");

//recherche le nom de l'image

var tableau=img.src.split("/");

img.src = dirImg + tableau[tableau.length-1];

}

</script>

//body vignettes

<div style="position:absolute;left:800;top:230;width:30;height:30;">

<img src="gimg/soleils/soleilsv.jpg" title="" alt="gimg/soleils/soleilsv.jpg" align="top" border="0" vspace="0" hspace="0" onClick="updateImgSrc('gimg/soleils/')">

</div>

<div style="position:absolute;left:830;top:230;width:30;height:30;">

<img src="gimg/groseilles/groseillesv.jpg" title="" alt="gimg/groseilles/groseillesv.jpg" align="top" border="0" vspace="0" hspace="0" onClick="updateImgSrc('gimg/groseilles/')">

</div>

//body image qui entraine l'action (img6) une seule sur les 9

<DIV style="POSITION: absolute; TOP: 200px; LEFT: 300px" id=img6><A

href="java script:Bouge('img6')"><IMG

style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none"

alt="image 6 " src="gimg/soleils/img6.jpg" id="monImageCible">

</A></DIV>

Encore merci je cherche je cherche!!!

papillo

Salut,

voici un bout de script qui fonctionne (il y avait une petite erreur dans le précédent):

<html>
<head>
<script>
function updateImgSrc(dirImg)
{
var img= self.document.getElementById("monImageCible");
//recherche le nom de l'image
var tableau=img.src.split("/");
img.src = dirImg + tableau[tableau.length-1];
}
</script>
</head>
<body>
<div>
<img id="monImageCible" src="a/kenny21.jpg"/>
</div>
<div>
<img src="kennyA.jpg"
align="top" border="0" vspace="0" hspace="0" onClick="updateImgSrc('a/')">
</div>
<div>
<img src="kennyB.jpg"
align="top" border="0" vspace="0" hspace="0" onClick="updateImgSrc('b/')">
</div>
</body>
</html>

Ensuite pour ton point 2, c'est parce que dans ton lien

<A
href="java script:Bouge('img6')">

il faut que javascript soit sans espace, en un seul mot.

pour le point 3 c'est toute la fonction du script que je t'ai donné

function updateImgSrc(dirImg)
{
// récupère l'image cible
var img= self.document.getElementById("monImageCible");
//recherche le nom de l'image
var tableau=img.src.split("/");
// change juste le répertoire de l'image et pas son nom
img.src = dirImg + tableau[tableau.length-1];
}

Voili voilu

Merci Radiwan Kenoby

J'ai essayé le nouveau code que tu m'a transmis.

Il y a du mieux .J'étais truffe10 je suis truffe9.

Plaisanterie mise à part, cela ne fonctionne toujours pas pour ce que je cherche.

Au point que je me demande si l'on parle de la même chose.

Je suis une truffe en informatique maintenant je m'aperçois que c'est la même chose en français.

Dans l'image qui entraine l'action le fait d'ajouter id="monImageCible" n'a pas l'air d'opérer sur le src qui le précède juste avant. C'est pourtant celui-là qui est la cible. Celui où le <gimg/soleils> doit changer en <gimg/groseilles/>

<DIV style="POSITION: absolute; TOP: 100px; LEFT: 100px" id=img1><A

href="java script:Bouge('img1')"><IMG

style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none"

alt="image 1 " src="gimg/soleils/img1.jpg" id="monImageCible">

</A></DIV>

Si j'arrive à acceder à ta messagerie, je t'adresse ce message avec l'adresse de la page test en ligne.

Je ne t'en voudrais pas si tu abandonnes.

papillo

bonjour

J' ai remis en ligne la page avec le détail.

Ce sont les images du puzzle qui doivent changer.

j'ai mis le code que tu m'a fourni dans les images qui entrainent l'action.

<DIV style="POSITION: absolute; TOP: 300px; LEFT: 200px" id=img8><A

href="java script:Bouge('img8')"><IMG

style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none"

alt="image 8 " src="gimg/soleils/img8.jpg" id="monImageCible">

</A></DIV>

pas de résultat. J'ai tenté la syntaxe suivante sans succèc non plus:

<DIV style="POSITION: absolute; TOP: 200px; LEFT: 300px" id=img6><A

href="java script:Bouge('img6')"><IMG

style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none"

alt="image 6 " src="gimg/groseilles/img6.jpg" id="monImageCible" src="gimg/soleils/img6.jpg"/>

</A></DIV>

merci pour l"effort

papillo

re bonjour Radixan Kenoby

Ca progresse.

monImageCible se comporte comme une "variable" locale et non globale. elle ne fonctionne que pour une seule image. En supprimant le premier affichage sur la page elle est opérante pour la première du puzzle. y a-t-il un moyen de rendre la "variable" globale ? J'ai supprimé les 2 var dans la tête mais c'est sans effet.

c'est en ligne.

papillo

salut Radiwan Kenoby

J'ai réussi moins académique que toi.

J'ai initialisé l'ensemble des chemins d'image 1 par 1. sans faire de boucle ce qui, bien sur, est nettement plus satisfaisant. Je reprendrais le code avec la boucle que tu me proposes et te remercie vraiment pour ton suivi très assidu et efficace.

le code que j'ai implanté ressemble à quelque chose comme ça:

function updateImgSrc(dirImg)

{

img1 = $('img1');

tableau=img1.src.split("/");

img1.src = dirImg + tableau[tableau.length-1];

img2 = $('img2');

tableau=img2.src.split("/");

img2.src = dirImg + tableau[tableau.length-1];

etc.....

}

Le tien est nettement plus propre

function updateImgSrc(dirImg)

{

var i;

for (i=1;i<=15;i++)

{

// récupère l'image cible

var img= self.document.getElementById("imgPuzzle_"+i);

//recherche le nom de l'image

var tableau=img.src.split("/");

// change juste le répertoire de l'image et pas son nom

img.src = dirImg + tableau[tableau.length-1];

}

}

Je l'applique dès que j'ai une main de libre

Merci encore

papillo

salut

C'était trop beau

La boucle d'initialisation est parfaite et les images du puzzle changent à volonté sous IE.

Malheureusement cela ne fonctionne pas sous Firefox!

Ce dernier m'annonce une erreur du genre: img is null

en pointant var tableau=img.src.split("/");

dans la boucle suivante.

function updateImgSrc(dirImg)

{

var i;

for (i=1;i<=15;i++)

{

var img= self.document.getElementById("monImageCible"+i);

var tableau=img.src.split("/");

img.src = dirImg + tableau[tableau.length-1];

}

}

Y a t-il quelque chose de possible face à cette usine à gaz qu'est firefox ?

papillo

re-salut

Une observation que je viens de faire est que :

quand je onClick sur une vignette pour changer le chemin du dossier avec - onclick="updateImgSrc('xxxx/xxxx/')" - Firefox reinitialise la page (la ré-ouvre) et donc affiche l'image de départ:

Par conséquence, l'updateImg n'est jamais effectué.

Une solution peut_être?

papillo

Waouuuuh!!! Raid,

éa fonctionne sous Firefox grace à ton observation sur les minuscules et majscules de la variable.

Il restait un souci de lien entre les pages jouer et jouer2 qui après une correction rigoureuse des balises manquantes ou non fermées à donné le résultat attendu.

Merci l'équipe merci surtout à toi Raid sans qui je serai toujours dans le brouillard.

:blush:

papillo

Dé nada

:blush: