MENU RUBAN VERTICAL.

Commentaire de XtremDuke le 10/08/2007 17:17:56

Interessant mathématiquement...

Commentaire de zuff le 04/09/2007 16:08:42

Alors (sans garantie de fonctionnement) voici les modifs à faire dans le fichier MenuDeroulant.js :

var NbSerie =3;

function AffichageVertical ()
{
  for(j=0;j<NbSerie;i++)
  {  
      for(i=1;i<NbImage+1;i++)
    {
    var Gauche =  100+document.getElementById("i"+j+i).width/2;
    var Hauteur =  positionY+140*(Math.sin(angle+i*2*Math.PI/NbImage));

        agl=angle+i*2*Math.PI/NbImage;
        document.getElementById("i"+j+i).width=25*(Math.cos(agl))+30;
        //document.getElementById("i"+j+i).Height=25*(Math.cos(agl))+30;
        document.getElementById("i"+j+i).style.zIndex=50*(Math.cos(agl))+100;
        document.getElementById("i"+j+i).style.opacity=(Math.cos(agl)+1)*0.50;
        document.getElementById("i"+j+i).style.filter="alpha(opacity="+(Math.cos(agl)+1)*50+")";
        document.getElementById("divi"+j+i).style.top=Hauteur+"px";
        document.getElementById("divi"+j+i).style.left=Gauche+"px";
        document.getElementById("divi"+j+i).width=25*(Math.cos(agl))+30;
        document.getElementById("divi"+j+i).style.zIndex=50*(Math.cos(agl))+100;
        document.getElementById("divi"+j+i).style.opacity=(Math.cos(agl)+1)*0.50;
        document.getElementById("divi"+j+i).style.filter="alpha(opacity="+(Math.cos(agl)+1)*50+")";

    }
  }  
    NouveauDeplacementVerticale = "Oui";  
}

function LancementMenu()
{
// Page ouverte au maximum de l'écran
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height-30);  
// Placement du div
document.getElementById("divMenuRuban1").style.left= 50;
document.getElementById("divMenuRuban2").style.left= 100;
document.getElementById("divMenuRuban3").style.left= 150;

recupererHauteurEcran();
AffichageVertical ();
FlgDefilementVertical="Bas";
timer=setInterval("DefilementVertical()", vitesseVerticale);

}

puis dans index.htm :
<div id="divMenuRuban1">
<div id="divi01" class="divimag" ><a href="" ><img id="i01" class="imag" src="" alt="" /><br />Image</a></div>
<div id="divi02" class="divimag" ><a href="" ><img id="i02" class="imag" src="" alt="" /><br />Image</a></div>
...
</div>
<div id="divMenuRuban2">
<div id="divi11" class="divimag" ><a href="" ><img id="i11" class="imag" src="" alt="" /><br />Image</a></div>
<div id="divi12" class="divimag" ><a href="" ><img id="i12" class="imag" src="" alt="" /><br />Image</a></div>
...
</div>
<div id="divMenuRuban3">
<div id="divi21" class="divimag" ><a href="" ><img id="i21" class="imag" src="" alt="" /><br />Image</a></div>
<div id="divi22" class="divimag" ><a href="" ><img id="i22" class="imag" src="" alt="" /><br />Image</a></div>
...
</div>

puis dans la feuille de style :
#divMenuRuban1
{
    position:absolute;
    top :120px;
    left : 400px;
}
#divMenuRuban2
{
    position:absolute;
    top :120px;
    left : 450px;
}
#divMenuRuban3
{
    position:absolute;
    top :120px;
    left : 500px;
}

et à priori ca devrait marcher sinon contact moi par la messagerie du site pour je regarde ça de plus près.