Sujet Précédent Sujet Suivant

Changement texte au clic sur page Html.

Fermé
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012 - 25 janv. 2012 à 23:44
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012 - 27 janv. 2012 à 21:35
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, ainsi que changer ce même texte au clic, 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 :

<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 :

<!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.



A voir également:

11 réponses

Réponse 1 / 11
Mathieu Loustau
25 janv. 2012 à 23:48
slt,
j'ai eu le meme probleme à un moment, donc jai deja un script donc je te passe tout. En gros, avec le mien, tu click -> ce que tu veux apparait(texte/image)
tu reclick -> ca disparait le script que je te passe a deja du texte de mis donc copie le simplement et texte le avant tout modifs pour mieux comprendre apres, a toi de le changer à ta guise ;) 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Les nanotechnologies</title>
		<link rel="stylesheet" href="" />
		
	<script type="text/javascript">

		<!--
			function AfficherCacher(texte) 
			{
				var test = document.getElementById(texte).style.display;
				if (test == "block") 
				{
					document.getElementById(texte).style.display = "none";
				}
				else 
				{
					document.getElementById(texte).style.display = "block";
				}
			}
		//-->

	</script>
		
	</head>

<body>
	
	<div class="contenu">
	
		<div id="definition" class="sous_partie" onclick="AfficherCacher('part_definition');">Définition <span style="float : right; color: black; font-size : small;"><em>Cliquer pour masquer/afficher la sous-partie</em></span></div>
		<div id="part_definition">
			<p>Les nanotechnologies sont l'étude, la fabrication et la manipulation de structures à l'échelle du nanomètre (entre 1 et 100 nm). Le « nano » est le milliardième d'une unité de mesure, un nanomètre représente ainsi le milliardième de mètre : 10-9 m. C'est donc le même ordre de grandeur que le virus (70 nm) et l'ADN (2nm).</p> <br />
		</div>
		</div>
		
		</body>
		</html>



amuse toi bien et bonne chance :)
1
Mathieu Loustau
25 janv. 2012 à 23:55
PS ta question va plutot dans la partie webmastering que programmation... ;)
0
Mathieu Loustau
25 janv. 2012 à 23:55
désolé pour les fautes, je suis mort de fatigue :s
0
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012
26 janv. 2012 à 00:05
Ahah pas de soucis.
Arg, je ne sais jamais dans quelle rubrique poster ;/
0
Réponse 2 / 11
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012
26 janv. 2012 à 00:02
Bsr Mathieu,
et merci pour ta réponse.
En fait ce que je voudrais c'est que [en prenant ton exemple de code] lorsque l'on clic sur ton "Cliquer pour masquer" l'image apparaisse et que simultanément ton "Cliquer pour masquer" se transforme en autre chose, "Cliquer pour voir la suite" par exemple.
En fait que "Cliquer pour masquer" change aussi. C-à-dire qu'il y ait 2 actions simultanées au clic : chargement de l'image + changement du texte cliqué...
0
Réponse 3 / 11
Mathieu Loustau
26 janv. 2012 à 00:09
hmmmm, tu veux faire apparaitre + modifier ce qui est deja la?

ca a l'air assez compliqué, si jetais toi, je ferai apparaitre image + le texte et simplement faire disparaitre le texte deja present. tu comprends?
c'est pas super compliqué avec tout ce qu'on a deja la, joue avec la propriété display : block ou none...
tu vois ce que je veux dire?
sinon demain je le ferai mais la trop fatigué et pas vraiment le temps :s
0
Réponse 4 / 11
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012
26 janv. 2012 à 00:15
Je voudrais qu'il y ait déjà une phrase sur ma page.
Lorsque l'on clique sur cette phrase, cette dernière change [exemple de "cliquer ici" à "ben pourquoi t'as cliqué"] et que simultanément au changement de texte [c-à-d au clic], une image apparaisse à une place bien précise.

Exemple avec ce code :
<!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>

Qui serait parfait s'il permettait aussi/en plus de faire apparaître une image au clic.
Est-ce plus claire? :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
Modifié par lokakilo le 26/01/2012 à 00:37
Pas besoin Mathieu Loustau ;)

