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.
Forum Crea illusion Fantasy. Un endroit pour passer de bons moments.

Avec simplicité vient apprendre dans nos différentes catégories.
Ci-dessous menu déroulant tutos.
 
  • Tutos Photoshop
    • Bien Débuter
    • Questions photoshop
    • Débutant
    • Intermediaires
    • Avancés
    • Tutos photoshop CC
    • Ressources photoshop
  • Tutos Photofiltre
    • Tutos à suivre
    • Ressources
    • Questions photofiltre
  • Paint shop Pro
    • Tutos paint shop pro
    • Tutos PSPX2-PSP
    • Tutos PSPX3-PSPX4
    • Ressources PSP
    • Questions PSP
  • Nos aides forums
    • Aides Forums
    • Astuces et codages Forums
    • Codes Javascript
    • Libre service signatures codées


AccueilAccueil  PortailPortail  Dernières imagesDernières images  ConnexionConnexion  S'enregistrerS'enregistrer  
Menu en forme de roue
Voir le sujet précédent Voir le sujet suivant Aller en bas
Forum Crea illusion Fantasy. Un endroit pour passer de bons moments. :: Le comptoir du renseignement :: Codes pour Sites web
Ptite_Perle
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum


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

Age : 59
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 111392
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
Drag0n
Drag0n


Messages : 1
Venue : 11/02/2022 Je suis : Masculin

Age : 22
Je vie à : kfldsjf
Humeur : flkdsf
Mes Points : 7141
Re: Menu en forme de roue
[postbg=https://i.servimg.com/u/f58/14/04/66/48/nolida10.jpg]merci
Ptite_Perle
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum


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

Age : 59
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 111392
Re: Menu en forme de roue
Avec plaisir Drag0n Smile
Nightfairy
Nightfairy
Présence
Merci pour ta présence sur le forum.


Messages : 41
Venue : 23/08/2019 Je suis : Féminin

Age : 31
Je vie à : Belgique /Hainaut
Humeur : Très bonne
Mes Points : 25241
Re: Menu en forme de roue
Bonjour, c'est pour quel menu ? Dommage qui ai pas de photo
Ptite_Perle
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum


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

Age : 59
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 111392
Re: Menu en forme de roue
Coucou

Pour un site web.

Tu peux voir le modèle ici : [Vous devez être inscrit et connecté pour voir ce lien]

Bisouss
Nightfairy
Nightfairy
Présence
Merci pour ta présence sur le forum.


Messages : 41
Venue : 23/08/2019 Je suis : Féminin

Age : 31
Je vie à : Belgique /Hainaut
Humeur : Très bonne
Mes Points : 25241
Re: Menu en forme de roue
Je te remercie
Ptite_Perle
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum


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

Age : 59
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 111392
Re: Menu en forme de roue
Avec plaisir

Bisouss
sandcreations
sandcreations
Partage
Merci pour ton partage de tes tutos, images
Présence
Merci pour ta présence sur le forum.
Partenaires
Très honoré d'être partenaire


Graphiste
Messages : 442
Venue : 14/09/2012 Je suis : Féminin

Age : 51
Je vie à : Valenciennes
Humeur : cool
Mes Points : 8134
Re: Menu en forme de roue
très jolie merci
Ptite_Perle
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum


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

Age : 59
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 111392
Re: Menu en forme de roue
Ravie que ce menu te plaise sandcreations

Bisouss
Menu en forme de roue
Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1
Sujets similaires
+
Sujets similaires
-
» Forme 3D animée
» Cours N°5 forme prédéfini
» Travailler une forme personnalisée
» Mise en forme des catégories
» Réaliser des lettres en forme de glace

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. :: Le comptoir du renseignement :: Codes pour Sites web-
Forum Crea illusion Fantasy. Un endroit pour passer de bons moments. :: Le comptoir du renseignement :: Codes pour Sites web+
©phpBB | Contact | Signaler un abus
Annuaire inscription gratuit | Pub gratuite | Crea illusion fantasy | www.cyberpole.fr | Echange Gagnant
  
Voir les nouveaux messages depuis votre dernière visite      Voir ses messages      Voir les messages sans réponses