[help]texte a un endroit fixe au survol des liens

texte a un endroit fixe au survol des liens [help] - HTML/CSS - Programmation

Marsh Posté le 03-09-2003 à 19:37:02    

salut  
jai un ptit probleme :
http://slamer.com/images/slam.jpg
 
je voudrais faire en sorte que au survole des liens en bas un texte de mon choix differant pour chaque icone apparaisse dans la zone de texte !
aidez moi siouplé

Reply

Marsh Posté le 03-09-2003 à 19:37:02   

Reply

Marsh Posté le 03-09-2003 à 20:08:33    

Tres simple. Tu fais un onmouseover sur ton bouton (lien) que tu traite avec une fonction javascript qui fais apparaitre un div invisible en absolute à l'emplacement de ton choix.
Quelles sont les notions que tu as en javascript ?

Reply

Marsh Posté le 03-09-2003 à 20:13:03    

jui pas des mass balese en javscript mais je crois savoir ce que tu veut dire
 
 
en gros jutilise sa pour le lien :
<div align="center"><a href="{U_SEARCH}" onmouseover="ChangeMessage('{L_SEARCH}','menu_links')" onmouseout="ChangeMessage('','menu_links')"><img src="templates/EasyBlue/images/icon_mini_search.gif" border="0"></a></div>
 
mais que doije mettre pour le cadre de la zone de texte jais essayer :
<font color="#006699" size="1"><b><DIV ID=menu_links></DIV></b>
 
mais sa marche po

Reply

Marsh Posté le 03-09-2003 à 20:19:17    

leplusapte a écrit :

jui pas des mass balese en javscript mais je crois savoir ce que tu veut dire
 
 
en gros jutilise sa pour le lien :
<div align="center"><a href="{U_SEARCH}" onmouseover="ChangeMessage('{L_SEARCH}','menu_links')" onmouseout="ChangeMessage('','menu_links')"><img src="templates/EasyBlue/images/icon_mini_search.gif" border="0"></a></div>
 
mais que doije mettre pour le cadre de la zone de texte jais essayer :
<font color="#006699" size="1"><b><DIV ID=menu_links></DIV></b>
 
mais sa marche po


 
Tu as 2 solutions. Soit un write qui va écrire dans ton div, soit plusieurs divs supperposés en absolute et invisible, et rendu visibles au moment du survol.  ;)  
 
Il faut donc que tu fasses une fonction qui va récupérer comme paramètre la phrase que tu veux mettre dans le cadre, et écrire dans le div à partir de là, (si tu retiens la soluce du write).
 
Il faudra aussi faire une 2° fonction pour effacer le contenu du div en cas de onmouseout.

Reply

Marsh Posté le 03-09-2003 à 20:26:04    

Hermes le Messager a écrit :


 
Tu as 2 solutions. Soit un write qui va écrire dans ton div, soit plusieurs divs supperposés en absolute et invisible, et rendu visibles au moment du survol.  ;)  
 
Il faut donc que tu fasses une fonction qui va récupérer comme paramètre la phrase que tu veux mettre dans le cadre, et écrire dans le div à partir de là, (si tu retiens la soluce du write).
 
Il faudra aussi faire une 2° fonction pour effacer le contenu du div en cas de onmouseout.
 


jui perdu je comprend pas  :cry:  :cry:
tu pourait me montrer la syntax stp ?


Message édité par leplusapte le 03-09-2003 à 20:32:46
Reply

Marsh Posté le 03-09-2003 à 20:36:34    

leplusapte a écrit :


jui perdu je comprend pas  :cry:  :cry:  


 
Il faut :
 