En reprenant le code de Mathieu Loustau : 
<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8" />  
  <title>Les nanotechnologies</title>  
  <link rel="stylesheet" href="" />  
    
 <script type="text/javascript">  

  <!--  
   function AfficherCacher(texte, text1, text2)   
   {  
    var test = document.getElementById(texte).style.display;  
    if (test == "block")   
    {  
     document.getElementById(texte).style.display = "none";  
    }  
    else   
    {  
     document.getElementById(texte).style.display = "block";  
    }  
                                   if(document.getElementById(text1).style.display == "block")  {  
                        document.getElementById(text1).style.display = "none";  
document.getElementById(text2).style.display = "block";  
}  
else {  
 document.getElementById(text2).style.display = "none";  
document.getElementById(text1).style.display = "block";  
}  
}
     

  //-->  

 </script>  
    
 </head>  

<body>  
   
 <div class="contenu">  
   
  <div id="definition" class="sous_partie" onclick="AfficherCacher('part_definition', 'text1', 'text2');">Définition <span style="float : right; color: black; font-size : small;"><em><span id="text1">Cliquer pour afficher la sous-partie</span><span id="text2" style="display: none; ">Cliquer pour masquer la sous-partie</span></em></span></div>  
  <div id="part_definition">  
   <p>Les nanotechnologies sont l'étude, la fabrication et la manipulation de structures à l'échelle du nanomètre (entre 1 et 100 nm). Le « nano » est le milliardième d'une unité de mesure, un nanomètre représente ainsi le milliardième de mètre : 10-9 m. C'est donc le même ordre de grandeur que le virus (70 nm) et l'ADN (2nm).</p> <br />  
  </div>   
  </div>  
  </body>  
  </html>

Restons libre, lutons contre SOPA/PIPA !
0
Réponse 6 / 11
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012
26 janv. 2012 à 00:52
Oula merci bcp mais là je crois que ça devient trop compliqué pour moi...

Je pensais que c'était peut-être possible de partir plutôt sur cette base de code, sans blocs :

<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>


<body>
</body>
</html>

</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>

On ne peut donc pas appliquer 2 actions différentes à mon texte?
Via un onclick="javascript:transformer(this) par exemple?
0
Réponse 7 / 11
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
26 janv. 2012 à 09:39
Mais que veux tu faire concrètement ?
0
Réponse 8 / 11
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012
26 janv. 2012 à 13:40
Je voudrais qu'il y ait déjà une phrase sur ma page.
Lorsque l'on clique sur cette phrase, cette dernière change [exemple de "cliquer ici" à "ben pourquoi t'as cliqué"] et que simultanément au changement de texte [c-à-d au clic], une image apparaisse à une place bien précise.

:)
0
Réponse 9 / 11
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
26 janv. 2012 à 14:10
Ok et est ce que le code que je tai mis fonctionne parce qu'il est censé faire ça ?
0
Réponse 10 / 11
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012
26 janv. 2012 à 22:00
Oui ça fonctionne, mais c'est le bloc qui contient le texte qui est réactif au clic dessus et non le texte lui-même.
0
Réponse 11 / 11
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012
26 janv. 2012 à 22:21
Solution trouvée grâce à un membre :

<!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(obj)
{
image = document.getElementById("monImage" );
if (monImage.style.display != "none" ) {
monImage.style.display = "none";
} else {
monImage.style.display = "inline";
}

var texte = obj.innerHTML;
if (texte=="Plus d'informations...") {
obj.innerHTML = "Moins d'informations...";
} else {
obj.innerHTML = "Plus d'informations...";
}

}
</script>

<a href=# onClick="javascript:swap(this);">Plus d'informations...</a><img src="mon_image.jpg" id="monImage" hspace="29" vspace="45" border="0" style="display:none;">
</map>
</body>
</html>


Je te remercie pour ton aide et patience ;)
0
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012
26 janv. 2012 à 22:29
En fait j'ai encore un problème,
je voudrais mettre des accents dans le texte qui change, et ça semble poser problème...
Une suggestion?
:)
0
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
26 janv. 2012 à 23:00
Met ça tout en haut de ta page : 
<?xml version="1.0" encoding="UTF-8"?>
0
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
26 janv. 2012 à 23:04
(au dessus de la ligne "doctype...")
0
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012
26 janv. 2012 à 23:23
Merci!
En fait on m'a indiqué ça sur un autre forum qui marche aussi :

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";
}
}


Bon là je vais abuser un peu de ta gentillesse, mais avec cette base de code, peut-on au lieu de charger une image, en charger deux simultanément? [avec des positions différentes sur la page]
0
vgnepmb Messages postés 21 Date d'inscription mercredi 25 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012
26 janv. 2012 à 23:29
En fait j'imagine que oui, en déclarant une seconde image.
J'ai essayé de "bidouiller", mais ça fonctionne pas du tout!
:/
0