Remplacer un mot par une image

**Steufa** · 15/08/2014, 11h21

Bonjour à tous,

Je cherche avec jQuery à afficher une image lorsque certains mots sont affichés dans mon tableau HTML.

Exemple :

<td>voiture</td> (au lieu d'afficher le mot voiture, jQuery doit afficher l'image voiture.png)

<td>velo</td> (au lieu d'afficher le mot velo, jQuery doit afficher l'image velo.png)

<td>camion</td> (au lieu d'afficher le mot camion, jQuery doit afficher l'image camion.png)

Merci d'avance

**danielhagnoul** · 15/08/2014, 12h23

Je n'ai pas testé, mais on peut mettre une classe au tag TD, par exemple <td class="showImg">voiture</td>.

$( ".showImg" ).html( '<img src="' + $( this ).text() + '.png">' );.

**Steufa** · 15/08/2014, 12h31

Comment faire pour initialiser

Code :

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

$( ".showImg" ).html( '<img src="' + $( this ).text() + '.png">' );.

?

Merci d'avance

**danielhagnoul** · 15/08/2014, 12h40

Mais comme d'habitude :

Code :

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

1
2
3
4
5
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( ".showImg" ).html( '<img src="' + $( this ).text() + '.png">' );.
 
});

**Steufa** · 15/08/2014, 12h50

Merci beaucoup, ça marche parfaitement !

Encore une petite question, comment appliquer "str.toLowerCase" à +$(this).text()+ ?

EDIT : Enfin, non, ça ne marche pas, ça affiche toutes les données HTML du code source au lieu d'afficher l'image.

Merci encore

**danielhagnoul** · 15/08/2014, 21h55

$( this ).text().toLowerCase().

Bien entendu $( this ).text() ramène tout le texte existant dans le tag TD. On peut utiliser un attribut data-*.

<td class="showImg" data-img-src="voiture.png"> </td>.

Code :

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

1
2
3
4
5
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( ".showImg" ).append( '<img src="' + $( this ).data( "imgSrc" ) + '">' );
 
});

**Steufa** · 17/08/2014, 15h14

Merci pour ta réponse, ton code affiche ceci pour les urls des images http://www.monsite.com/images/undefined

**danielhagnoul** · 17/08/2014, 21h18

Bien entendu, je ne connais pas l'URL vers vos images, il faut adapter la solution à la structure de vos dossiers.

Par exemple : <td class="showImg" data-img-src="http://danielhagnoul.developpez.com/images/imageTest.png"> </td>.

**Steufa** · 18/08/2014, 11h14

Bonjour Daniel,

J'avais bien compris ;-)

Justement, j'utilise votre code comme il se doit et l'URL de l'image devient "http://www.monsite.com/images/undefined".

**danielhagnoul** · 18/08/2014, 19h34

La magie n'existe pas, il y a donc forcément un bout de code quelque part qui change l'URL.

Une option dans un plugin ?

**Steufa** · 19/08/2014, 11h50

Bonjour Daniel,

Tu peux tester ce code HTML, tu verras par toi même ;-)

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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>imageTest</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">$(function(){$( ".showImg" ).append( '<img src="http://danielhagnoul.developpez.com/images/' + $( this ).data( "imgSrc" ) + '">' );});</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td class="showImg" data-img-src="imageTest.png"></td>
</tr>
</table>
</body>
</html>

Merci d'avance

**danielhagnoul** · 19/08/2014, 12h21

"Mea culpa, mea culpa, mea maxima culpa" !

Une erreur de débutant !

Voilà le genre d'erreur qu'on laisse facilement passé lorsqu'on ne teste pas. Ici "this" c'est le document.

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>imageTest</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
		$(function(){
			var jObjImg = $( ".showImg" );
 
			jObjImg.append( '<img src="http://danielhagnoul.developpez.com/images/' + jObjImg.data( "imgSrc" ) + '">' );
		});
	</script>
</head>
<body>
	<table width="200" border="1">
		<tr>
			<td class="showImg" data-img-src="imageTest.png"></td>
		</tr>
	</table>
</body>
</html>

