Aiuto per modifica a menu javascript
Ciao a tutti
per lavoro mi hanno dato da modificare un menu fatto in javascript....
dovrei fare le seguenti modifiche:
1- inserire come asse attorno al quale gira il menu il logo dell'azienda
2- mettere delle immagini al posto dei riquadri che ci sono ora
vi prego aiutatemi che sono 2 giorni che ci sbatto la testa senza capirci nulla o quasi...^^
grassie
vi posto il codice:
<html>
<head>
<script type="text/javascript">
<!--
eye={
p:0,
x:0,
y:0,
w:0,
h:0,
r:0,
v:0,
s:0,
isVertical:0,
a1:0,
a2:0,
a3:0,
color:'#ff0000',
colorover:'#ff0000',
backgroundcolor:'#FFFF00',
backgroundcolorover:'#FFFF00',
bordercolor:'#000000',
fontsize:12,
fontfamily:'Arial',
pas:0,
spinmenu:
function(){
this.p=this.r/this.s;
this.a1=this.a2=this.isVertical?0:Math.PI/2
},
spinmenuitem:
function(a7,a6,a5){
a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";
document.write("<div id='spinmenu"+this.a3+"' style='cursor
ointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center; background: url(" + this.background + "); cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>"); this.a3++
},
muta:
function(){
a8=document.getElementById("controale");
for(i=0;i<this.a3;i++){
a9=document.getElementById("spinmenu"+i+"");
a9s=a9.style;
if(this.isVertical){
xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s; //solo per utilizzo verticale (rotazione)
yi=parseInt(this.r*Math.sin(this.a1+i*this.pas)); //solo per utilizzo verticale (rotazione)
a10=(this.p+xi)/(2*this.p); //solo per utilizzo verticale
a11=this.fontsize*(this.p+xi)/(2*this.p)+2; //solo per utilizzo verticale
a12=parseInt(100*(this.p+xi)/(2*this.p)) //solo per utilizzo verticale
}else{
xi=parseInt(this.r*Math.cos(this.a1+i*this.pas)); //regola la rotazione
yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s; //regola la rotazione
a10=(this.p+yi)/(2*this.p);
a11=this.fontsize*(this.p+yi)/(2*this.p)+2;
a12=parseInt(100*(this.p+yi)/(2*this.p))};
a13=(this.w-20)*a10+20;
a14=(this.h-20)*a10+10;a9s.top=(yi+this.y-a14/2)+"px";
a9s.left=(xi+this.x-a13/2)+"px";a9s.width=a13+"px";a9s.fontSize=a11+"px";
a9s.zIndex=a12};
a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;
a8.style.left=this.x-a8.offsetWidth/2;
if(this.a1!=this.a2){
this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v)
this.a1+this.pas/this.v);
if(Math.abs(this.a1-this.a2)<this.pas/this.v)
this.a1=this.a2;
setTimeout("eye.muta()",10)
}
},
spinmenuclose:
function(){
this.pas=2*Math.PI/this.a3;
document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()"><<</button> <button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()">>></button></div>');
eye.muta()
}
};
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;
}return totaloffset;
}
-->
</script>
</head>
<body scroll=no>
<br><br><br><br>
<p><font color="#FF0000">Menu rotante</font></p>
<script type="text/javascript">
<!--
eye.isVertical = 0; //if it's vertical or horizontal [0|1]
eye.x = 350; // x offset from point of insertion on page
eye.y = 150; // y offset from point of insertion on page
eye.w = 150; // item's width
eye.h = 30; // height
eye.r = 100; // menu's radius
eye.v = 20; // velocity
eye.s = 8; // scale in space (for 3D effect)
eye.color = '#000000'; // normal text color
eye.colorover = '#ff0000'; // mouseover text color
eye.backgroundcolor = '#FFFF00'; // normal background color
eye.backgroundcolorover = '#FFFF00'; // mouseover background color
eye.bordercolor = '#FF0000'; //border color
eye.fontsize = 12; // font size
eye.fontfamily = 'Arial'; //font family
if (document.getElementById){
document.write('<div id="spinanchor" style="height:'+eval(eye.h+20)+'"></div>')
eye.anchor=document.getElementById('spinanchor')
eye.spinmenu();
eye.x+=getposOffset(eye.anchor, "center") //relatively position it
eye.y+=getposOffset(eye.anchor, "top") //relatively position it
//menuitem: eye.spinmenuitem(text, link, target)
eye.spinmenuitem("ciao","http://www.xxxxxx.xxx");
eye.spinmenuitem("ciao1","#");
eye.spinmenuitem("ciao2","#");
eye.spinmenuitem("ciao3","#");
eye.spinmenuitem("ciao4","#");
eye.spinmenuitem("ciao5","#");
eye.spinmenuclose();
}
-->
</script>
</body>
</html>
Ciao a tutti
per lavoro mi hanno dato da modificare un menu fatto in javascript....
dovrei fare le seguenti modifiche:
1- inserire come asse attorno al quale gira il menu il logo dell'azienda
2- mettere delle immagini al posto dei riquadri che ci sono ora
vi prego aiutatemi che sono 2 giorni che ci sbatto la testa senza capirci nulla o quasi...^^
grassie
vi posto il codice:
<html>
<head>
<script type="text/javascript">
<!--
eye={
p:0,
x:0,
y:0,
w:0,
h:0,
r:0,
v:0,
s:0,
isVertical:0,
a1:0,
a2:0,
a3:0,
color:'#ff0000',
colorover:'#ff0000',
backgroundcolor:'#FFFF00',
backgroundcolorover:'#FFFF00',
bordercolor:'#000000',
fontsize:12,
fontfamily:'Arial',
pas:0,
spinmenu:
function(){
this.p=this.r/this.s;
this.a1=this.a2=this.isVertical?0:Math.PI/2
},
spinmenuitem:
function(a7,a6,a5){
a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";
document.write("<div id='spinmenu"+this.a3+"' style='cursor
ointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center; background: url(" + this.background + "); cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>"); this.a3++},
muta:
function(){
a8=document.getElementById("controale");
for(i=0;i<this.a3;i++){
a9=document.getElementById("spinmenu"+i+"");
a9s=a9.style;
if(this.isVertical){
xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s; //solo per utilizzo verticale (rotazione)
yi=parseInt(this.r*Math.sin(this.a1+i*this.pas)); //solo per utilizzo verticale (rotazione)
a10=(this.p+xi)/(2*this.p); //solo per utilizzo verticale
a11=this.fontsize*(this.p+xi)/(2*this.p)+2; //solo per utilizzo verticale
a12=parseInt(100*(this.p+xi)/(2*this.p)) //solo per utilizzo verticale
}else{
xi=parseInt(this.r*Math.cos(this.a1+i*this.pas)); //regola la rotazione
yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s; //regola la rotazione
a10=(this.p+yi)/(2*this.p);
a11=this.fontsize*(this.p+yi)/(2*this.p)+2;
a12=parseInt(100*(this.p+yi)/(2*this.p))};
a13=(this.w-20)*a10+20;
a14=(this.h-20)*a10+10;a9s.top=(yi+this.y-a14/2)+"px";
a9s.left=(xi+this.x-a13/2)+"px";a9s.width=a13+"px";a9s.fontSize=a11+"px";
a9s.zIndex=a12};
a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;
a8.style.left=this.x-a8.offsetWidth/2;
if(this.a1!=this.a2){
this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v)
this.a1+this.pas/this.v);if(Math.abs(this.a1-this.a2)<this.pas/this.v)
this.a1=this.a2;
setTimeout("eye.muta()",10)
}
},
spinmenuclose:
function(){
this.pas=2*Math.PI/this.a3;
document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()"><<</button> <button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()">>></button></div>');
eye.muta()
}
};
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;
}return totaloffset;
}
-->
</script>
</head>
<body scroll=no>
<br><br><br><br>
<p><font color="#FF0000">Menu rotante</font></p>
<script type="text/javascript">
<!--
eye.isVertical = 0; //if it's vertical or horizontal [0|1]
eye.x = 350; // x offset from point of insertion on page
eye.y = 150; // y offset from point of insertion on page
eye.w = 150; // item's width
eye.h = 30; // height
eye.r = 100; // menu's radius
eye.v = 20; // velocity
eye.s = 8; // scale in space (for 3D effect)
eye.color = '#000000'; // normal text color
eye.colorover = '#ff0000'; // mouseover text color
eye.backgroundcolor = '#FFFF00'; // normal background color
eye.backgroundcolorover = '#FFFF00'; // mouseover background color
eye.bordercolor = '#FF0000'; //border color
eye.fontsize = 12; // font size
eye.fontfamily = 'Arial'; //font family
if (document.getElementById){
document.write('<div id="spinanchor" style="height:'+eval(eye.h+20)+'"></div>')
eye.anchor=document.getElementById('spinanchor')
eye.spinmenu();
eye.x+=getposOffset(eye.anchor, "center") //relatively position it
eye.y+=getposOffset(eye.anchor, "top") //relatively position it
//menuitem: eye.spinmenuitem(text, link, target)
eye.spinmenuitem("ciao","http://www.xxxxxx.xxx");
eye.spinmenuitem("ciao1","#");
eye.spinmenuitem("ciao2","#");
eye.spinmenuitem("ciao3","#");
eye.spinmenuitem("ciao4","#");
eye.spinmenuitem("ciao5","#");
eye.spinmenuclose();
}
-->
</script>
</body>
</html>
