Imprimer la Page

Forum-webmaster

Général => Discussions générales => Message commencé par: adelmonis le le 08-04-2010 a 15:32:52

Titre: Problème avec mon menu circulaire, besoin d'aide
Posté par: adelmonis le le 08-04-2010 a 15:32:52

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>