1) que tu fasses un fichier JS externe (c'est plus propre) avec tes deux fonctions.
 
Dans ce fichier, tu fais une 1° fonction :
 

Code :
  1. function EcrireDansCadre(parametre)
  2. {
  3. là tu fais ce qu'il faut pour écrire dans ton cadre...
  4. }


 
puis une deuxième :
 

Code :
  1. function EffacerDansCadre() // pas de paramètre ici.
  2. {
  3. là tu fais ce qu'il faut pour effacer dans ton cadre...
  4. }


 
dans ton fichier HTML maintenant, tu fais :
 
onmouseover="EcrireDansCadre('ton texte que tu veux dans le cadre')
 
et onmouseout="EffacerDansCadre()"
 
C'est bon comme ça ?


Message édité par Hermes le Messager le 03-09-2003 à 20:37:12
Reply

Marsh Posté le 03-09-2003 à 20:55:39    

Alors tu y arrives ?  :D

Reply

Marsh Posté le 03-09-2003 à 20:59:33    

nan mé jvé me debrouiller autrement merchi comme meme

Reply

Marsh Posté le 03-09-2003 à 21:01:46    

leplusapte a écrit :

nan mé jvé me debrouiller autrement merchi comme meme


 
Mais non, attend un peu. Qu'est-ce que tu ne comprends pas/arrives pas à faire ?
 
Je te mache pourtant le boulot là.  :)

Reply

Marsh Posté le 03-09-2003 à 21:21:48    

jui pas douer en java je vos pas dutous se ke doit faire et en + sa me soul sa :
 

Citation :

<td colspan="3" background="images/menu_r2_c4.gif"><table width="100%" border="0" align="center">
              <tr>
                <td><DIV ID=menu_links>
               
            </DIV></td>
              </tr>
            </table></td>
   <td rowspan="2" colspan="3"><img name="menu_r2_c7" src="images/menu_r2_c7.gif" width="191" height="28" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="20" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="3"><img name="menu_r3_c4" src="images/menu_r3_c4.gif" width="156" height="8" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="4"><img name="menu_r4_c1" src="images/menu_r4_c1.gif" width="35" height="160" border="0" alt=""></td>
    <td height="60" colspan="7">&nbsp;</td>
   <td rowspan="4"><img name="menu_r4_c9" src="images/menu_r4_c9.gif" width="35" height="160" border="0" alt=""></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
   <td colspan="7"><img name="menu_r5_c2" src="images/menu_r5_c2.gif" width="470" height="55" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="55" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="menu_r6_c2" src="images/menu_r6_c2.gif" width="85" height="45" border="0" alt=""></td>
    <td colspan="2" background="images/menu_r2_c4.gif"><table width="110" height="20" border="0">
  <tr>
                  <td height="14"><div align="center"><a href="{U_FAQ}"><img src="templates/ashGrunge/images/icon_mini_faq.gif" alt="{L_FAQ}" width="12" height="13" hspace="3" border="0" /></div></td>
                  <td height="14"><div align="center"><a href="{U_SEARCH}"><img src="templates/ashGrunge/images/icon_mini_search.gif" alt="{L_SEARCH}" width="12" height="13" hspace="3" border="0" /></div></td>
                  <td height="14"><div align="center"><a href="{U_MEMBERLIST}" onmouseover="ChangeMessage('{L_MEMBERLIST}','menu_links')" onmouseout="ChangeMessage('','menu_links')"><img src="templates/ashGrunge/images/icon_mini_members.gif" border="0"></a></div></td>
                  <td height="14"><div align="center"><a href="{U_GROUP_CP}"><img src="templates/ashGrunge/images/icon_mini_groups.gif" alt="{L_USERGROUPS}" width="12" height="13" hspace="3" border="0" /></div></td>
                </tr>
              </table>


 
sa marche pas alors que sa :
 

Citation :

[/g]<td class="row1" width="15%">  
            <div align="center"><span class="mainmenu"><a href="{U_LOGIN_LOGOUT}" class="mainmenu"></a><a href="{U_LOGIN_LOGOUT}" onmouseover="ChangeMessage('{L_LOGIN_LOGOUT}','menu_links')" onmouseout="ChangeMessage('','menu_links')"><img src="templates/EasyBlue/images/icon_mini_login.gif" border="0"></a></span>  
            </div>[/g]          </td>
        </tr>
      </table>
    </div>
    <div align="center">  
      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="20">
        <tr>  
          <td width="10" height="23"><img src="templates/EasyBlue/images/b_mg.gif" width="10" height="22" alt="" /></td>
          <td background="templates/EasyBlue/images/b_m2.gif" width="100%" height="23"><font color="#006699" size="1"><b><DIV ID=menu_links></DIV></b></font></td>
          <td width="20" height="23"><img src="templates/EasyBlue/images/b_d_i.gif" width="20" height="22" alt="" /></td>

