Problème avec mon menu circulaire, besoin d'aide

La Communauté Webmaster

  Forum-webmaster
  Général
  Discussions générales (Modérateurs: Jey, Dark.Ginger, Lilian, lauryv, ToToMaStEr, Wolf18)
  Problème avec mon menu circulaire, besoin d'aide

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Problème avec mon menu circulaire, besoin d'aide (Lu 563 fois)

Problème avec mon menu circulaire, besoin d'aide
« sur: le 08-04-2010 a 15:32:52 »

adelmonis
Membre récent

Hors-Ligne

Messages: 6

Bonjour à tous !!

Je débute, je suis entrain de créer un site web pour mon association. Je souhaitais faire un menu circulaire. Mais cela ne fonctionne pas. Est ce que quelqu'un pourrai voir ce qui ne va pas, , Je suis perdu. Peut-être qu'un oeil neuf trouvera le pb !!!

Merci

Voici ma page

Code:
<!DOCTYPE html PUBLIC "-//W3C//Dtd html 4.01 Transitional//EN">
<html>
<HEAD>
   <TITLE>Association Sport et Loisirs</TITLE>
</HEAD>
<STYLE TYPE="text/css">

#MENU
{
WIDTH :170PX;
BACKGROUND-COLOR :lime;
BORDER:10PX groove green;
}

#MENU H2
{
COLOR: #0000EE;
TEXT-ALIGN: CENTER;
FONT-SIZE:15PX;
}

#MENU LI
{
LIST-STYLE-TYPE: NONE;
LIST-TYPE-POSITION: INSIDE;
}

#CENTRE
{
HEIGHT:50PX;
WIDTH:50PX;
MARGIN: AUTO;
BORDER: 10PX groove green;
}

.ITEM
{
POSITION:ABSOLUTE;
}

</STYLE>
<SCRIPT TYPE="text/javascript">

   var decalage = 0;
var nbBout;
var timer;

function menu(nb)
{
var angle = 360 / nb;
nbBout = nb;
var posX;
var posY;
var rayon = 60;
var centreX = document.getElementById("centre").offsetLeft;
var centreY = document.getElementById("centre").offsetTop;
var lItem = 20;
var i = 1;
var item;
var b;

for(b = 0; b < 360; b += angle)
{
posX = centreX + 25 + rayon * Math.cos(b * Math.PI / 180);
posY = centreY + 25 + rayon * Math.sin(b * Math.PI / 180);

item = document.getElementById("item" + i);
item.className = "item";
item.style.top = (posY - lItem / 2) + "px";
item.style.left = (posX - lItem / 2) + "px";
i++;
}
}

function anim()
{
decalage++;
var angle = 360 / nbBout;
var posX;
var posY;
var rayon = 70;
var centreX = document.getElementById("centre").offsetLeft;
var centreY = document.getElementById("centre").offsetTop;
var lCentre = 50;
var lItem = 20;
var i = 1;
var item
var b;

for(b = 0; b < 360; b = b + angle)
{
posX = centreX + 25 + rayon * Math.cos((b + decalage) * Math.PI / 180);
posY = centreY + 25 + rayon * Math.sin((b + decalage) * Math.PI / 180);

item = document.getElementById("item" + i);
item.style.top = (posY - lItem / 2) + "px";
item.style.left = (posX - lItem / 2) + "px";
i++;
}
}

timer = setInterval("anim()",50);

function stopanim()
{
clearInterval(timer);
}

function replayanim()
{
timer = setInterval("anim()",50);
}

</SCRIPT>

<BODY ONLOAD="MENU(5);">
   <DIV ID="MENU" ONMOUSEOVER="STOPANIM();" ONMOUSEOUT="REPLAYANIIM();">
      <H2>Menu</H2>
      <DIV ID="CENTRE">Centre</DIV>

      <UL>
         <LI ID="ITEM1"><A href="#">Menu1</A></LI>
         <LI ID="ITEM2"><A href="#">Menu2</A></LI>
         <LI ID="ITEM3"><A href="#">Menu3</A></LI>
         <LI ID="ITEM4"><A href="#">Menu4</A></LI>
         <LI ID="ITEM5"><A href="#">Menu5</A></LI>
      </UL>
   </DIV>
<DIV></DIV>
<DIV></DIV>
<DIV></DIV>
</BODY>
</html>