Changement texte au clic sur page Html sans recharger la page.
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:
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:
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.
