Changement texte au clic sur page Html sans recharger la page.

**vanessatonton** · 25/01/2012, 23h06

Bonsoir à tous,
voilà mon problème : j'aimerais charger une image en cliquant sur du texte sur ma page Html, image qui devra avoir une position bien précise, et tout cela sans recharger la page.

Le but est qu'au premier clic sur le texte l'image apparaisse et qu'au second elle disparaisse. J'ai réussi à trouver ça en fouillant un peu et en me faisant aidée :

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
<html>
<head>
<title>
Test
</title>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
</head>
<body>
<script language="javascript">
function swap()
{
image = document.getElementById("monImage" );
if (monImage.style.display != "none" )
{
monImage.style.display = "none";
}
else
{
monImage.style.display = "inline";
}
}
</script>
 
	<a href=# onClick="swap();">Cliquez ici</a><img src="mon_image.jpg" id="monImage" hspace="29" vspace="45" border="0" style="display:none;" />
</body>
	</html>

Ça marche et ça me convient.
Maintenant j'aimerais que le texte change au clic.
J'ai trouvé ça qui fonctionne bien :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function transformer(obj){
var texte = obj.innerHTML;
if (texte=="Plus d'informations...") {
obj.innerHTML = "Moins d'informations...";
}
else {
obj.innerHTML = "Plus d'informations...";
}
}
</script>
 
<a href="javascript:visibilite('infos_1');" onclick="javascript:transformer(this);">Plus d'informations...</a>
 
<div id="infos_1" style="display:none;">
Les informations à insérer
</div>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
</head>
 
<body>
</body>
</html>

Je ne sais pas si l'on peut utiliser les 2 codes sur la même page ["mixer" les 2?]...? Je suis vraiment débutante en Html...
D'avance merci pour votre aide.

**andry.aime** · 26/01/2012, 08h22

Bonjour,

Tu peux mixer les deux fonctions dans une seule fonction.

A+.

**vanessatonton** · 26/01/2012, 13h38

Bonjour et merci.
Mais comment? Avez-vous un exemple?

Merci,
Vanessa.

**andry.aime** · 26/01/2012, 14h04

Quelque chose comme ça

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function swap(obj)
{
	var monImage = document.getElementById("monImage" );
	var texte = obj.innerHTML;
	if (texte=="Plus d'informations...") {
		obj.innerHTML = "Moins d'informations...";
		monImage.style.display = "none";
	}else {
		obj.innerHTML = "Plus d'informations...";
		monImage.style.display = "inline";
	}
}

**vanessatonton** · 26/01/2012, 22h38

PARFAIT!!!
Merci beaucoup pour ton aide.
Dernière question : le texte qui change a-t-il un nombre limité de caractères?
Car ma phrase se retrouve sur 2 lignes.

**vanessatonton** · 26/01/2012, 23h20

En faite c'est bon pour le problème de ligne[s].
Par contre, hum, nouvelle question : est-ce que je peux faire exactement la même chose mais en chargeant non pas une, mais deux images en même tps à des endroits différents?

**andry.aime** · 27/01/2012, 05h24

Envoyé par vanessatonton

Par contre, hum, nouvelle question : est-ce que je peux faire exactement la même chose mais en chargeant non pas une, mais deux images en même tps à des endroits différents?

ça te coute combien d'essayer

, oui je sais qu'on est dans la crise

Changement texte au clic sur page Html sans recharger la page.

JavaScript

Discussions similaires

Partager

Partager