Ils ont besoin de votre aide

13:35 ampli (Matériel/Hardware)
13:35 Recherche d'un Formulaire spécifique !! (Programmation)
13:35 Problèmes de lag.. . (Jeux vidéos)
13:33 Je ne paviens pas à redimensionner... (Infographie/Photo)
13:31 Envoi photos bloqué par norton (Messagerie/Chat)
13:30 help map chargment CSS and CS 1.6 (Jeux vidéos)

Statut : Résolu

JS - texte affiché lors d'un clic sur un lien

Posté par

Alaedyna, le vendredi 21 septembre 2007 à 21:19:13

Bonsoir,

Je cherche un code Javascript qui me permettrait d'afficher un texte dans une zone définie lorsque je clique sur un lien sans pour autant que le navigateur change de page.
La page en question est composée de blocs paramétrés via css.
Ma requête repose sur l'importation du contenu de page (textes, images, formulaires...) dans cette zone définie. Cela présuppose que ce qui doit être affiché est présent et visible sur d'autres pages.
J'ai cherché sur la Toile sur des sites spécialisés dans les codes JS et n'ai cependant rien trouvé de tel. Le code s'en rapprochant le plus est ce dernier :

Dans la balise <head> nous avons :

<SCRIPT LANGUAGE="JavaScript">
function ChangeMessage(message,champ)
  {
  if(document.getElementById)
    document.getElementById(champ).innerHTML = message;
  }
</SCRIPT>

et dans <body> :

<A HREF="page.htm" onMouseOver="ChangeMessage('Texte','ejs_texte')" onMouseOut="ChangeMessage('','ejs_texte')">Lien</A>

Ce code source affiche un texte au passage de la souris. Y a-t-il un moyen de le "bidouiller" pour pouvoir avoir le rendu que je désire ?

Merci d'avance et bonne fin soirée,
Alaedyna. N'oubliez pas de remercier si vous voulez que nous vous aidons.
× C'est une habitude délétère d'étrangler ceux que l'on préfère. × [ Amélie Nothomb ]

Configuration: Windows XP
Firefox 2.0.0.7

Répondre à Alaedyna Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Dalida, le vendredi 21 septembre 2007 à 22:00:06

salut,

pour déclencher ton action au clic il faut changer d'évènement html :

<a href="page.htm" onclick="ChangeMessage('Texte','ejs_texte')" >Lien</a>

[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

BoOst, le vendredi 21 septembre 2007 à 22:48:53

salut

je t'avoue que j'ai pas tout compris ce que tu souhaite faire exactement :)
si tu veut juste utiliser le lien pour déclencher l'action "onclick", tu peut utiliser :

<A HREF="#" onMouseOver="ChangeMessage('Texte','ejs_texte')" OnMouseOut="ChangeMessage('','ejs_texte')">Lien</A>

(pour que le contenu reste, enlever le "onmouseout")

si tu souhaite en fait charger une page dans un block en cliquant sur des liens (dynamiquement),
le plus simple est encore d'utiliser une iframe :

<html>
<head>
</head>
<body>
	<div id="moncadre">
		<iframe src="" name="testiframe" scrolling="auto" frameborder="0" width="220" height="320">
		</iframe>
        </div>

<A HREF="#" onclick="frames['testiframe'].location.href = 'http://www.allocine.fr'; return false">page 1</a>
<A HREF="#" onclick="frames['testiframe'].location.href = 'http://www.dh-prod.com'; return false">page 2</a>

</body>
</html>

j'espère que ça t'aidera, sinon n'hésite pas a demander

Répondre à BoOst

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Alaedyna, le samedi 22 septembre 2007 à 13:12:41

Merci à vous deux pour vos réponses.

@ Dalida : J'ai déjà essayé cette méthode et je suis navrée de t'annoncer que cela ne marche pas.
@ BoOst : J'aimerais ne pas à avoir à utiliser de iframe.

En fait, ce que 'jaimerais pouvoir faire, c'est simplement changer le texte dans une zone définie en cliquant sur un lien sans avoir à changer de page. Autrement dit, il faudrait un script, qui aille chercher le contenu des pages et qui le place dans cette zone sans que les différents textes se superposent, s'entremêlent... N'oubliez pas de remercier si vous voulez que nous vous aidons.
× C'est une habitude délétère d'étrangler ceux que l'on préfère. × [ Amélie Nothomb ]

