Forum Crea illusion Fantasy. Un endroit pour passer de bons moments
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

Forum Crea illusion Fantasy. Un endroit pour passer de bons moments

Avec simplicité vient apprendre dans nos différentes catégories.
 


AccueilAccueil  PortailPortail  ConnexionConnexion  S'enregistrerS'enregistrer  
Menu en forme de roue
Voir le sujet précédent Voir le sujet suivant Aller en bas
Ptite_Perle
Ptite_Perle


Fondatrice
Messages : 5480
Venue : 27/06/2009 Je suis : Féminin

Age : 58
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 102414
Menu en forme de roue
Coucou

Voici un code pour réaliser un menu en forme de roue qui tourne.

Code:
<html>
<head>
<title>Menu en roue</title>
<meta name="author" content="PLF - /">
<STYLE>A {
COLOR: #0000FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #9900FF; TEXT-DECORATION: none
}
</STYLE>

<script language = "JavaScript">
<!--
//PLF-/
window.moveTo(0,0) //place la page en haut à gauche de l'écran
window.resizeTo(screen.width,(screen.height-25)) //ouvre la page à la taille de l'écran(-25 pixels en largeur)
if ((screen.width <= 800) && (screen.height <= 600)) {
document.write("<style>.lienmenu { font-family: arial; font-size: 14px; position: absolute; width: 200px;visibility:hidden; z-index: 2;}</style>");
}
else {
document.write("<style>.lienmenu { font-family: arial; font-size: 18px; position: absolute; width: 200px;visibility:hidden; z-index: 2;}</style>");
}


window.setTimeout("sens()", 20000);
window.setTimeout("sens2()",40000);
function sens(){
deg_rot =Math.PI / -180;
window.setTimeout("sens()", 40000);
}
function sens2(){
deg_rot =Math.PI / 180;
window.setTimeout("sens2()", 40000);
}

function menu_roue() {
for (var i = 0; i < dep.length; i++) {
dep[i] += deg_rot; objlien[i].visibility = 'visible';
objlien[i].left = (rayon * Math.cos(dep[i])) + cent_larg
objlien[i].top = (rayon * Math.sin(dep[i])) + cent_long;
}
vit_roue = setTimeout("menu_roue()", 100);
}

function creer_objlien() {
objlien = new Array(lienmenu1, lienmenu2, lienmenu3, lienmenu4, lienmenu5, lienmenu6, lienmenu7, lienmenu8, lienmenu9, lienmenu10, lienmenu11, lienmenu12);
dep = new Array();
dep[0] = 0;
for (var i = 1; i < objlien.length; i++) {
dep[i] = parseFloat(dep[i - 1] + ((2 *Math.PI) / objlien.length));
}
menu_roue();
}
function mouss_stop() {
deg_old=deg_rot;
deg_rot=0
}
function mouss_start() {
deg_rot=deg_old;
}


var deg_rot =Math.PI / 180; // Math.PI / -180 rotation inversée
var rayon = ((screen.height)/4);
var cent_larg = ((screen.width)/2)-60;
var cent_long = ((screen.height)/2)-rayon/2;
var objlien;
var dep;
//-->
</script>

</head>

<body>


<div id = "lienmenu1" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu2" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu3" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "https://forumcrea.forumactif.org//" target="_blank">Crea illusion Fantasy</a></div>
<div id = "lienmenu4" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu5" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu6" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu7" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu8" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu9" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu10" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu11" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu12" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>