**Steufa** · 19/08/2014, 12h40

Merci Daniel pour ta réponse et pour ton aide, ça marche ;-)

En revanche, il y a un petit Bug, j'ai plusieurs images différentes dans ce tableau, et c'est toujours la même image qui est affichée. De plus, comment pourrais-je supprimer le texte dans le <td class="showImg" data-img-src="imageTest.png">Info image test</td> ?

Merci d'avance

**danielhagnoul** · 19/08/2014, 18h31

Pour plusieurs TD avec cette classe, le même traitement dans une méthode each() :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>imageTest</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
		$(function(){
 
			$( ".showImg" ).each( function( i, item ){
				$( item ).append( '<img src="http://danielhagnoul.developpez.com/images/' + $( item ).data( "imgSrc" ) + '">' );
			});
 
		});
	</script>
</head>
<body>
	<table width="200" border="1">
		<tr>
			<td class="showImg" data-img-src="imageTest.png"></td>
		</tr>
		<tr>
			<td class="showImg" data-img-src="avatarDVJH.jpg"></td>
		</tr>
		<tr>
			<td class="showImg" data-img-src="julia2.png"></td>
		</tr>
	</table>
</body>
</html>

**Steufa** · 19/08/2014, 18h41

Merci ça marche parfaitement, juste une dernière question après je ne t’embête plus

Comment pourrais-je supprimer le texte dans le <td class="showImg" data-img-src="imageTest.png">Info image test</td> ?

**danielhagnoul** · 19/08/2014, 19h41

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>imageTest</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
		$(function(){
 
			$( ".showImg" ).each( function( i, item ){
 
                                // html() remplace le contenu, empty() vide le contenu, append() ajoute au contenu
 
				$( item ).html( '<img src="http://danielhagnoul.developpez.com/images/' + $( item ).data( "imgSrc" ) + '">' );
			});
 
		});
	</script>
</head>
<body>
	<table width="200" border="1">
		<tr>
			<td class="showImg" data-img-src="imageTest.png"></td>
		</tr>
		<tr>
			<td class="showImg" data-img-src="avatarDVJH.jpg"></td>
		</tr>
		<tr>
			<td class="showImg" data-img-src="julia2.png"></td>
		</tr>
	</table>
</body>
</html>

**Steufa** · 19/08/2014, 19h45

Daniel, merci beaucoup pour ton aide

**Steufa** · 20/08/2014, 12h51

Bonjour Daniel,

Je reviens vers toi, car j'ai un petit soucis, en effet, j'utilise ExcellentExport.js pour exporter mon tableau au format CSV. Lors de l'export, le texte dans <td class="showImg" data-img-src="imageTest.png">Info image test</td> ne s'exporte plus.

ExcellentExport.js : https://github.com/jmaister/excellentexport

**devyan** · 20/08/2014, 15h25

Bonjour,

Je viens de voir ce message et me demandais si il était vraiment nécessaire d'utiliser du JavaScript pour obtenir ce résultat ...

Est-ce qu'un on vieux IMG/ALT n'aurait pas fait l'affaire lors de la génération du HTML ?

Code :

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

1
2
 
<img src="http://www.monsite.com/images/voiture.png" alt="voiture" />

Si l'image n'existe pas alors on voit le texte.

devYan.

**devyan** · 20/08/2014, 15h45

Envoyé par Steufa

Bonjour Daniel,

Je reviens vers toi, car j'ai un petit soucis, en effet, j'utilise ExcellentExport.js pour exporter mon tableau au format CSV. Lors de l'export, le texte dans <td class="showImg" data-img-src="imageTest.png">Info image test</td> ne s'exporte plus.

ExcellentExport.js : https://github.com/jmaister/excellentexport

Normal puisqu'il n'est plus présent après l'exécution de la commande de remplacement : $( item ).html( ... );

Si ExcellentExport.js exporte les textes masqués tu peux essayer de remplacer la ligne de code par :

Code :

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

1
2
 
$( item ).wrapInner('<div class="display-none" />').append( '<img src="http://danielhagnoul.developpez.com/images/' + $( item ).data( "imgSrc" ) + '">' );