Répondre à Alaedyna

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

RAD ZONE, le samedi 22 septembre 2007 à 13:26:42

SALUT

cherche la DEMO JS
form ou layout je crois . enfin cherche dans les exemple :-))
RAD ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Alaedyna, le samedi 22 septembre 2007 à 13:42:17

Merci Rad Zone pour ta réponse et le lien,

D'une part, il y a une démo qui, à quelques détails près, correspond bien à ma requête, il s'agit de celle se trouvant dans Layout Widgets et se nommant Content Pane.

J'aimerais comprendre deux-trois choses du code.

Tout d'abord, je vois qu'il y a une fichier .js à charger :

<script type="text/javascript" src="../../dojo.js"></script>

Ce fichier est-il bien nécéssaire ? Je voudrais créer le mien de manière à ce qu'il soit hébergé chez mon hébergeur.

Puis ensuite, des lignes que je ne comprends pas à quoi elles correspondent :

<script language="JavaScript" type="text/javascript">
	dojo.require("dojo.event.*");
	dojo.require("dojo.widget.LayoutContainer");
	dojo.require("dojo.widget.LinkPane");
	dojo.require("dojo.widget.ContentPane");
	dojo.require("dojo.widget.Tree");
	dojo.require("dojo.widget.TreeSelector");
	dojo.require("dojo.widget.FloatingPane");
	dojo.require("dojo.widget.Dialog");
</script>

Quant au reste du code, c'est de l'hébreu pour moi... N'oubliez pas de remercier si vous voulez que nous vous aidons.
× C'est une habitude délétère d'étrangler ceux que l'on préfère. × [ Amélie Nothomb ]

Répondre à Alaedyna

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

RAD ZONE, le samedi 22 septembre 2007 à 13:54:54

bon plus simple et + lege !! :-))

ici

telecharge les sources !! et travaille avec

RAD ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Alaedyna, le samedi 22 septembre 2007 à 14:05:36

Merci pour ton lien, mais je ne souhaite pas que mes pages s'ouvrent dans des boîtes. N'oubliez pas de remercier si vous voulez que nous vous aidons.
× C'est une habitude délétère d'étrangler ceux que l'on préfère. × [ Amélie Nothomb ]

Répondre à Alaedyna

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

RAD ZONE, le samedi 22 septembre 2007 à 14:10:27

voila le site officiel de l exemple que tu trouvais pas mal

http://dojotoolkit.org/

il vas faloir que tu lise :-))

RAD ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Alaedyna, le samedi 22 septembre 2007 à 15:06:03

Je suis allée sur le site mais je n'ai pas trouvé ce que je cherchais. :s
En revanche en continuant mes recherches, je suis tombée sur http://javascriptutil.free.fr/layer/layer.htm
L'ennui est que tout le contenu de mon site se concentrerait sur une seule et même page. Je préfèrerais qu'il s'étende sur plusieurs pages, surtout que j'insèrerai très certainement des éléments multimédias. N'oubliez pas de remercier si vous voulez que nous vous aidons.
× C'est une habitude délétère d'étrangler ceux que l'on préfère. × [ Amélie Nothomb ]

Répondre à Alaedyna

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

RAD ZONE, le samedi 22 septembre 2007 à 15:47:40

Je suis allée sur le site mais je n'ai pas trouvé ce que je cherchais
telecharge le dojotool kit !-))

En revanche en continuant mes recherches, je suis tombée sur http://javascriptutil.free.fr/layer/layer.htm ne fonctionne que sur IE!!!

RAD ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Alaedyna, le samedi 22 septembre 2007 à 16:22:08

Je suis un boulet mdrr. J'ai téléchargé le DojoTool Kit ! Bon maintenant je suis perdue il y a trop de choses dedans !!! N'oubliez pas de remercier si vous voulez que nous vous aidons.
× C'est une habitude délétère d'étrangler ceux que l'on préfère. × [ Amélie Nothomb ]

