Remplacer texte <p> par une image dans fichier html
Bonjour,
Voilà j'ai une page toute simple html avec deux liens en <a href> sur lesquels, j'aimerais que dès qu'on passe la souris dessus, cela efface un texte (balise p), pour y afficher l'image 1 ou l'image 2 (en fonction du lien qu'on survole).
Evidemment je suis débutant en ajax donc je patoge un peu ...
Voilà le code :
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
| <html>
<head>
<title>Page de test</title>
<link rel="stylesheet" media="screen" type="text/css" title="Classic" href="exo3.css" />
<script language="javascript">
function flag(type){
if (type == 1)
{
//si la variable reçu vaut 1
//Suppression de l'ancien contenu
effacerTexte(testbox);
//Ajout du nouveau contenu
image1 = new Image();
image1.src = "english.jpg";
window.document.testbox.src = image1.src;
}
else if( type == 2 )
{
//si la variable reçu vaut 2
//Suppression de l'ancien contenu
effacerTexte(testbox);
//Ajout du nouveau contenu
image2 = new Image();
image2.src = "french.gif";
window.document.testbox.src = image2.src;
}
else
{
//si la variable reçu vaut 0
//Suppression de l'ancien contenu
effacerTexte(testbox);
//Ajout du nouveau contenu
document.getElementById("testbox").innerHTML = "Bienvenue. Passez la souris sur l'un des deux liens !";
}
}
function effacerTexte(el) {
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var noeudFils = el.childNodes[i];
el.removeChild(noeudFils);
}
}
}
}
</script>
</head>
<body>
<p id="testbox">Bienvenue. Passez la souris sur l'un des deux liens!</p>
<p class="essai">
<a href="Exo3.html" onmouseover="flag(1)" onmouseout="flag(0)">English</a>
<a href="Exo3.html" onmouseover="flag(2)" onmouseout="flag(0)">Français</a></p>
</body>
</html> |
On m'a parlait d'une fonction setAttribute mais je n'ai pas trop compris les deux paramètres de cette fonctions .. Vous avez une petite aide pour m'aider à afficher l'image dans la balise <p> ?
Aussi, quand j'utilise ma fonctionne effacerTexte, cela fonctionne mais le deboggeur de Mozilla me donne cette avertissement :
Avertissement*: Élément référencé par son ID/NAME dans le contexte global. Utilisez la propriété standard du W3C «*document.getElementById()*» à la place.
C'est parce que j'utilise quelque chose qui fonctionne là avec de la chance ou autre ?
Merci d'avance !