<script language = "JavaScript">
<!--
//PLF-/
var lienmenu1 = eval(document.getElementById("lienmenu1").style);
var lienmenu2 = eval(document.getElementById("lienmenu2").style);
var lienmenu3 = eval(document.getElementById("lienmenu3").style);
var lienmenu4 = eval(document.getElementById("lienmenu4").style);
var lienmenu5 = eval(document.getElementById("lienmenu5").style);
var lienmenu6 = eval(document.getElementById("lienmenu6").style);
var lienmenu7 = eval(document.getElementById("lienmenu7").style);
var lienmenu8 = eval(document.getElementById("lienmenu8").style);
var lienmenu9 = eval(document.getElementById("lienmenu9").style);
var lienmenu10 = eval(document.getElementById("lienmenu10").style);
var lienmenu11 = eval(document.getElementById("lienmenu11").style);
var lienmenu12 = eval(document.getElementById("lienmenu12").style);

creer_objlien();
//-->
</script>

</body>
</html>

Conseils:
Code:
Si vous travaillez avec des cadres, ou si vous ne souhaitez pas redimensionner la fenêtre de votre visiteur, supprimez les lignes suivantes :
window.moveTo(0,0) //place la page en haut à gauche de l'écran
window.resizeTo(screen.width,(screen.height-25)) //ouvre la page à la taille de l'écran(-25 pixels en largeur)

Si vous souhaitez un seul sens de rotation supprimez ces lignes :
window.setTimeout("sens()", 20000);
window.setTimeout("sens2()",40000);
function sens(){
deg_rot =Math.PI / -180;
window.setTimeout("sens()", 40000);
}
function sens2(){
deg_rot =Math.PI / 180;
window.setTimeout("sens2()", 40000);
}

et choisissez le sens en modifiant :180 par -180
var deg_rot =Math.PI / 180; // Math.PI / -180 rotation inversée

les lignes suivantes indiquent la taille de la police (font-size: 14px) suivant que l'affichage de l'écran est inférieur ou égale à 800x600 ou bien plus grand.

if ((screen.width <= 800) && (screen.height <= 600)) {
document.write("<style>.lienmenu { font-family: arial; font-size: 14px; position: absolute; width: 200px;visibility:hidden; z-index: 2;}</style>");
}
else {
document.write("<style>.lienmenu { font-family: arial; font-size: 18px; position: absolute; width: 200px;visibility:hidden; z-index: 2;}</style>");
}

Vous pouvez changer cette ligne par une simple ligne à mettre avant le script (avant <script language = "JavaScript">
< style>.lienmenu { font-family: arial; font-size: 18px; position: absolute; width: 200px;visibility:hidden; z-index: 2;}</style>



Le nombre de liens est défini dans l'objet "objlien". Ci-dessous il y a 4 liens

objlien = new Array(lienmenu1, lienmenu2, lienmenu3, lienmenu4);

.../...

<div id = "lienmenu1" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "menuroue2.htm" >Afficher le code</a></div>
<div id = "lienmenu2" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu3" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<div id = "lienmenu4" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>


<script language = "JavaScript">
<!--
//PLF-/
var lienmenu1 = eval(document.getElementById("lienmenu1").style);
var lienmenu2 = eval(document.getElementById("lienmenu2").style);
var lienmenu3 = eval(document.getElementById("lienmenu3").style);
var lienmenu4 = eval(document.getElementById("lienmenu4").style);

creer_objlien();
//-->
</script>

Le menu apparaît pratiquement au centre de l'écran (Page plein écran)
Vous pouvez modifier sa position en jouant sur les valeurs suivantes, sachant que screen.width est la largeur de l'écran en pixel (pas de la page) et screen.height la hauteur :
var rayon = ((screen.height)/4); défini la taille du rayon
var cent_larg = ((screen.width)/2)-60; défini l'emplacement du menu dans la largeur
var cent_long = ((screen.height)/2)-rayon/2; défini l'emplacement du menu dans la longueur

Vous pouvez remplacer ces valeurs par des tailles en pixels.

Code trouvé sur le web
Menu en forme de roue
Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy. Un endroit pour passer de bons moments :: Caverne d'Alibaba :: Pour site Web :: Le comptoir du renseignement :: Codes pour Sites web-
  
Voir les nouveaux messages depuis votre dernière visite  Voir ses messages  Voir les messages sans réponses