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.