Changer texte clic page Html sans recharger

vgnepmb Messages postés 21 Date d'inscription   Statut Membre Dernière intervention   -  
 banray -
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. C-à-dire qu'il y ait 2 actions simultanées au clic : chargement de l'image + changement du texte cliqué...

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:

4 réponses

Réponse 1 / 4
Zhp Messages postés 198 Date d'inscription   Statut Membre Dernière intervention   37
 
Bonjour,

Oui tu peut faire marcher les deux en même temp. Il faut regrouper les actions dans une seul fonction. Voici un petit exemple de ce que ça peut donnée ^^ 

<!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;" /> 
</body> 
</html>

(J'espère que je t'es pas trop mit des bêtises)

Sinon pour information ton problème n'est vraiment un problème de HTML mais plutôt de Javascript. Les deux sont liés mais il faut savoir faire la distinction. Cela t'aidera pour apprendre et pour chercher les bonne solution sur internet ^^
1
Réponse 2 / 4
vgnepmb Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 
Alors ça ça m'a l'air PARFAIT!
Je vais le modifier pour essayer de placer mon image, mais à priori ce serait la solution.
Merci beaucoup!!!
0
Réponse 3 / 4
vgnepmb Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 
Confirmation : ça marche super bien!!!
Mille mercis pour ton aide.
0
vgnepmb Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 
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
Zhp Messages postés 198 Date d'inscription   Statut Membre Dernière intervention   37
 
Des accents qui pose problème ? qu'est qui s'affiche exactement à la place des accents ? des caractères bizarres ?
0
Réponse 4 / 4
banray
 
Salut,

j'ai besoin d'utiliser le DOM pour de l'interactivité dans le même style, texte et src d'une image qui changent.

Je me demandait au niveau de la compatibilité des navigateurs (du coup pour .innerHTML, mais pas que) est que IE, FF, Opéra et Safari, Chrome interpréteront tout ? Faut il faire des scripts différents fonction des navigateurs(garglllll).

IE, FF, Opéra, Safari, Chrome c'est le minimum dont j'ai besoin. S'il faut un script différent pour chacun autant tout faire en php(galerie dynamique) ou même Ajax(euh justement si c'est le javascript qui pose problème???) tant pis pour la latence de l'appel au serveur à chaque clic.
0