Répondre à Alaedyna

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

RAD ZONE, le samedi 22 septembre 2007 à 16:40:54

bon :-))

apres les outils ;-)

les tuto ! et un forum specialise
http://javascript.developpez.com/

bonne chance ! ;-))))

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

BoOst, le dimanche 23 septembre 2007 à 03:17:17

salut
je crois avoir un peu plus compris ce que tu voulais :)

le code "content_plane" que tu cite pus haut fonctionne lui aussi avec un iframe,
si tu veut faire sans, alors tu peut utiliser simplement des cadres "pré-chargés" et les supperposer, puis jouer sur la visibilité :

<html>
<head>
	<script>
	var num_div = 2;
	function showdiv( num ) {
		for (var i=1;i<=num_div;i++) {
			if (i == num ) {
				document.getElementById("contenu_" + i).style.visibility = 'visible';
			} else {
				document.getElementById("contenu_" + i).style.visibility = 'hidden';
			}
		}
	}
	
	</script>
</head>
<body onload="showdiv(1)">

	<!-- 1er cadre !-->
	<div id="contenu_1" style="visibility:hidden;position:absolute;left:200px;top:10px;width:200px;height:200px" >
		<table width="100%">
			<tr>
				<td bgcolor="#FFFF00">
					<b>Contenu 1<b>
				</td>
			</tr>
			<tr>
				<td>
					exemple de texte ...<br>
					exemple de texte ...<br>
				</td>
			</tr>
		</table>
    </div>
	
	<!-- 2eme cadre !-->	
	<div id="contenu_2" style="visibility:hidden;position:absolute;left:200px;top:10px;width:200px;height:200px" >
		<table width="100%">
			<tr>
				<td bgcolor="#FF00FF">
					<b>Contenu 2<b>
				</td>
			</tr>
			<tr>
				<td>
					exemple de texte ...<br>
					exemple de texte ...<br>
				</td>
			</tr>
		</table>
		
    </div>	

<A HREF="#" onclick="showdiv(1)">page 1</a>
<A HREF="#" onclick="showdiv(2)">page 2</a>

</body>
</html>

le nombre de calques est défini ici :

var num_div = 2;

tu peut bien sur utiliser des include PHP dans les div, de facon a stocker le contenu de tes cadres dans des cadres séparés,
mais sans iframe tu ne pourra plus changer le contenu de tes cadres après le chargement de la page,
bien sur c'est faisable meme sans iframe mais c'est plus compliqué.

j'espère qu ca t'aidera :)

Répondre à BoOst

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Alaedyna, le dimanche 23 septembre 2007 à 09:35:29

Merci BoOst pour ta réponse et pour ton aide.

J'ai trouvé un moyen un peu plus simple pour arriver à ce que je souhaite. Je vous le donne au cas où d'autres voudraient faire la même chose sur leur site :

Entrer entre <head> et </head> :

<script type="text/javascript">
<!--
function afficheTexte(classe de l'emplacement) {
document.getElementById("id1").style.display=";none";
document.getElementById("id2").style.display=";none";
document.getElementById("id3").style.display=";none";
document.getElementById("id4").style.display=";none";
document.getElementById("idn").style.display=";none";
document.getElementById(classe de l'emplacement).style.display="block";
}
//-->
</script>

Puis dans le corps de la page :
Liens :

<ul>
<li class="liens" onClick="afficheTexte('id1')">Blabla</li>
		  <li class="liens" onClick="afficheTexte('id2')">Patati</li>
		  <li class="liens" onClick="afficheTexte(id3')">Patata</li>
		  <li class="liens" onClick="afficheTexte('id4)">Bavasse</li>
	  </ul>

A l'emplacement du texte (là où il doit être affiché) :

			<div class="classe de l'emplacement" id="id1"><p>Paf !</p>
			</div>
			<div class="classe de l'emplacement" id="id2"><p>Voili ! Voilou !</p>
			</div>
			<div class="classe de l'emplacement" id="id3"><p>Un peu de texte ici avec des images si on veut, le tout en code html...</p>
			</div>
			<div class="classe de l'emplacement" id="id4"><p>Encore du texte</p>
			</div>
			<div class="classe de l'emplacement" id="id5"><p>Nanana</p>
			</div>

A intégrer dans la page css :

ul#menu {
propriété du menu sous forme de liste...
}

