Discussion :

[jojodunord]

Bonjour à tous.

J'ai créé une fonction ( car j'ai besoin de changer des variables etc ... )
et ensuite, dans cette même fonction, je voudrais faire un LIEN vers une ancre qui se trouve sur la même page !

Est ce possible et comment ??
D'avance merci à vous pour votre aide ...

Une instit en détresse qui tente de faire un jeu pour les élèves ;-)

[ozzmax]

Bonjour
et bien pour faire un lien vers une ancre sur la meme page
il faut d'abord la creer comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a name="ancre1"></a>

donc elle va etre invisible
et lorsqu'on veut l'appeler a partir d'un autre lien
on met le # devant
ex dans un autre lien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a name="ancreClick" href=#ancre1>Click ici</a>

ca va aller à la position où tu as placé ton ancre1
bonne journée

[javatwister]

salut jojo (ça va les vacances?)

dans ta fonction, déclare simplement une nouvelle adresse comme tu le ferais pour un lien externe;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

location.href="#id_de_l'ancre";// et je précise bien "id", non pas "name" ==> attribut déclassé dont on se passe très bien

[jojodunord]

Bonsoir JAVATWISTER !

Les vacs, c'est cool !!!!! sauf quand on veut se prendre la tête sur la fabrication de jeux pour ces chères petites têtes blondes !!! :wink:

c'est quoi l'ID ????????
je n'ai qu'une ancre sur ma page name=perdu

function perdu () {
location.href="#0";
}


function perdu () {
location.href="#1";
}

function perdu () {
location.href="#perdu";
}

Rien ne fonctionne !!!!!!!! je suis désespérée ....

[javatwister]

eh bien si ton ancre est du style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a name="perdu"></a>

ta dernière fonction est au poil:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function perdu () { 
location.href="#perdu"; 
}

sauf que je te conseille quand même de remplacer name="perdu" par id="perdu" et éventuellement de changer le nom de ta fonction (appelle-là perdudu par exemple) pour éviter les soucis;

[jojodunord]

suite de mon long discourt ....

dans ma page, en haut, j'ai un formulaire .....
est ce que cela peut causer problème ???
c'est à partir de ce formulaire que je fais appel à ma fonction perdu()

