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

Citation:

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

26/01/2012, 08h22	#2
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 148 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 148 Points : 7 295 Points : 7 295	Bonjour, Tu peux mixer les deux fonctions dans une seule fonction. A+.
	00

26/01/2012, 13h38	#3
vanessatonton Invité de passage Inscription : octobre 2010 Messages : 19 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 19 Points : 0 Points : 0	Bonjour et merci. Mais comment? Avez-vous un exemple? Merci, Vanessa.
	00

26/01/2012, 22h38	#5
vanessatonton Invité de passage Inscription : octobre 2010 Messages : 19 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 19 Points : 0 Points : 0	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.
	00

26/01/2012, 23h20	#6
vanessatonton Invité de passage Inscription : octobre 2010 Messages : 19 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 19 Points : 0 Points : 0	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?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email