li.liens {
	font-family: police de caractères;
	color: sa couleur;
	font-size: sa taille;
	padding:si besoin est;
}

li.liens:hover {
	font-family: police de caractères;
	color: sa couleur;
	font-size: sa taille;
	text-decoration:souligné, barré...;
}

#id1 {
 display:none;
} 

#id2 {
 display:none;
} 

#id3 {
 display:none;
} 

#id4 {
 display:none;
}

Si à l'ouverture de la page un texte doit être affiché vous devez ajouté au css :

#idn {
display:block;
}

Merci encore pour vtre aide et bonne journée : N'oubliez pas de remercier si vous voulez que nous vous aidons.
× C'est une habitude délétère d'étrangler ceux que l'on préfère. × [ Amélie Nothomb ]

Répondre à Alaedyna

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

BoOst, le dimanche 23 septembre 2007 à 17:32:47

Salut,

Effectivement tu peut ausi utiliser l'attribut "display" pour arriver a peu près au même résultat.
Content que tu a reussi a faire ce que tu voulait, amuse toi bien avec les calques et bon courage ;)

Répondre à BoOst

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Alaedyna, le dimanche 23 septembre 2007 à 19:01:17

Merci, je suis arrivée à mes fins même si c'était pas exactement ce que je souhaitais. :) N'oubliez pas de remercier si vous voulez que nous vous aidons.
× C'est une habitude délétère d'étrangler ceux que l'on préfère. × [ Amélie Nothomb ]

Répondre à Alaedyna

Posez votre question Répondre

Trucs & astuces pertinents trouvés dans la base de connaissances

07/02 15h49	Les liens sponsorisés	e-communication
05/11 11h45	[Javascript] Date de dernière modification	Javascript
08/09 02h46	[Personnaliser] Thème Logon Logoff Bootscreen	Windows XP
18/06 23h19	Raccourcis clavier de Windows	Bureautique
29/04 18h05	Personnaliser la commande "Envoyer vers"	Windows

Plus d'astuces sur « JS texte affiché lors d'un clic sur un lien »

Discussions pertinentes trouvées dans le forum

11/03 08h03	VBa - Afficher Un TextBox sous forme de Lien	5
24/06 15h42	Fond d'un texte et d'un lien sur MySpace	1
24/04 10h26	Javascript :Récup+affichage formulaire select	1
28/09 19h22	Problème clic lien	6

Plus de discussions sur « JS texte affiché lors d'un clic sur un lien »

Logiciels pertinents trouvés dans les téléchargements

	Google Toolbar pour Internet Explorer - La barre d'outils Google permet : d'afficher le pagerank des pages visitées d'ajouter à vos favoris les pages que vous...	Catégorie: Référencement Licence: Freeware/gratuit
	Google Toolbar pour Firefox - La barre d'outils Google permet : d'afficher le pagerank des pages visitées d'ajouter à vos favoris les pages que vous...	Catégorie: Référencement Licence: Freeware/gratuit
	StartClock - Ne vous êtes vous jamais demandés pourquoi il faut passer par le menu "démarrer pour éteindre l'ordinateur !? Pour remédier...	Catégorie: Personnalisation Licence: Freeware/gratuit
	TaskbarEx - Si vous trouvez que la barre des tâches de Windows est trop rigide, qu'elle ne permet aucune flexibilité, alors utilisez...	Catégorie: Personnalisation Licence: Open Source

Plus de logiciels gratuits sur « JS texte affiché lors d'un clic sur un lien »

Produits relatifs

Razer Pro Click Mobile	Catégorie: Souris	41.50 € Cdiscount
Razer Pro Click Mobile	Catégorie: Souris	41.52 € Cdiscount
Logitech Cordless Click! Plus	Catégorie: Souris	39.85 € Alapage
Razer Pro Click Mobile	Catégorie: Souris	41.50 € Cdiscount

Plus de produits sur « JS texte affiché lors d'un clic sur un lien »