dois je mettre l'ancre dans ou hors du formulaire ????
( je l'ai mise en dehors !!!! )

[javatwister]

lis déjà mon précédent message;

puis demande-toi quel est le but de ce formulaire: si tu ne quittes pas la page et que tu n'envoies aucune donnée au serveur, il ne sert strictement à rien;
en tout cas, poste un peu plus de ta page, tu veux?

[jojodunord]

javatwister,


function perdu perdudu perduduturlututu ...
rien ne marche !

et moi je suis perduE ! ça au moins c'est sûr !!!

je veux bien poster plus du code de ma page ... mais elle fait 3 kilomètres !!!!!!!
est ce que je peux te l'envoyer sur une boîte perso ???

si, mon formulaire j'en ai vraiment besoin pour passer des variables sur d'autres pages !!!

[javatwister]

allons allons, c'est pas sérieux ça

je te défends bien de me poster 3km de code ici!
bref, j'espère que c'est toi qui as conçu cette belle page et que tu sauras copier les morceaux incriminés (la fonction et le formulaire par exemple);

et relis mon post précédent, merci;

[jojodunord]

Re !
Comment ça, c'est pas sérieux ????
je comprends pas !!! snif ....

voici donc leSélectionner tout de la page qui fouirouille !
en fait je n'ai pas beaucoup de connaissances et je bidouille comme je peux !!! ça sert à ça les vacances !!!

mon site école : http://ecole.stex.free.fr/
( mais ça n'a rien à voir pour l'instant !!!! )

en fait je veux faire le jeu Qui veut gagner des bonbons !!!!
il ne sera pas en ligne ...
mais joué en direct avec tous les enfants de l'école !





<div align="center">
<form method="get" action="question2.htm" name="formulaire">
<table width="800" border="0">
<tr>
<td>
<div align="left"><font color="#FFFF00">
<input type="text" name="classe">
</font></div>
</td>
<td><font color="#FFFF00">
<input type="button" name="submit2" value="Arr&ecirc;ter" onClick="MM_callJS('arreterlejeu()')">
</font></td>
<td>
<div align="center"><font color="#FFFF00"><a href="#" onClick="MM_callJS('telephone()')"><img src="images/telephone0.jpg" width="92" height="58" border="0"></a></font></div>
</td>
<td>
<div align="center"><font color="#FFFF00"><a href="#" onClick="MM_callJS('cinquante()')"><img src="images/cinquante0.jpg" width="92" height="58" border="0"></a></font></div>
</td>
<td>
<div align="center"><font color="#FFFF00"><a href="#" onClick="MM_callJS('public()')"><img src="images/public0.jpg" width="92" height="61" border="0"></a></font></div>
</td>
<td>
<div align="right"><font color="#FF0000">
<input type="submit" name="submit" value="Continuer le jeu">
</font></div>
</td>
</tr>
</table>
.
<table width="800" border="1">
<tr>
<td colspan="4" rowspan="4" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS" size="6">Q1
: Votre ma&icirc;tresse, c'est qui ?</font></div>
</td>
<td width="11" bgcolor="#000033" rowspan="16">&nbsp;</td>
<td bgcolor="#000000" colspan="2">
<div align="center"><font color="#88D7F0" face="Comic Sans MS">Pyramide
des gains</font></div>
<div align="center"></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS">15</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS">1.000
bonbons</font></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">14</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">600 bonbons</font></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">13</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">500 bonbons</font></div>
</td>
</tr>
<tr>
<td colspan="4">
<div align="center"><font color="#000033">.</font><font color="#000033">.</font><font color="#000033">.</font><font color="#000033">.</font></div>
</td>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">12</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">400 bonbons</font></div>
</td>
</tr>
<tr>
<td width="50" rowspan="5">
<div align="center"><a href="#" onClick="MM_callJS('perdudu()')"><img src="images/a.gif" width="50" height="50" border="0"></a></div>
</td>
<td width="226" rowspan="5" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS" size="6">une
vip&egrave;re </font></div>
</td>
<td width="50" rowspan="5">
<div align="center"><font color="#FFFFFF"><a href="#" onClick="MM_callJS('perdu()')"><img src="images/b.gif" width="50" height="50" border="0"></a></font></div>
</td>
<td width="278" rowspan="5" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS" size="6">une
soupi&egrave;re </font></div>
</td>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">11</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">350 bonbons</font></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS">10</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS">300 bonbons</font></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">9</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">150 bonbons</font></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">8</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">100 bonbons</font></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">7</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">72 bonbons</font></div>
</td>
</tr>
<tr>
<td colspan="4">
<div align="center"><font color="#FFFFFF"></font></div>
</td>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">6</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">48 bonbons</font></div>
</td>
</tr>
<tr>
<td width="50" rowspan="5">
<div align="center"><a href="#" onClick="MM_callJS('perdu()')"><img src="images/c.gif" width="50" height="50" border="0"></a></div>
</td>
<td width="226" rowspan="5" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS" size="6">une
poussi&egrave;re </font> </div>
<div align="center"></div>
</td>
<td width="50" rowspan="5">
<div align="center"><font color="#FFFFFF"><a href="#" onClick="MM_callJS('bonnereponse()')"><img src="images/d.gif" width="50" height="50" border="0"></a></font></div>
</td>
<td width="278" rowspan="5" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS" size="6">une
sorci&egrave;re </font></div>
</td>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS">5</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FFFFFF" face="Comic Sans MS">24 bonbons</font></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">4</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">12 bonbons</font></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">3</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">6 bonbons</font></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#000000">
<div align="center"><font color="#FF9900" face="Comic Sans MS">2</font></div>
</td>
<td width="126" bgcolor="#000000">
<div align="center"><font color="#FF6600" face="Comic Sans MS">3 bonbons</font></div>
</td>
</tr>
<tr>
<td width="36" bgcolor="#FFFF00">
<div align="center"><font color="#000000" face="Comic Sans MS">1</font></div>
</td>
<td width="126" bgcolor="#FFFF00">
<div align="center"><font color="#000000" face="Comic Sans MS">1 bonbon</font></div>
</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><font color="#FFFF00"> </font></p>
<p><font color="#FFFF00">t&eacute;l&eacute;phone
<input type="text" name="telephone" size="3">
</font></p>
<p><font color="#FFFF00">cinquante
<input type="text" name="cinquante" size="3">
</font></p>
<p><font color="#FFFF00">public
<input type="text" name="public" size="3">
</font></p>
<p><font color="#FFFF00">gain
<input type="text" name="gain" size="3" >
</font></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><font color="#FF0000"> </font></p>
<p>&nbsp;</p>
</form>
<p>&nbsp;</p>
<p>
<script language="JavaScript">
var gain = get("gain");
document.formulaire.gain.value = gain;
var classe = get("classe");
document.formulaire.classe.value = classe;
var telephone = get("telephone");
document.formulaire.telephone.value = telephone;
var cinquante = get("cinquante");
document.formulaire.cinquante.value = cinquante;
var public = get("public");
document.formulaire.public.value = public;
if (cinquante=="0") {document.images[1].src=cinquante0.src;}
if (cinquante=="1") {document.images[1].src=cinquante1.src;}
if (telephone=="0") {document.images[0].src=telephone0.src;}
if (telephone=="1") {document.images[0].src=telephone1.src;}
if (public=="0") {document.images[2].src=public0.src;}
if (public=="1") {document.images[2].src=public1.src;}

</script>



<script language="JavaScript">
<!--
function telephone() {
document.formulaire.telephone.value = "1";
document.images[0].src=telephone1.src;
window.open('telephone.htm','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=800, height=600');

}

function public() {
document.formulaire.public.value = "1";
document.images[2].src=public1.src;
window.open('public.htm','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=800, height=600');
}

function cinquante() {
document.formulaire.cinquante.value = "1";
document.images[4].src=b.src;
document.images[5].src=c.src;
document.images[1].src=cinquante1.src;
window.open('cinquantecinquante.htm','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=800, height=600');
}


function bonnereponse() {
var gain= get("gain");
var gain = "1";
document.formulaire.gain.value="1";
window.open('bonnereponse.htm','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=800, height=400');
}

function perdudu() {
location.href="#perdu";
}

function arreterlejeu() {
var gain=get("gain");
window.alert (gain);
if (gain=="") {window.alert ('mais ... il faut jouer ...')}
if (gain=="0") {window.alert ('mais ... il faut jouer ...')}
if (gain=="1") {window.location="arret1.htm";}
if (gain=="2") {window.location="arret2.htm";}
if (gain=="3") {window.location="arret3.htm";}
if (gain=="4") {window.location="arret4.htm";}
if (gain=="5") {window.location="arret5.htm";}
if (gain=="6") {window.location="arret6.htm";}
if (gain=="7") {window.location="arret7.htm";}
if (gain=="8") {window.location="arret8.htm";}
if (gain=="9") {window.location="arret9.htm";}
if (gain=="10") {window.location="arret10.htm";}
if (gain=="11") {window.location="arret11.htm";}
if (gain=="12") {window.location="arret12.htm";}
if (gain=="13") {window.location="arret13.htm";}
if (gain=="14") {window.location="arret14.htm";}
if (gain=="15") {window.location="arret15.htm";}
}

function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
</p>
<p>&nbsp; </p>
<hr>
<p>&nbsp;</p>
<p><font color="#FF8040" size="7">perdu</font></p>
<p><a name="perdu"></a></p>
<p>&nbsp;</p>
</div>

[javatwister]

(non je rigole pour faire le gars qui reste zen)

à part ça:

expose un peu ton projet de jeu (fonctionnement, but pour l'élève, action de l'élève dans la page);

utilise les balises "code" quand tu écris un message qui contient du...code (petits boutons en haut de la zone de texte: sélectionne ton code puis clique sur le rectangle avec "Code" écrit dessus);

poste au moins le bout de code où l'ancre apparaît, qu'on soit sûr qu'elle existe;

merci encore une fois de faire un petit effort pour:
- soit donner une adresse où ta page soit visible;
- soit relire mes messages qui te conseillent de trier tes idées et ton code avant de poster;

dis-nous franchement ce que tu connais de html et de javascript, on gagnera peut-être du temps;

bref, je te dis tout ça parce que malgré mes immenses pouvoirs occultes, je ne puis rien pour toi à l'heure actuelle;

[jojodunord]

Ok !

j'ai mis mon projet en cours ici:
http://ecole.stex2.free.fr/jeu_quiveutgagner/page0.htm

à la troisième page, on est sur la première question du jeu !
tout fonctionne à peu près comme je veux !

sauf quand on perd !!!
j'ai besoin de savoir à quel niveau du jeu en sont les enfants ( Q1, Q2 ou Q5 ...) afin de pouvoir afficher les gains acquis ! il faut que je fasses des tests ... d'où le besoin d'une fonction !!!la function perdu()

Je ne peux pas faire passer les variables sur une autre page car à ce moment là, car je ne clique pas sur le bouton Submit !

Donc je tente des ruses ... et j'avais pensé à l'ancre !
ainsi je garde les variables gain et la question affichée ...

Mon niveau en javascript :
nul ! je me débrouille avec des bouts de codes trouvés à droite et à gauche !
il me manque les BASES ...

Voilà !
si tu peux m'aider ce serait super !
sinon ... bin tant pis !!!

en tout cas merci !
Jojol'instit en détresse ...

[Mr N.]

Tu as une fonction perdudu, et tu appelles perdu, ca ne risque pas de fonctionner !
Change carrément le nom, genre "mauvaiseReponse()" ou autre car tu as déjà une image qui s'appelle perdu...

[javatwister]

belle idée... mais pour l'instant, ça marche pas au-delà de la première question;

évite les entrées / sorties de page vu que le jeu n'a pas besoin d'informations serveur;

et comme dit Mr N., vérifie tes noms de variables, fonctions, images... en évitant les doublons;

[jojodunord]

Bonjour !

j'ai refait une page " toute simple " juste pour tester le lien vers l'ancre.
ça ne fonctionne pas !
je pense ( ??!! ) que c'est la syntaxte de la fonction qui foire ...

la page est ici:
http://ecole.stex2.free.fr/jeu_quiveutgagner/essai.htm/


réponse à javatwister :
oui, pour l'instant il n'y a que la question 1 qui fonctionne ! ça, c'est normal !

Merci à vous de continuer à m'aider ...

[jojodunord]

comme ça ça va mieux :

http://ecole.stex2.free.fr/jeu_quiveutgagner/essai.htm


( désolée, je n'arrive pas à utiliser les balises ! )

[javatwister]

tu avoueras que ton système de fonctions est assez aberrant: pourquoi "evaluer" le code!

écris ce dont tu as besoin pas à pas!

2 exemples qui donnent le même résultat:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
 
<title>...</title> 
 
<script type="text/javascript"> 
 
function erreur() {
location.href="#faux";
}
 
</script>
 
<style>
 
a {
text-decoration:none;
color:#ff0000;
}
 
p {
text-align:center;
font-weight:bold;
}
 
</style>
 
</head> 
 
<body>
 
<p>début</p>
 
<p style="margin-top:200px">
<a onclick="erreur()" id="test">
<img src="sm01.gif" style="cursor:pointer;border:0px" alt="essai" /><br />
</a>
fonction faux
</p>
 
<p style="margin-top:1000px">
<a id="faux" href="#test">c'est faux</a>
</p>
 
</body> 
</html>

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
 
<title>...</title> 
 
<style>
 
a {
text-decoration:none;
color:#ff0000;
}
 
p {
text-align:center;
font-weight:bold;
}
 
</style>
 
</head> 
 
<body>
 
<p>début</p>
 
<p style="margin-top:200px">
<a href="#faux" id="test">
<img src="sm01.gif" style="cursor:pointer;border:0px" alt="essai" /><br />
</a>
fonction faux
</p>
 
<p style="margin-top:1000px">
<a id="faux" href="#test">c'est faux</a>
</p>
 
</body> 
</html>

le 2e n'utilise pas javascript (à quoi bon...);

[Mr N.]

A moins de renommer l'intitulé #faux, le premier code sera préférable afin que les élèves ne devinent pas la réponse rien qu'en survolant la souris... Ca dépend bien sur du niveau de compétence de l'élève vis à vis de l'informatique, mais sait-on jamais ^^

[javatwister]

bah, oui, de toute façon, sans requête serveur, le jeu s'adresse forcément à des profanes;

bref, jojo, si je me souviens bien, tu écrivais un truc du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="perdu()">

et du coup, il te manquait un return false pour que le lien par défaut ("#") ne soit pas suivi

[jojodunord]

Bon ben ... merci à vous en tout cas !
c'est super sympa !

bin je n'ai pas le temps d'essayer pour l'instant ... mais dès que je peux j'y retourne !!!
et maintenant que vous m'avez prouvé que ça peut marcher ... je suis sûre que je vais y arriver ! ( même si pour ce faire je dois devenir chauve ! )

encore merci
Jojo