sa sa marche  :??:  :sweat:  :sweat:  :sweat:  :sweat:  :sweat:  :sweat:


---------------
http://www.lan-zone.org
Reply

Marsh Posté le 03-09-2003 à 21:21:48   

Reply

Marsh Posté le 03-09-2003 à 21:34:47    

   <SCRIPT LANGUAGE="JavaScript">
 
function ChangeMessage(message,champ)
  {
  if(document.getElementById)
    document.getElementById(champ).innerHTML = message;
  }
</SCRIPT>
 
 
c ce ki manké  :whistle:  :whistle:


---------------
http://www.lan-zone.org
Reply

Marsh Posté le 03-09-2003 à 21:46:11    

leplusapte a écrit :

   <SCRIPT LANGUAGE="JavaScript">
 
function ChangeMessage(message,champ)
  {
  if(document.getElementById)
    document.getElementById(champ).innerHTML = message;
  }
</SCRIPT>
 
 
c ce ki manké  :whistle:  :whistle:  


 
Beh oui...  :jap:  
 
CONCLUSION :  
 
Arrête de recopier bêtement des codes ici ou là et cherche à COMPRENDRE !  :)

Reply

Marsh Posté le 04-09-2003 à 11:35:26    

Tiens au fait, chez moi j'ai un peu modifié la fonction :

Code :
  1. if(document.getElementById) {
  2.     document.getElementById("rollover" ).innerHTML = texte;
  3. } else if (document.all) {document.all["rollover"].innerHTML= texte;
  4. } else if (document.layers) {document.layers["rollover"].innerHTML= texte;}


 
Est-ce plus multi-browsers, ou ça ne change rien ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 04-09-2003 à 11:41:01    

moi je dis ça je dis rien mais c'est faisable juste avec des css et des divs en absolutes son truc non?

Reply

Marsh Posté le 04-09-2003 à 11:54:43    

Anapajari a écrit :

moi je dis ça je dis rien mais c'est faisable juste avec des css et des divs en absolutes son truc non?


 
Pour que ça passe sur IE + Moz + Opera, NON.
 

Reply

Marsh Posté le 04-09-2003 à 12:00:15    

Oui et les positions absolues sont pas très pratiques en général, pour des sites centrés par ex


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 04-09-2003 à 12:25:41    

hermes essaye ça:

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  5.   .texte{
  6.      width: 100%;
  7.      padding-left: 200px;
  8.   }
  9.   .zone{
  10.      width: 100px;
  11.      height: 300px;
  12.   }
  13.   .lien{
  14.     position:absolute;
  15.     height: 20px;
  16.     width: 100px;
  17.     overflow: hidden;
  18.   }
  19.   .lien:hover{
  20.     position:absolute;
  21.     height: 400px;
  22.     width: 400px;
  23.   }
  24.  
  25. </style>
  26. </head>
  27. <body>
  28. <a href="" class="lien" style="left:0px">
  29.      <div class="zone">Lien 1</div>
  30.      <div class="texte" style="margin-left:0px">Text1</div>   
  31. </a>
  32. <a href="" class="lien" style="left:100px;">
  33.      <div class="zone" >Lien 2</div>
  34.      <div class="texte" style="margin-left: -100px;">Text2</div>   
  35. </a>
  36. <a href="" class="lien" style="left:200px;">
  37.      <div class="zone" >Lien 3</div>
  38.      <div class="texte" style="margin-left: -200px;">Text3</div>   
  39. </a>
  40. </body>
  41. </html>


c'est fait vite mais ça doit marcher sous IE/moz/Opera.

Reply

Marsh Posté le 04-09-2003 à 12:47:21    

Exact, ça passe bel et bien.  :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed