Affichage d'une image différemment selon les navigateurs
Bonjour à tous,
Je vous explique la situation: je souhaite afficher une image différente selon les conditions.
Voici le code de la fonction:
Code:
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| function loadQuiz(qnum)
{
if (typeof(quizArray) !== 'undefined')
{
displayQuiz(ent = document.getElementById('quiz1'),qnum++);
var newB = document.createElement("button");
//je déclare ma variable qui servira à afficher l'image
var newImg = document.createElement("image");
//Voici le premier état: l'image "A" s'affiche d'origine
newImg.src = "images/normal.gif";
newB.appendChild(newImg);
newB.style.styleFloat = 'left';
newB.style.cssFloat = 'left';
var rightA = quizArray.split("|");
var rightA = rightA[1].split("//");
var rightA = rightA[0];
newB.onclick = function validateQuestion(){
var count=0, verif=0, numGoodAnswer="";
for(var i=0;i<4;i++)
{
//If the answer is equal to the right answer
if(document.form_answer.a[i].checked){
count++;
//If the answer is good
if(document.form_answer.a[i].value==rightA){
//Voici le second état: l'image "B" s'affiche
newImg.src = "images/happy.gif";
newB.appendChild(newImg);
document.form_answer.answer.value=document.form.lastAns.value+1;
}
else{
//If the answer is not good
//To color in red the wrong answer
document.form_answer.answer.value=document.form.lastAns.value+0;
verif=1;
//Voici le troisième état: l'image "C" s'affiche
newImg.src = "images/bad.gif";
newB.appendChild(newImg);
numGoodAnswer="l"+i;
document.getElementById(numGoodAnswer).style.backgroundColor='#CC0000';
}
}
}
//To color in green the right answer
for(var i=0;i<4;i++)
{
if(document.form_answer.a[i].value==rightA && count != 0){
numGoodAnswer="l"+i;
time = 1;
document.getElementById(numGoodAnswer).style.backgroundColor='#33CC00';
}
}
//The user must choose an answer before to click on next
if(count == 0){
alert("Please select an answer before to click Next 1!!");
} else{
//Check if the user selected the wrong answer
//And if he did, he has to wait 7 sec
if(verif == 1)
{
newB.disabled = 'disabled';
setInterval(function () {nextPage(qnum);}, 7000);
return false;
} else {
nextPage(qnum);
return false;
}
}
}
var newTb = document.createTextNode("Next");
if(Number(qnum)== Number(nbQ))
newTb = document.createTextNode('Finish');
newB.appendChild(newTb);
ent.appendChild(newB);
var timel = quizArray.split('|');
timel = timel[1].split('//');
timel = timel[1];
document.form_answer.qid.value=document.form.IDs.value;
document.form_answer.time.value=document.form.starttime.value;
resetTimer(timel,qnum);
decrementTimer();
}else
{
if (typeof(nbQ) !== 'undefined')
{
if (qnum>=nbQ)
displayResult();
}
}
} |
Seulement il y a une ambiguité, l'image "A" et "C" s'affichent correctement par contre l'image "B" ne s'affiche pas. J'ai pourtant bien regardé le chemin de l'image et si elle était présente dans le dossier en ligne.
De plus, l'affichage de ces deux images fonctionne unniquement sous Google Chrome, ça ne fonctionne pas sous Mozilla Firefox par exemple.
Ne connaissant que très peu JavaScript, je peine énormément à essayer de corriger ce problème.
Je vous remercie pour votre aide :P
ps: si vous avez besoin de plus d'information faites le moi savoir :)
