Ouvrir une nouvelle page en cliquant sur une image

**dmoluc** · 28/05/2018, 11h45

Bonjour à tous
je croyais l'opération très simplemais j'ai beau fouillé sur le forum je ne trouve pas ce que je veux.
actuellement j'ouvre une nouvelle page en HTML

Code html :

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

<li><a href="question1.html"> <img src="bouton.gif" /a>

mais je voudrais faire la même chose en javascript afin de pouvoir fermer avec java la page que je vien d'ouvrir

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
<script> "use strict";
 
function verifier() {
  // Qu1b est le input radio correspondant à la bonne réponse
  if (document.getElementById("Qu1b").checked) {
    alert("Bonne réponse");
	window.open("question2.html"); 
	window.close("question1.html");
  }
  else {
    alert("la bonne réponse est 100000 cm");
	window.open("question2.html"); 
	window.close("question1.html");
 
  }
}
 
</script>

j'ai beau tripatouillé l’événement oneclick je n'arrive à rien en cliquant sur mon image.gif

merci pour vos réponses

**lordmyko** · 28/05/2018, 11h59

Bonjour,

En js natif voici la solution :

Code html :

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

<img id="idImage" src="bouton.gif"/>

Code :

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

1
2
3
  document.getElementById("idImage").addEventListener("click", function( event ) {
        verifier();
  }, false);

Par contre je te recommande de lire des cours/tutoriels de conception web, a mon avis tu ne pars pas dans la bonne direction.

Bonne journée

**bonjourajax** · 28/05/2018, 12h20

window.close();

tout seul ca marche bien

**dmoluc** · 28/05/2018, 12h28

merci pour la réponse mais mise à part l'insertion du bouton sur la feuille je n'ai toujours pas compris comment ouvrir la page "question1" en java

**dmoluc** · 28/05/2018, 12h32

windows.close() ne fonctionne que sur une page ayant était ouverte en javascript, enfin c'est ce que j'ai cru comprendre en lisant les posts...

**dmoluc** · 28/05/2018, 13h06

Code html :

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

1
2
3
4
5
6
<li><a <img id="idImage" src="bouton.gif"/>
 
  <script>
  document.getElementById("idImage").addEventListener("click", function( event ), false);
  onclick = "window.open("question1")";return false;
  <script/>

avec ce code j'arrive à ouvrir la question1 mais le code suivant ne ferme pas l'onglet de la question1

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
function verifier() {
  // Qu1b est le input radio correspondant à la bonne réponse
  if (document.getElementById("Qu1b").checked) {
    alert("Bonne réponse");
	window.open("question2.html"); 
	window.close("question1.html");
  }
  else {
    alert("la bonne réponse est 100000 cm");
	window.open("question2.html"); 
	window.close("question1.html");
 
  }
}
 
</script>

le code fonctionne qu'à partir de la question2
quelqu'un a une solution ?
merci

**lordmyko** · 28/05/2018, 14h40

Désolé d'insister mais ce n'est pas la bonne démarche que d'utiliser un fichier html pour chaque question et donc d'ouvrir une nouvelle page et fermer la page actuel a chaque click.

Je comprend que cela à l'air plus simple pour faire la navigation mais en faite c'est l'inverse :

- le code js qui est dans la page question1.html n'est pas 'repris' dans la page question2.html
- l'historique du navigateur ne fonctionne pas (puisque nouvelle page a chaque fois)
- le comportement sera bloquer par certain navigateur ou bloqueur de popup
- pas de possibilité de sauvegarde des réponses et faire un total des points
- et encore pas mal d'autre bonnes raisons...

Donc si tu ne veux pas faire de php mais juste du html et js voici ce que je te propose comme base pour débuter un QCM :

Code html :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
 
<html>
<head>
  <meta charset="utf-8">
  <title>Test QCM</title>
	<style>
                .qcm{
                        display:none;
                }
        </style>
</head>
 
<body>
 
	<div class="qcm" id="question0">
		<p>Question 1 ?</p>
		<input type="radio" id="reponse1a">42
		<input type="radio" id="reponse1b">64
	</div>
 
	<div class="qcm" id="question1">
		<p>Question 2 ?</p>
		<input type="radio" id="reponse2a">yoda
		<input type="radio" id="reponse2b">dark vador
		<input type="radio" id="reponse2c">obi wan
	</div>
 
	<div class="qcm" id="question2">
		<p>Question 3 ?</p>
		<input type="radio" id="reponse3a">la réponse a
		<input type="radio" id="reponse3b">la réponse d
	</div>
 
	<p id="imageJeValide" style="cursor:pointer;">[image je valide]</p>
 
  <script>
        var questionEnCour = 0;
        var tableauDesReponses = [
                ["reponse1a", "la bonne réponse est 42"], 
                ["reponse2c", "la bonne réponse est obi wan"], 
                ["reponse3b", "la bonne réponse est la réponse d"]
        ];
        //affiche la première question
        document.getElementById("question" + questionEnCour).style.display = "block";
        
        document.getElementById("imageJeValide").addEventListener("click", function( event ) {
                verifier();
        }, false);
        
        function verifier() {
                if (document.getElementById(tableauDesReponses[questionEnCour][0]).checked) {
                        alert("Bonne réponse");
                  }
                  else {
                        alert(tableauDesReponses[questionEnCour][1]);
                }
                questionSuivante();
                
        }
        
        function questionSuivante() {
                //test si dernière question
                if(questionEnCour === 2){
                        alert("Le QCM est fini !");
                }
                else{
                        document.getElementById("question" + questionEnCour).style.display = "none";
                        questionEnCour++; //on passe à la question suivante
                        document.getElementById("question" + questionEnCour).style.display = "block";
                }
        }
  </script>
</body>
</html>

Ouvrir une nouvelle page en cliquant sur une image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager