http://www.jejavascript.net

ACCUEIL
ACCUEIL DES
  VISITEURS

DATE & HEURE
EFFETS DE TEXTE
FENETRES
FORMULAIRES
IMAGES
MENUS
PRATIQUE
POP UP
DIVERS

PHP
Cours de javascript
Générer vos Fichiers
  CSS

Générer vos Meta-Tags
Description des Balises
  Meta

Les Codes Couleur
L'objet Math
un Multi-Moteurs de recherche sur Votre Site
Cryptez votre e-mail
  pour contrer le Spam

Cryptez vos Scripts
Services Webmasters
Moteurs de recherches
Référencement


Un menu en Forme de Roue

Revoir la page "Menu en roue"

Pour récupérer le menu en forme de roue et l'installer sur votre site

Télécharge le fichier : rouemenu_zip ou bien

Insérez le code ci-dessous dans Une page vierge


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

<script language = "JavaScript">
<!--
//PLF-http://www.jejavascript.net/
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 = "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 = "http://tavutatete.jejavascript.net/" target="_blank">TAVUTATETE</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 = "menuroue2.htm" >Afficher le code</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 = "http://www.jejavascript.net/" target="_blank">Je JavaScript</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 = "menuroue2.htm" >Afficher le code</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 = "http://www.lacuisinedemacopine.net" target="_blank" >La cuisine de ma Copine</a></div>
<div id = "lienmenu12" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>

<script language = "JavaScript">
<!--
//PLF-http://www.jejavascript.net/
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>


et corrigez le comme suit

nom de la page à ouvrir    -    Texte du lien    -    Pour une ouverture dans une autre fenêtre du navigateur

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-http://www.jejavascript.net/
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

Ce site vous a plu ? Vous avez trouvé le script que vous cherchiez ?
Faites en profiter vos visiteurs : insérez un lien sur votre site

ACCUEIL
Rechercher
Insérez dans vos
  favoris
Un lien sur votre site
Votre Lien sur JJS
Signez Mon Livre d'Or
Contact
Recettes faciles
Vos formulaires par mail
Creer votre Forum
Creer votre Livre d'or
Module de News
Creer votre Annuaire
Gestion de newsletters
Votre Agenda
Compteurs de Visites
Compteur Live
partenariats
Services Webmasters
ComScripts
Recherche javascript
Mes Partenaires

ABC Webmasters - un Partenaire

La BRETAGNE ça vous GAGNE ! - un Partenaire

annuaire gratuit - el-annuaire - un Partenaire

 
Je JavaScript Création Déc-2001

 
04-02-2012