Remplacer texte <p> par une image dans fichier html

**bob633** · 14/02/2011, 15h43

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 :

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
<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 !

**Bovino** · 14/02/2011, 18h17

Evidemment je suis débutant en ajax donc je patoge un peu ...

Ca pourrait être gênant si ton code avait quelquechose à voir avec AJAX, mais rassure-toi, ce n'est pas le cas

Ceci dit, je ne sais pas ce qui t'as inspirer le code que tu montres, mais tu devrais changer de référence

On m'a parlait d'une fonction setAttribute mais je n'ai pas trop compris les deux paramètres de cette fonctions

T'as pas dû chercher longtemps

Code :

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

setAttribute("attribut", "valeur de l'attribut");

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.

Tu utilises la notation

Code :

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

window.document.testbox.src = image1.src;

qui est une mauvaise pratique pour référencer un élément à partir de son attribut name, dans ton cas, l'attribut correspondant à testbox est un id, ta méthode est donc doublement mauvaise. Comme précisé dans le message d'erreur, on référence un id par getElementById.
Ceci dit, cet élément est une balise <p>, qui n'a donc pas d'attribut src...

En conclusion

C'est parce que j'utilise quelque chose qui fonctionne là avec de la chance ou autre ?

Oui, tu as vraiment de la chance que ça fonctionne...

Tu devrais commencer par lire un tuto sur JavaScript.

**bob633** · 14/02/2011, 18h50

Merci bien pour ta réponse.

C'est un tp que j'avais à faire en cours, mais c'était la fin et j'ai pas eu le temps de faire cette partie, voilà pourquoi le sujet et bidon

Sinon j'ai modifié la partie du code pour affecter l'image à la balise p :

Code :

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

1
2
var img = document.createElement('img');
        img.setAttribute("p", "english.jpg");

Cependant, ça fonctionne pas, mais je me doute car je n'utilise même pas l'id textbox ...

Cependant, en regardant bien sur internet, jamais on ne parle de la balise p comme attribut pour les images .. cela est vraiment possible ? Car ce sont toujours les élément src, class, border, style etc

**Bovino** · 14/02/2011, 18h55

Cependant, en regardant bien sur internet, jamais on ne parle de la balise p comme attribut pour les images ..

p est une balise, pas un attribut !
L'adresse d'une image, c'est l'attribut src

Ceci dit, tu n'as pas besoin d'utiliser setAttribute ici...
Et ensuite, nommer une variable "img" est très maladroit...

Code :

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

1
2
var mon_img = document.createElement('img');
mon_img.src = "english.jpg";

Reste plus qu'à insérer l'image dans la balise...

J'espère que j'aurais une bonne note à ton TP

**bob633** · 14/02/2011, 20h27

Arf j'ai honte de faire des erreurs comme ça !

En fait je fais pas mal de web mais c'est vrai que dab pour les fonctions JS je trouvais des fonctions sur le net que j'adaptais à ma sauce, erreur à ce que je vois maintenant où je bloque sur des trucs de bases ..

Bref j'ai réussi !

Voilàa ce que j'ai rajouté :

Code :

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

1
2
3
var imgNewEn = document.createElement('img');
imgNewEn.src = "english.jpg";
document.getElementById("testbox").innerHTML = "<img src=\"" + imgNewEn.src + "\">";

Est-ce le meilleur moyen ? Sinon sur le tp c'était marqué qu'il fallait utiliser la fonction setAttribute .. setAttribute fait le même principe ?

Sinon ce TP n'est pas noté :p Je le fais juste pour moi =) D'ailleurs je vois que tu es de Bdx, je suis à l'IUT Info de Bdx 1 .. tu connais peut-être le professeur qui donne ce genre de TP

Sinon pour revenir sur le message :

Code :

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

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.

Il me l'affiche lorsque ma fonction effacerTexte est appelé :/

Merci bien en tout cas !

**Bovino** · 14/02/2011, 20h52

