|
|
|
|
JS - texte affiché lors d'un clic sur un lien
Dernière réponse le 7 mar 2009 à 22:19:27 Alaedyna, le 21 sep 2007 à 21:19:13Bonsoir,
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
Salut
<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 |
Merci à vous deux pour vos réponses.
|
SALUT
|
Merci Rad Zone pour ta réponse et le lien,
<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 ] |
Bon plus simple et + lege !! :-))
|
Voila le site officiel de l exemple que tu trouvais pas mal
|
Je suis allée sur le site mais je n'ai pas trouvé ce que je cherchais. :s
|
Je suis allée sur le site mais je n'ai pas trouvé ce que je cherchais
|
Bon :-))
|
Salut
<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 :) |
Merci BoOst pour ta réponse et pour ton aide.
<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 ] |
Bon, c'est résolu mais voici quand même une méthode... ultra simple !!!
|
Affichage image aléatoire lien aléatoire- Afficher du texte avec lien hypertexte pdf
- Fonction affichage javascript text
- Javascript comment afficher une phrase d'une page web en javascript
- Javascript afficher la vleur d'une zone de texte
- Javascript text click
- Javascript textarea depassement
- Javascript textarea gras souligné italique
- Javascript textarea inside function
- Javascript textarea passer à la ligne
- Javascript texte défialnt
- Javascript texte probleme caractere accentué
- Javascript texte sur image
- Joptionpane probleme texte affiche pas
- Les messages sont affichés en texte sans image ni lien windows mail et vista
- Liste déroulante javascript ligne affichée
- Modifier le texte à afficher dans lien hypertexte excell
- Un champ texte disparait lors du click html
