Menu javascript particulier.

Discussion dans 'Web, design' créé par PiaFlalCoOl, 26 Juin 2005.

Statut de la discussion:
Fermée.
  1. Offline
    PiaFlalCoOl NiuAge
    Je voulais savoir si certains d'entre vous savais comment faire ou se procurer un script qui donne un menu comme sur le site de world of warcraft.
    PiaFlalCoOl, 26 Juin 2005
    #1
  2. Offline
    null ose();
    Tu veux parler du menu ?

    Tu peux très facilement le réaliser toi-même. Tu fais ton menu et du fais à chaque fois un calque à côté avec les liens qu'il te faut dedans et tu mets le calque en "caché". Ensuite, tu fais "onMouseOver" sur le lien, ça affiche le menu, et "onMouseOut" ça le cache (bien sûr si la souris est sur le calque, tu ne le caches pas).

    Voilà (tu as accès à la source javascript si tu veux)
    null, 26 Juin 2005
    #2
  3. Offline
    CiDoUm ListMinut.be
    CiDoUm, 26 Juin 2005
    #3
  4. Offline
    PiaFlalCoOl NiuAge
    heu, je vois pas trop ce que tu veux dire par "un calque [...]avec les liens qu'il te faut dedans". Comment je peux faire une image avec des liens... T'aurais pas juste un exemple de code. Je vois pas trop ce que je dois mettre apres le onMouseOver.

    thx de la rep.
    PiaFlalCoOl, 26 Juin 2005
    #4
  5. Offline
    PiaFlalCoOl NiuAge
    PiaFlalCoOl, 26 Juin 2005
    #5
  6. Offline
    Noir Never forget who i am !
    Le javascript, si t'en a jamais fait et si tu ne connais pas le fonctionnement de ce script, t'auras du mal à l'utiliser.

    Même en faisant un copier/coller il faut savoir a quoi correspond tel ou tel fonctionnement.

    La solution du "onmouse" est bonne, si vraiment tu n'y connais rien dans se cas la, tu fais comme la plupart le font, avec Image Ready (qui est très facile d'utilisation) et tu fais un menu qui apparait lorsqu'on vient se positionner dessus.

    Ca prend bcp plus de poid et c'est assez lourd mais je ne vois pas quelqu'un t'expliquer le fonctionnement du javascript (moi même y compris car ça prendrait bcp de temps).

    A moins d'avoir un tout fait ou on te dis ou le coller et qu'il n'y a RIEN a changer, alors la ok si pas, passe ton chemin.

    a+
    Noir, 26 Juin 2005
    #6
  7. Offline
    PiaFlalCoOl NiuAge
    1) j'ai regardé le script de blizzard, et il m'a l'air comprehensible, mais c'est vrai que ce sera chaud à réutiliser quand même.

    2) J'ai un problème avec l'autre méthode : même avec Image ready, je sais pas comment faire apparaitre un menu qui décale les autres. Je ne sais même pas comment faire apparaitre une image avec des liens dessus. J'ai pas vraiment compris votre méthode... quelques explications plzz :) .

    thx
    PiaFlalCoOl, 26 Juin 2005
    #7
  8. Offline
    HaYa_BuSa ex membre
    apprends par le commencement !! C'est comme si tu voudrais faire du pain sans connaître la recette...

    Puis comme le dis Noir, si tu n'a aucune connaissance en la matière tu auras beaucoup de mal de modifier le script et savoir quelle fonction fait quoi !

    Beaucoup de site pour débutant existe pour apprendre la programmation, mais attention ça reste un métier et à moins d'être très doué, le javascript reste compliqué à apprendre seul...enfin la programmation en général.
    HaYa_BuSa, 29 Juin 2005
    #8
  9. Offline
    sebge2 Touriste
    sebge2, 3 Juillet 2005
    #9
  10. Offline
    Douby Elite
    Voila le mien d'un de mes sites... Il faut mettre une image d'arriere plan aux tableaux, il y a moyen... Le seul problème c'est qu'il est horizontal... Je c pas si il y a moyen de le retransformer pour avoir une vertical..

    Code:
          <SCRIPT LANGUAGE="JavaScript">
    bgcolor='#D0D0D0';
    bgcolor2='#dfdfdf';
    document.write('<style type="text/css">');
    document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:3; }')
    document.write('#topgauche { position:absolute;  z-index:10;}')
    document.write('A:hover.polmenu {color:#000000; font-size: 9pt; text-decoration:none; font-family:Verdana;}')
    document.write('A.polmenu {color:#000000; font-size:9pt; text-decoration:none; font-family:Verdana;}')
    document.write('</style>')
    document.write('<div style="position:relative;height:24"><DIV class=popper id=topdeck></DIV>');
    
    zlien = new Array;
    zlien[0] = new Array;
    zlien[1] = new Array;
    zlien[1][0] = '<A HREF="admin.html" CLASS=polmenu>Statistiques</A>';
    zlien[1][1] = '<A HREF="admin_parainage.html" CLASS=polmenu>Parrainage</A>';
    zlien[1][2] = '<A HREF="admin_visio.html" CLASS=polmenu>Autosurf</A>';
    zlien[1][3] = '<A HREF="admclic.html" CLASS=polmenu>Cliques rémunérés</A>';
    zlien[1][4] = '<A HREF="service.html" CLASS=polmenu>Services webmaster</A>';
    zlien[1][5] = '<A HREF="regie.html" CLASS=polmenu>Régie pub</A>';
    zlien[2] = new Array;
    zlien[3] = new Array;
    zlien[3][0] = '<A HREF="http://www.rentabilisite.com/voir.php?login=" CLASS=polmenu>Visioneuse</A>';
    zlien[3][1] = '<A HREF="clic.html" CLASS=polmenu>Cliques rémunérés</A>';
    zlien[3][2] = '<A HREF="achat.html" CLASS=polmenu>Achat de credits</A>';
    zlien[3][3] = '<A HREF="npart2.html" CLASS=polmenu>Achat de cliques</A>';
    zlien[6] = new Array;
    zlien[6][0] = '<A HREF="contact.html" CLASS=polmenu>Formulaire</A>';
    zlien[6][1] = '<A HREF="forum.html" CLASS=polmenu>Forum</A>';
    
    var nava = (document.layers);
    var dom = (document.getElementById);
    var iex = (document.all);
    if (nava) { skn = document.topdeck }
    else if (dom) { skn = document.getElementById("topdeck").style }
    else if (iex) { skn = topdeck.style }
    skn.top = 24;
    
    function pop(msg,pos)
    {
    skn.visibility = "hidden";
    a=true
    skn.left = pos;
    var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=138 bordercolor=#FFBD0A><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
    pass = 0
    while (pass < msg.length)
    	{
    	content += "<TR><TD HEIGHT=18 BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\">  "+msg[pass]+"</TD></TR>";
    	pass++;
    	}
    content += "</TABLE></TD></TR></TABLE>";
    if (nava)
      {
        skn.document.write(content);
    	  skn.document.close();
    	  skn.visibility = "visible";
      }
    if (msg==''||msg[0]=='')content='';
        else if (dom)
      {
    	  document.getElementById("topdeck").innerHTML = content;
    	  skn.visibility = "visible";
      }
        else if (iex)
      {
    	  document.all("topdeck").innerHTML = content;
    	  skn.visibility = "visible";
      }
    }
    function kill()
    {
    	skn.visibility = "hidden";
    }
    document.onclick = kill;
    document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=510 HEIGHT=24><TR><TD>');
    document.write('<TABLE border="1" bordercolor="#FFBD0A" cellpadding="0" cellspacing="0" WIDTH=510 HEIGHT=24 style="border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium; border-collapse:collapse; border-left-width:0; border-right-width:0" bgcolor="#D0D0D0"><TR>');
    
    document.write('<TD WIDTH=100 border=1 style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium" BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'" onMouseOut="this.style.background=\''+bgcolor+'\'"><FONT SIZE=2 style="color: #000000"><center><A HREF="loge.html" CLASS=polmenu>Accueil</A></center></FONT></a></TD>');
    document.write('<TD WIDTH=100 border=1 style="border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium" BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],69)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[1],56)" href=# CLASS=polmenu><FONT SIZE=2 style="color: #000000"><center>Administration</center></FONT></a></TD>');
    document.write('<TD WIDTH=100 border=1 style="border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium" BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'" onMouseOut="this.style.background=\''+bgcolor+'\'"><FONT SIZE=2 style="color: #000000"><center><A HREF="perso.html" CLASS=polmenu>Vos Données</A></center></FONT></a></TD>');
    document.write('<TD WIDTH=150 border=1 style="border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium" BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[3],295)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[3],241)" href=# CLASS=polmenu><FONT SIZE=2 style="color: #000000"><center>Gagner des credits</center></FONT></a></TD>');
    document.write('<TD WIDTH=100 border=1 style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium" BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[6],440)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[6],452)" href=# CLASS=polmenu><FONT SIZE=2style="color: #000000"><center>Contact</center></FONT></a></TD>');
    document.write('</TR></TABLE></TD></TR></table></DIV></div>');
          
          </script>
    Voilaaaa

    Edit: Skuzez pour le layout :oops:
    Douby, 3 Juillet 2005
    #10
  11. Offline
    PiaFlalCoOl NiuAge
    Je voulais pas programmer en javascript lol, je voulais que vous me donniez un script tout fait qui permettais de faire ce que je recherchais en le modifiant légèrement.

    Ensuite, ils m'ont donnés une autre méthode qui me semblait plus accessible vuque je maitrise pas trop mal totoshop et ImageReady, mais je n'avais pas compris leurs explications.
    PiaFlalCoOl, 3 Juillet 2005
    #11
Statut de la discussion:
Fermée.