Est-ce le meilleur moyen ?

C'est un moyen habituel de le faire, même si les puristes (pour plein de bonnes raisons) préfèrent l'approche purement DOM (createElement, appendChild) mais qui dans ton cas nécessitent plus de traitements.

Sinon sur le tp c'était marqué qu'il fallait utiliser la fonction setAttribute .. setAttribute fait le même principe ?

Oui et non

La création du DOM génère un lien dynamique entre les attributs HTML standards et les propriétés des objets JavaScript correspondants. Donc oui, l'utilisation de setAttribute ou de .src produira le même effet, mais setAttribute me semble conceptuellement erroné : puisque tu cherches à modifier en JavaScript l'image, c'est bien la propriété qui est en question, pas l'attribut HTML, mais c'est plus théorique que pratique. Resterait à tester les deux niveau performances...

tu connais peut-être le professeur qui donne ce genre de TP

Non, pas à priori. Mais j'ai une tendance à me méfier de ce que peuvent enseigner les profs en JavaScript (je précise : du fait de ce que j'ai été amené à en lire sur ce forum) car beaucoup n'ont pas compris ou pas prit en compte les évolutions fondamentales de ce langage ces dernières années...

**Eric2a** · 14/02/2011, 21h10

Salut,

Ci-dessous une méthode simplifiée utilisant uniquement innerHTML (même si la méthode DOM est à privilégier).

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
function flag(type){
	var html;
	var elt=document.getElementById('testbox');
	if(elt){
		switch(type){
			case 1:
				html='<img src="english.jpg" />';
				break;
			case 2:
				html='<img src="french.gif" />';
				break;
			default:
				html="Bienvenue. Passez la souris sur l'un des deux liens !";
		}
		elt.innerHTML=html;
	}
}

Dans ce cas, il n'est pas nécessaire d'avoir la fonction effacerTexte() car innerHTML écrase l'ancien contenu pour remplacement.

Pour info, ci-dessous la fonction effacerTexte() modifiée.

Code :

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

1
2
3
4
5
6
function effacerTexte(){
	var elt=document.getElementById('testbox');
	if(elt){
		while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
	}
}

Elle est nécessaire uniquement si tu n'utilises pas innerHTML.

**Loceka** · 15/02/2011, 08h33

Envoyé par Bovino

La création du DOM génère un lien dynamique entre les attributs HTML standards et les propriétés des objets JavaScript correspondants. Donc oui, l'utilisation de setAttribute ou de .src produira le même effet, mais setAttribute me semble conceptuellement erroné : puisque tu cherches à modifier en JavaScript l'image, c'est bien la propriété qui est en question, pas l'attribut HTML, mais c'est plus théorique que pratique. Resterait à tester les deux niveau performances...

Pô compris

Y'a une différence entre .nomAttribut et setAttribute("nomAttribut", ...) ? (hormis le fait que la première peut planter si un attribut du même nom n'existe pas déjà)

**Bovino** · 15/02/2011, 09h53

Envoyé par Loceka

Pô compris

Envoyé par Loceka

Y'a une différence entre .nomAttribut et setAttribute("nomAttribut", ...) ? (hormis le fait que la première peut planter si un attribut du même nom n'existe pas déjà)

Oui, j'avais déjà fait une page d'exemple à ce sujet : http://dmouronval.developpez.com/tes...Attributs.html

**Loceka** · 15/02/2011, 10h18

Ok donc si je comprends bien ça fait pas du tout la même chose.

Le premier ajoute un attribut uniquement javascript à l'objet (monDiv.monAttr) tandis que le second ajoute un attribut uniquement HTML à l'objet (monDiv.setAttribute("monAttr", ...)), les deux étant mutuellement exclusifs (on ne peut pas récupérer le premier via la méthode prévue pour récupérer les attributs HTML et on ne peut pas récupérer le second par la méthode prévue pour récupérer les propriétés javascript).

On en apprend tous les jours, merci bien.