Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2068 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  texte qui s'affiche au survol de la souris

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

texte qui s'affiche au survol de la souris

n°2017944
laura017
Posté le 19-08-2010 à 15:31:07  profilanswer
 

Bonjour,  
 
Sur une page, je voudrais créer un menu à gauche. Et lorsqu'on survole les lien du menu, à droite doit apparaitre un texte ou une image, différents pour chaque lien. Puis lorsqu'on clique sur le lien du menu, on arrive sur une autre page. Il faut que pour chaque lien, le texte ou l'image qui apparait, apparaisse au même endroit.  
Si quelqu'un connait un script qui me permet de faire ça...
 
Merci.

mood
Publicité
Posté le 19-08-2010 à 15:31:07  profilanswer
 

n°2017953
OLEV
Posté le 19-08-2010 à 15:57:23  profilanswer
 

Bonjour,  
 
Le survol d'un element html (le lien d'un menu dans ton cas) se fait grace a l'evenement javascript onMouseOver (litteralement, au passage de la souris). Il te faut donc relier cet evenement a une fonction javascript.
 
Dans cette fonction, tu dois recuperer l'element html que tu souhaite modifier, idealement un div. Il faut pour cela lui donner un id (par exemple <div id='adroite'></id> ) et le recuperer a l'aide de DOM, par exemple a l'aide d'un document.getElementById('adroite').
 
Il suffit ensuite de donner une valeur a la propriete innerHTML de l'element et de lui donner comme contenu du texte sous forme de chaine de caractere, qui peut tres bien etre une image si la valeur de la propriete que tu insere contient la balise html adequate dont l'attribut src pour la source de ton image.

n°2017963
laura017
Posté le 19-08-2010 à 16:24:07  profilanswer
 

Merci pour ta réponse.  
Les éléments qui s'affichent sur la droite apparaissent les uns à la suite des autres (pas en même temps bien sur).Or je voudrais qu'ils s'affichent à chaque fois en haut de la page, pour chaque lien survolé. Donc, par exemple que le div 2 vienne remplacer le div 1, et ainsi de suite.  
Exemple de ce que je veux faire : http://www.editions-heloisedormesson.com/auteurs.php  

n°2017972
David Bori​ng
Posté le 19-08-2010 à 16:34:38  profilanswer
 
n°2017976
laura017
Posté le 19-08-2010 à 16:41:27  profilanswer
 

Merci :) C'est tout à fait ça qu'il me fallait.

n°2017981
OLEV
Posté le 19-08-2010 à 16:45:33  profilanswer
 

Tu peux toujours t'inspirer du code source de la page que tu cite, seule une (ou deux) fonctions javascript semblent utilisees pour cet affichage.
 

Code :
  1. <a href="auteur.php?pageNum_rs_auteur=11&totalRows_rs_auteur=44"
  2.           onMouseOver="MM_showHideLayers('Layer12','','show')"
  3.           onMouseOut="MM_showHideLayers('Layer12','','hide')" > Jean d'Ormesson </a><br />


 
On repere ici deux evenements. onMouseOver (au passage de la souris) et onMouseOut (lorsque la souris quitte l'element), qui apellent une fonction javascript, MM_showHideLayers.
 
Tu peux t'inspirer du code de leur fonction mais normallement ce que je t'ai dis devrais suffir. Je ne comprend pas quel est exactement le probleme que tu rencontre (montrer ici une partie de ton code source serait peut-etre a ce titre une bonne idee).
 
Le contenu entier de la div est remplace lorsque le contenu de l'attribut innerHTML est modifie. Peut-etre que tu voulais dire que ce contenu ne disparait pas lorsque la souris ne pointe plus sur un lien. Pour cela, il te faut utiliser l'attribut onMouseOut et remplacer l'attribut innerHTML par une chaine de caractere vide (afin de faire disparaitre le contenu de la div).
 
Si "les elements apparaissent les uns a la suite des autres" comme tu le dis, c'est peut-etre parce que le contenu de ton attribut innerHTML n'est pas ecrase mais concatene avec le nouveau.

n°2017988
laura017
Posté le 19-08-2010 à 16:56:55  profilanswer
 

En fait, le contenu de la div disparait mais il n'est pas remplacé comme il le devrait.  
Je vais tester tout ça...
Est-ce possible d'utiliser ce script avec "wayfinder" de "Modx" ? Ce qui serait vraiment trop génial !

n°2017997
laura017
Posté le 19-08-2010 à 17:23:08  profilanswer
 

Voici le code que j'avais dans le head :
 
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?" ))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
 
Ensuite, dans la page html :
 
<h4>Veuillez choisir une catégorie : </h4>
<br />
<div id="menucataloguegauche">
<a onmouseout="MM_showHideLayers('Layer1','','hide')" onmouseover="MM_showHideLayers('Layer1','','show')" href="#"> blabla1 </a>
<a onmouseout="MM_showHideLayers('Layer2','','hide')" onmouseover="MM_showHideLayers('Layer2','','show')" href="#"> blabla2 </a>
</div>
 
<div id="menucataloguedroite">
<div id="Layer1" style="visibility: hidden;">      
<ul><li> texte blabla1 </ul></li><br /></div>
 
<div id="Layer2" style="visibility: hidden;">
<ul><li> texte blabla2 </ul></li><br /></div>
</div>
 
Chercher l'(les) intru(s) ...

n°2018005
laura017
Posté le 19-08-2010 à 17:44:08  profilanswer
 

Sinon, pour le faire en css, c'est cool, ça marche ! :)
Mais j'aimerai bien comprendre mon erreur en javascript...

n°2018012
OLEV
Posté le 19-08-2010 à 18:28:16  profilanswer
 

Si j'ai bien compris, tu aimerais que ta premiere div soit entierement remplace par la deuxieme, emplacement compris. Dans ce cas, il ne vaut pas utilise l'attribut visibility (visible, hiden) mais l'attribut display (visible, none).
 
L'attribut visibility ne fait que masquer ton champ mais considere toujours son emplacement comme occupe alors que l'attribut display supprime egalement l'emplacement lorsqu'il a la valeur "none" (et on peut ensuite le faire reaparaitre comme avec l'attribut visibility en lui donnant la valeur visible).

mood
Publicité
Posté le 19-08-2010 à 18:28:16  profilanswer
 

n°2018142
laura017
Posté le 20-08-2010 à 14:48:19  profilanswer
 

Oui c'est ça que je veux faire.  
Je remplace dans les deux derniers div visibility par display et hidden par none. Mais ensuite ça ne marche toujours pas ... Je suppose qu'il faut aussi que je remplace quelque chose dans le script ?

n°2018148
OLEV
Posté le 20-08-2010 à 15:02:41  profilanswer
 

En effet, cela ne fonctionne pas.
Toutes mes excuses, je t'ai induis en erreur.
En effet, visibility a bien pour valeur visible et hidden, mais display ne connait pas la valeur visible, il faut la remplacer par inline (pour que ce soit visible). Le none en revanche est correct.
 
Donc dans le code que tu as mentionne ci dessus, il suffit de remplacer toutes les occurences (y compris dans ls script) de visibility par display, toutes les occurences de hidden par none et toute (enfin la seule) occurence de visible par inline.
 
J'ai teste et ca fonctionne :)


Message édité par OLEV le 20-08-2010 à 15:05:17
n°2018151
laura017
Posté le 20-08-2010 à 15:26:12  profilanswer
 

C'est cool :) Merci, je vais modifier tout ça ...


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  texte qui s'affiche au survol de la souris

 

Sujets relatifs
remplir une base de donnée à l'aide d'un fichier texteAjouter du texte à un copié collé en JS ?
Si la page n'ai pas charger on affiche se site[PERL?] interface texte avec gestion des touches directionnelles
recherche texte dans .batScinder un texte html sans casser les balises
modifier une ligne precise d'un fichier texteFaire apparaitre un calque au survol d'un lien
FPDF Mettre en gras un morceau de texte 
Plus de sujets relatifs à : texte qui s'affiche au survol de la souris


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR