Avatar billede wichpower Nybegynder
27. oktober 1999 - 12:34 Der er 8 kommentarer og
1 løsning

Cirkelmenu problemer!!

eg har hentet et script på www.bratta.com/dhtml men en cirkelmenu hvor punktner ligger sig ned i midten af cirklen, men der mangler en kode der linker vidre til en anden side når den kommer ned i midten, er der en eller anden der kan det???
Avatar billede pingo Nybegynder
27. oktober 1999 - 13:06 #1
Hvad er det for et script du har downloaded?
Avatar billede skjoldby Nybegynder
27. oktober 1999 - 20:32 #2
ja det er lidt svært at gætte sig til.
Avatar billede wichpower Nybegynder
28. oktober 1999 - 08:51 #3
<html>
<head>
    <title>Cross-browser Dynamic HTML Demo - Circle animation demo</title>
<meta name="Author" content="Thomas Brattli (webmaster@bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, dhtml, html, demos, Javascript, VBscript, Cross-browser, Netscape4.0, IE4.0, Internet explorer, Dynamic HTML">
<meta name="Description" content="Animated DHTML circle demo">
<style>
DIV{position:absolute}
DIV.clButtons{width:22; height:22; left:98; top:6; visibility:inherit}
#divCont{width:220; height:220; clip:rect(0,220,220,0); z-index:30; visibility:visible}
#divCenter{width:200; height:200; left:10; top:10; visibility:inherit}
</style>
<script>
/***************************************************************************
Copyright (C) 1999 Thomas Brattli
Code made by and copyrighted to Thomas Brattli from
www.bratta.com. Can be used freely as long as this message is instact
****************************************************************************/

//Simple browsercheck
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

/***************************************************************************
Main variables
****************************************************************************/
//The radius for the circle
radius=92
//Start angle
startAngle=90
//Speed in milliseconds
circleSpeed=20
//angle to move per timeout
moveAngle=5

var xcenter;
var ycenter;
var menuState;
var circleGoing;

/***************************************************************************
Object constructors; making Cross-browser object of the buttons
****************************************************************************/
function makeButton(obj,nest,stop){
    nest=(!nest) ? '':'document.'+nest+'.'                                       
    this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')                               
    this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');       
    this.x=(n)? this.css.left:this.css.pixelLeft;
    this.y=(n)? this.css.top:this.css.pixelTop;                                                   
    this.moveIt=b_moveIt                                       
    this.stop=stop       
    return this
}
function b_moveIt(x,y){
    this.x=x; this.y=y
      this.css.left=this.x
    this.css.top=this.y
}
/***************************************************************************
Initiating the buttons and starts the circlemove
****************************************************************************/
function init(num){
    //Getting the height and width of the document
    pageWidth=(n)?innerWidth:document.body.offsetWidth;
    pageHeight=(n)?innerHeight:document.body.offsetHeight;
    //Making a simple object for the divCont
    oCont=(n)?eval('document.divCont'):eval('divCont.style')
    //Moving the divCont to the center of the page.
    oCont.left=pageWidth/2-110
    oCont.top=pageHeight/2-110
    //Making an array to hold the button objects
    oBut=new Array()
    //Making button objects, arguments: divName,nested div,anglestop
    oBut[0]=new makeButton('div0','divCont',0)
    oBut[1]=new makeButton('div1','divCont',30)
    oBut[2]=new makeButton('div2','divCont',-30)
    oBut[3]=new makeButton('div3','divCont',-90)
    oBut[4]=new makeButton('div4','divCont',-150)
    oBut[5]=new makeButton('div5','divCont',-210)
    //Moves the button; ie5 bugfix
    if(ie) oBut[0].moveIt(98,6)
    //Starts the circlemove
    xcenter = oBut[0].x - radius*Math.cos(startAngle*Math.PI/180)
    ycenter = oBut[0].y + radius*Math.sin(startAngle*Math.PI/180)
    circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')

}
/***************************************************************************
Moves the buttons in a circle
****************************************************************************/
function circleGo(radius,angleinc,angle,endangle,xcenter,ycenter,fn) {
    //if angleinc < endangle-angle (no matter if it's positive or negative numbers)
    if ((Math.abs(angleinc)<Math.abs(endangle-angle))) {
        circleGoing=true
        angle += angleinc
        var x = xcenter + radius*Math.cos(angle*Math.PI/180)
        var y = ycenter - radius*Math.sin(angle*Math.PI/180)
        for(i=1;i<oBut.length;i++){
            //if angle are bigger then the stop angle of each button
            if(angle>=oBut[i].stop)    oBut[i].moveIt(x,y)
        }
        setTimeout("circleGo("+radius+","+angleinc+","+angle+","+endangle+","+xcenter+","+ycenter+",'"+fn+"')",circleSpeed)
    }else{
        circleGoing=false
        eval(fn)
    }
}
/***************************************************************************
When click on the buttons
****************************************************************************/
var zIndex=5
function mclick(num){
    //If it's not moving already
    if(!circleGoing){
        //Added feature; the clicked buttons stays on top!
        zIndex++
        oBut[num].css.zIndex=zIndex
        //Checks the state of the menu and circles it the right way
        if(menuState) circleGo(radius,moveAngle,oBut[5].stop,startAngle+5,xcenter,ycenter,'moveCenter()')
        else moveFromCenter()
    }
}   
//Moving the buttons to the center
function moveCenter(){
    if(oBut[0].y<95){
        for(i=0;i<oBut.length;i++){
            oBut[i].moveIt(oBut[i].x+(i-2.5),oBut[i].y+3)
        }
        setTimeout("moveCenter()",30)
    }else{   
        menuState=0
        //HERE GOES CODE TO MAKE IT DO SOMETHING WHEN IT REACHES CENTER!
    }
}
//Moving the buttons from center
function moveFromCenter(){
    if(oBut[0].y>6){
        for(i=0;i<oBut.length;i++){
            oBut[i].moveIt(oBut[i].x-(i-2.5),oBut[i].y-3)
        }
        setTimeout("moveFromCenter()",30)
    }else{   
        circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')
    }
}
/***************************************************************************
Mouseover and out on the buttons
****************************************************************************/
function mover(num){
    oBut[num].ref["img"+num].src='images/1_1.gif'
}
function mout(num){
    oBut[num].ref["img"+num].src='images/'+(num+1)+'.gif'
}
//Starting the menu on pageload.   
onload=init;   
</script>
</HEAD>
<BODY>

<div id="divCont">
    <!-- Circle image -->
    <div id="divCenter"><img src="images/circle.gif" name="imgCenter" width=200 height=200 border=0 alt=""></div>
    <!-- Buttons -->
    <div id="div0" class="clButtons"><a href="#" onclick="mclick(0); parent.focus(); return false" onmouseover="mover(0)" onmouseout="mout(0)"><img src="images/1.gif" name="img0" width=22 height=22 border=0 alt=""></a></div>
    <div id="div1" class="clButtons"><a href="#" onclick="mclick(1); parent.focus(); return false" onmouseover="mover(1)" onmouseout="mout(1)"><img src="images/2.gif" name="img1" width=22 height=22 border=0 alt=""></a></div>
    <div id="div2" class="clButtons"><a href="#" onclick="mclick(2); parent.focus(); return false" onmouseover="mover(2)" onmouseout="mout(2)"><img src="images/3.gif" name="img2" width=22 height=22 border=0 alt=""></a></div>
    <div id="div3" class="clButtons"><a href="#" onclick="mclick(3); parent.focus(); return false" onmouseover="mover(3)" onmouseout="mout(3)"><img src="images/4.gif" name="img3" width=22 height=22 border=0 alt=""></a></div>
    <div id="div4" class="clButtons"><a href="#" onclick="mclick(4); parent.focus(); return false" onmouseover="mover(4)" onmouseout="mout(4)"><img src="images/5.gif" name="img4" width=22 height=22 border=0 alt=""></a></div>
    <div id="div5" class="clButtons"><a href="#" onclick="mclick(5); parent.focus(); return false" onmouseover="mover(5)" onmouseout="mout(5)"><img src="images/6.gif" name="img5" width=22 height=22 border=0 alt=""></a></div>
</div>

</BODY>
</HTML>
Avatar billede skjoldby Nybegynder
28. oktober 1999 - 12:48 #4
Jeg kunne ikke få dit script til at virke, men jeg fandt det på bratta.com. Det jeg har gjort er, at jeg har lavet en variabel linkno. Når man klikker på linket sender den en variablen som definere hvilket link der skal bruges.
For at du kan lave dine egne linknavne, skal du gå ned i linje 135 (se evt efter denne : //HERE GOES CODE TO MAKE IT DO SOMETHING WHEN IT REACHES CENTER!
Avatar billede skjoldby Nybegynder
28. oktober 1999 - 12:51 #5
Underligt der mangler en masse af mit svar...

fortsættelse:

i linie 136-141 findes links til siderne som åbner i samme vindue!!

Her er hele siden redigeret:


<html>
<head>
    <title>Cross-browser Dynamic HTML Demo - Circle animation demo</title>
<meta name="Author" content="Thomas Brattli (webmaster@bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, dhtml, html, demos, Javascript, VBscript, Cross-browser, Netscape4.0, IE4.0, Internet explorer, Dynamic HTML">
<meta name="Description" content="Animated DHTML circle demo">
<style>
DIV{position:absolute}
DIV.clButtons{width:22; height:22; left:98; top:6; visibility:inherit}
#divCont{width:220; height:220; clip:rect(0,220,220,0); z-index:30; visibility:visible}
#divCenter{width:200; height:200; left:10; top:10; visibility:inherit}
</style>
<script>
/***************************************************************************
Copyright (C) 1999 Thomas Brattli
Code made by and copyrighted to Thomas Brattli from
www.bratta.com. Can be used freely as long as this message is instact
****************************************************************************/

//Simple browsercheck
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

/***************************************************************************
Main variables
****************************************************************************/
//The radius for the circle
radius=92
//Start angle
startAngle=90
//Speed in milliseconds
circleSpeed=20
//angle to move per timeout
moveAngle=5

var xcenter;
var ycenter;
var menuState;
var circleGoing;

/***************************************************************************
Object constructors; making Cross-browser object of the buttons
****************************************************************************/
function makeButton(obj,nest,stop){
    nest=(!nest) ? '':'document.'+nest+'.'                                       
    this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')                               
    this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');       
    this.x=(n)? this.css.left:this.css.pixelLeft;
    this.y=(n)? this.css.top:this.css.pixelTop;                                                   
    this.moveIt=b_moveIt                                       
    this.stop=stop       
    return this
}
function b_moveIt(x,y){
    this.x=x; this.y=y
      this.css.left=this.x
    this.css.top=this.y
}
/***************************************************************************
Initiating the buttons and starts the circlemove
****************************************************************************/
function init(num){
    //Getting the height and width of the document
    pageWidth=(n)?innerWidth:document.body.offsetWidth;
    pageHeight=(n)?innerHeight:document.body.offsetHeight;
    //Making a simple object for the divCont
    oCont=(n)?eval('document.divCont'):eval('divCont.style')
    //Moving the divCont to the center of the page.
    oCont.left=pageWidth/2-110
    oCont.top=pageHeight/2-110
    //Making an array to hold the button objects
    oBut=new Array()
    //Making button objects, arguments: divName,nested div,anglestop
    oBut[0]=new makeButton('div0','divCont',0)
    oBut[1]=new makeButton('div1','divCont',30)
    oBut[2]=new makeButton('div2','divCont',-30)
    oBut[3]=new makeButton('div3','divCont',-90)
    oBut[4]=new makeButton('div4','divCont',-150)
    oBut[5]=new makeButton('div5','divCont',-210)
    //Moves the button; ie5 bugfix
    if(ie) oBut[0].moveIt(98,6)
    //Starts the circlemove
    xcenter = oBut[0].x - radius*Math.cos(startAngle*Math.PI/180)
    ycenter = oBut[0].y + radius*Math.sin(startAngle*Math.PI/180)
    circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')

}
/***************************************************************************
Moves the buttons in a circle
****************************************************************************/
function circleGo(radius,angleinc,angle,endangle,xcenter,ycenter,fn) {
    //if angleinc < endangle-angle (no matter if it's positive or negative numbers)
    if ((Math.abs(angleinc)<Math.abs(endangle-angle))) {
        circleGoing=true
        angle += angleinc
        var x = xcenter + radius*Math.cos(angle*Math.PI/180)
        var y = ycenter - radius*Math.sin(angle*Math.PI/180)
        for(i=1;i<oBut.length;i++){
            //if angle are bigger then the stop angle of each button
            if(angle>=oBut[i].stop)    oBut[i].moveIt(x,y)
        }
        setTimeout("circleGo("+radius+","+angleinc+","+angle+","+endangle+","+xcenter+","+ycenter+",'"+fn+"')",circleSpeed)
    }else{
        circleGoing=false
        eval(fn)
    }
}
/***************************************************************************
When click on the buttons
****************************************************************************/
var zIndex=5
function mclick(num){
    //If it's not moving already
    if(!circleGoing){
        //Added feature; the clicked buttons stays on top!
        zIndex++
        oBut[num].css.zIndex=zIndex
        //Checks the state of the menu and circles it the right way
        if(menuState) circleGo(radius,moveAngle,oBut[5].stop,startAngle+5,xcenter,ycenter,'moveCenter()')
        else moveFromCenter()
    }
}   
//Moving the buttons to the center

linkno = 6;
function moveCenter(){
    if(oBut[0].y<95){
        for(i=0;i<oBut.length;i++){
            oBut[i].moveIt(oBut[i].x+(i-2.5),oBut[i].y+3)
        }
        setTimeout("moveCenter()",30)
    }else{   
        menuState=0

        //HERE GOES CODE TO MAKE IT DO SOMETHING WHEN IT REACHES CENTER!
    if (linkno==0) {window.location.href="link0.htm"};
    if (linkno==1) {window.location.href="link1.htm"};
    if (linkno==2) {window.location.href="link2.htm"};
    if (linkno==3) {window.location.href="link3.htm"};
    if (linkno==4) {window.location.href="link4.htm"};
    if (linkno==5) {window.location.href="link5.htm"};

    }
}
//Moving the buttons from center
function moveFromCenter(){
    if(oBut[0].y>6){
        for(i=0;i<oBut.length;i++){
            oBut[i].moveIt(oBut[i].x-(i-2.5),oBut[i].y-3)
        }
        setTimeout("moveFromCenter()",30)
    }else{   
        circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')
    }
}
/***************************************************************************
Mouseover and out on the buttons
****************************************************************************/
function mover(num){
    oBut[num].ref["img"+num].src='images/1_1.gif'
}
function mout(num){
    oBut[num].ref["img"+num].src='images/'+(num+1)+'.gif'
}
//Starting the menu on pageload.   
onload=init;   
</script>
</HEAD>
<BODY>

<div id="divCont">
    <!-- Circle image -->
    <div id="divCenter"><img src="images/circle.gif" name="imgCenter" width=200 height=200 border=0 alt=""></div>
    <!-- Buttons -->
    <div id="div0" class="clButtons"><a href="#" onclick="mclick(0); linkno=0; parent.focus(); return false;" onmouseover="mover(0)" onmouseout="mout(0)"><img src="images/1.gif" name="img0" width=22 height=22 border=0 alt=""></a></div>
    <div id="div1" class="clButtons"><a href="#" onclick="mclick(1); linkno=1; parent.focus(); return false;" onmouseover="mover(1)" onmouseout="mout(1)"><img src="images/2.gif" name="img1" width=22 height=22 border=0 alt=""></a></div>
    <div id="div2" class="clButtons"><a href="#" onclick="mclick(2); linkno=2; parent.focus(); return false;" onmouseover="mover(2)" onmouseout="mout(2)"><img src="images/3.gif" name="img2" width=22 height=22 border=0 alt=""></a></div>
    <div id="div3" class="clButtons"><a href="#" onclick="mclick(3); linkno=3; parent.focus(); return false;" onmouseover="mover(3)" onmouseout="mout(3)"><img src="images/4.gif" name="img3" width=22 height=22 border=0 alt=""></a></div>
    <div id="div4" class="clButtons"><a href="#" onclick="mclick(4); linkno=4; parent.focus(); return false;" onmouseover="mover(4)" onmouseout="mout(4)"><img src="images/5.gif" name="img4" width=22 height=22 border=0 alt=""></a></div>
    <div id="div5" class="clButtons"><a href="#" onclick="mclick(5); linkno=5; parent.focus(); return false;" onmouseover="mover(5)" onmouseout="mout(5)"><img src="images/6.gif" name="img5" width=22 height=22 border=0 alt=""></a></div>
</div>

</BODY>
</HTML>
Avatar billede wichpower Nybegynder
28. oktober 1999 - 13:04 #6
skjoldby>> jeg har prøvet at kopier hele scriptet, men så virker det slet ikke, den står bare helt stille i det ene hjørne

Wichpower
Avatar billede wichpower Nybegynder
28. oktober 1999 - 13:10 #7
skjlodby>> den siger der er en fejl i linje 45 tegn 23 tegnet ´:´ var ventet
og linje 180 tegn 1 et objekt var ventet

men ellers er det fedt nok!
Avatar billede wichpower Nybegynder
28. oktober 1999 - 13:35 #8
Jeg har lige ændret i det script som jeg fik fra dig og nu virker det, så det er bare helt vildt fedt
Tusind tak skal du have
du får lige det ændret script.
<html>
<head>
    <title>Cross-browser Dynamic HTML Demo - Circle animation demo</title>
<meta name="Author" content="Thomas Brattli (webmaster@bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, dhtml, html, demos, Javascript, VBscript, Cross-browser, Netscape4.0, IE4.0, Internet explorer, Dynamic HTML">
<meta name="Description" content="Animated DHTML circle demo">
<style>
DIV{position:absolute}
DIV.clButtons{width:22; height:22; left:98; top:6; visibility:inherit}
#divCont{width:220; height:220; clip:rect(0,220,220,0); z-index:30; visibility:visible}
#divCenter{width:200; height:200; left:10; top:10; visibility:inherit}
</style>
<script>
/***************************************************************************
Copyright (C) 1999 Thomas Brattli
Code made by and copyrighted to Thomas Brattli from
www.bratta.com. Can be used freely as long as this message is instact
****************************************************************************/

//Simple browsercheck
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

/***************************************************************************
Main variables
****************************************************************************/
//The radius for the circle
radius=92
//Start angle
startAngle=90
//Speed in milliseconds
circleSpeed=20
//angle to move per timeout
moveAngle=5

var xcenter;
var ycenter;
var menuState;
var circleGoing;

/***************************************************************************
Object constructors; making Cross-browser object of the buttons
****************************************************************************/
function makeButton(obj,nest,stop){
    nest=(!nest) ? '':'document.'+nest+'.'                                       
    this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')                               
    this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');       
    this.x=(n)? this.css.left:this.css.pixelLeft;
    this.y=(n)? this.css.top:this.css.pixelTop;                                                   
    this.moveIt=b_moveIt                                       
    this.stop=stop       
    return this
}
function b_moveIt(x,y){
    this.x=x; this.y=y
      this.css.left=this.x
    this.css.top=this.y
}
/***************************************************************************
Initiating the buttons and starts the circlemove
****************************************************************************/
function init(num){
    //Getting the height and width of the document
    pageWidth=(n)?innerWidth:document.body.offsetWidth;
    pageHeight=(n)?innerHeight:document.body.offsetHeight;
    //Making a simple object for the divCont
    oCont=(n)?eval('document.divCont'):eval('divCont.style')
    //Moving the divCont to the center of the page.
    oCont.left=pageWidth/2-110
    oCont.top=pageHeight/2-110
    //Making an array to hold the button objects
    oBut=new Array()
    //Making button objects, arguments: divName,nested div,anglestop
    oBut[0]=new makeButton('div0','divCont',0)
    oBut[1]=new makeButton('div1','divCont',30)
    oBut[2]=new makeButton('div2','divCont',-30)
    oBut[3]=new makeButton('div3','divCont',-90)
    oBut[4]=new makeButton('div4','divCont',-150)
    oBut[5]=new makeButton('div5','divCont',-210)
    //Moves the button; ie5 bugfix
    if(ie) oBut[0].moveIt(98,6)
    //Starts the circlemove
    xcenter = oBut[0].x - radius*Math.cos(startAngle*Math.PI/180)
    ycenter = oBut[0].y + radius*Math.sin(startAngle*Math.PI/180)
    circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')

}
/***************************************************************************
Moves the buttons in a circle
****************************************************************************/
function circleGo(radius,angleinc,angle,endangle,xcenter,ycenter,fn) {
    //if angleinc < endangle-angle (no matter if it's positive or negative numbers)
    if ((Math.abs(angleinc)<Math.abs(endangle-angle))) {
        circleGoing=true
        angle += angleinc
        var x = xcenter + radius*Math.cos(angle*Math.PI/180)
        var y = ycenter - radius*Math.sin(angle*Math.PI/180)
        for(i=1;i<oBut.length;i++){
            //if angle are bigger then the stop angle of each button
            if(angle>=oBut[i].stop)    oBut[i].moveIt(x,y)
        }
        setTimeout("circleGo("+radius+","+angleinc+","+angle+","+endangle+","+xcenter+","+ycenter+",'"+fn+"')",circleSpeed)
    }else{
        circleGoing=false
        eval(fn)
    }
}
/***************************************************************************
When click on the buttons
****************************************************************************/
var zIndex=5
function mclick(num){
    //If it's not moving already
    if(!circleGoing){
        //Added feature; the clicked buttons stays on top!
        zIndex++
        oBut[num].css.zIndex=zIndex
        //Checks the state of the menu and circles it the right way
        if(menuState) circleGo(radius,moveAngle,oBut[5].stop,startAngle+5,xcenter,ycenter,'moveCenter()')
        else moveFromCenter()
    }
}   
//Moving the buttons to the center
function moveCenter(){
    if(oBut[0].y<95){
        for(i=0;i<oBut.length;i++){
            oBut[i].moveIt(oBut[i].x+(i-2.5),oBut[i].y+3)
        }
        setTimeout("moveCenter()",30)
    }else{   
        menuState=0
    //HERE GOES CODE TO MAKE IT DO SOMETHING WHEN IT REACHES CENTER!
    if (linkno==0) {window.location.href="http://hjem.get2net.dk/wich"};
        if (linkno==1) {window.location.href="link1.htm"};
        if (linkno==2) {window.location.href="link2.htm"};
        if (linkno==3) {window.location.href="link3.htm"};
        if (linkno==4) {window.location.href="link4.htm"};
        if (linkno==5) {window.location.href="link5.htm"};

    }
}
//Moving the buttons from center
function moveFromCenter(){
    if(oBut[0].y>6){
        for(i=0;i<oBut.length;i++){
            oBut[i].moveIt(oBut[i].x-(i-2.5),oBut[i].y-3)
        }
        setTimeout("moveFromCenter()",30)
    }else{   
        circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')
    }
}
/***************************************************************************
Mouseover and out on the buttons
****************************************************************************/
function mover(num){
    oBut[num].ref["img"+num].src='images/1_1.gif'
}
function mout(num){
    oBut[num].ref["img"+num].src='images/'+(num+1)+'.gif'
}
//Starting the menu on pageload.   
onload=init;   
</script>
</HEAD>
<BODY>

<div id="divCont">
    <!-- Circle image -->
    <div id="divCenter"><img src="images/circle.gif" name="imgCenter" width=200 height=200 border=0 alt=""></div>
    <!-- Buttons -->
    <div id="div0" class="clButtons"><a href="http://hjem.get2net.dk/wich" onclick="mclick(0); linkno=0;parent.focus(); return false" onmouseover="mover(0)" onmouseout="mout(0)"><img src="images/1.gif" name="img0" width=22 height=22 border=0 alt=""></a></div>
    <div id="div1" class="clButtons"><a href="#" onclick="mclick(1); parent.focus(); return false" onmouseover="mover(1)" onmouseout="mout(1)"><img src="images/2.gif" name="img1" width=22 height=22 border=0 alt=""></a></div>
    <div id="div2" class="clButtons"><a href="#" onclick="mclick(2); parent.focus(); return false" onmouseover="mover(2)" onmouseout="mout(2)"><img src="images/3.gif" name="img2" width=22 height=22 border=0 alt=""></a></div>
    <div id="div3" class="clButtons"><a href="#" onclick="mclick(3); parent.focus(); return false" onmouseover="mover(3)" onmouseout="mout(3)"><img src="images/4.gif" name="img3" width=22 height=22 border=0 alt=""></a></div>
    <div id="div4" class="clButtons"><a href="#" onclick="mclick(4); parent.focus(); return false" onmouseover="mover(4)" onmouseout="mout(4)"><img src="images/5.gif" name="img4" width=22 height=22 border=0 alt=""></a></div>
    <div id="div5" class="clButtons"><a href="#" onclick="mclick(5); parent.focus(); return false" onmouseover="mover(5)" onmouseout="mout(5)"><img src="images/6.gif" name="img5" width=22 height=22 border=0 alt=""></a></div>
</div>

</BODY>
</HTML>
Avatar billede svedendeko Nybegynder
07. januar 2000 - 10:08 #9
Jeg syntes lige at jeg for retfærdighedens skyld ville bringe det ovenstående stykke kode men i en version der er rettet for fejl..

<html>
<head>
    <title>Cross-browser Dynamic HTML Demo - Circle animation demo</title>
<meta name="Author" content="Thomas Brattli (webmaster@bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, dhtml, html, demos, Javascript, VBscript, Cross-browser, Netscape4.0, IE4.0, Internet explorer, Dynamic HTML">
<meta name="Description" content="Animated DHTML circle demo">
<style>
DIV{position:absolute}
DIV.clButtons{width:22; height:22; left:98; top:6; visibility:inherit}
#divCont{width:220; height:220; clip:rect(0,220,220,0); z-index:30; visibility:visible}
#divCenter{width:200; height:200; left:10; top:10; visibility:inherit}
</style>
<script>
/***************************************************************************
Copyright (C) 1999 Thomas Brattli
Code made by and copyrighted to Thomas Brattli from
www.bratta.com. Can be used freely as long as this message is instact
****************************************************************************/

//Simple browsercheck
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

/***************************************************************************
Main variables
****************************************************************************/
//The radius for the circle
radius=92
//Start angle
startAngle=90
//Speed in milliseconds
circleSpeed=20
//angle to move per timeout
moveAngle=5

var xcenter;
var ycenter;
var menuState;
var circleGoing;

/***************************************************************************
Object constructors; making Cross-browser object of the buttons
****************************************************************************/
function makeButton(obj,nest,stop){
    nest=(!nest) ? ':' :  'document.'+nest+'.'                                       
    this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')                               
    this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');       
    this.x=(n)? this.css.left:this.css.pixelLeft;
    this.y=(n)? this.css.top:this.css.pixelTop;                                                   
    this.moveIt=b_moveIt                                       
    this.stop=stop       
    return this
}
function b_moveIt(x,y){
    this.x=x; this.y=y
      this.css.left=this.x
    this.css.top=this.y
}
/***************************************************************************
Initiating the buttons and starts the circlemove
****************************************************************************/
function init(num){
    //Getting the height and width of the document
    pageWidth=(n)?innerWidth:document.body.offsetWidth;
    pageHeight=(n)?innerHeight:document.body.offsetHeight;
    //Making a simple object for the divCont
    oCont=(n)?eval('document.divCont'):eval('divCont.style')
    //Moving the divCont to the center of the page.
    oCont.left=pageWidth/2-110
    oCont.top=pageHeight/2-110
    //Making an array to hold the button objects
    oBut=new Array()
    //Making button objects, arguments: divName,nested div,anglestop
    oBut[0]=new makeButton('div0','divCont',0)
    oBut[1]=new makeButton('div1','divCont',30)
    oBut[2]=new makeButton('div2','divCont',-30)
    oBut[3]=new makeButton('div3','divCont',-90)
    oBut[4]=new makeButton('div4','divCont',-150)
    oBut[5]=new makeButton('div5','divCont',-210)
    //Moves the button; ie5 bugfix
    if(ie) oBut[0].moveIt(98,6)
    //Starts the circlemove
    xcenter = oBut[0].x - radius*Math.cos(startAngle*Math.PI/180)
    ycenter = oBut[0].y + radius*Math.sin(startAngle*Math.PI/180)
    circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')

}
/***************************************************************************
Moves the buttons in a circle
****************************************************************************/
function circleGo(radius,angleinc,angle,endangle,xcenter,ycenter,fn) {
    //if angleinc < endangle-angle (no matter if it's positive or negative numbers)
    if ((Math.abs(angleinc)<Math.abs(endangle-angle))) {
        circleGoing=true
        angle += angleinc
        var x = xcenter + radius*Math.cos(angle*Math.PI/180)
        var y = ycenter - radius*Math.sin(angle*Math.PI/180)
        for(i=1;i<oBut.length;i++){
            //if angle are bigger then the stop angle of each button
            if(angle>=oBut[i].stop)    oBut[i].moveIt(x,y)
        }
        setTimeout("circleGo("+radius+","+angleinc+","+angle+","+endangle+","+xcenter+","+ycenter+",'"+fn+"')",circleSpeed)
    }else{
        circleGoing=false
        eval(fn)
    }
}
/***************************************************************************
When click on the buttons
****************************************************************************/
var zIndex=5
function mclick(num){
    //If it's not moving already
    if(!circleGoing){
        //Added feature; the clicked buttons stays on top!
        zIndex++
        oBut[num].css.zIndex=zIndex
        //Checks the state of the menu and circles it the right way
        if(menuState) circleGo(radius,moveAngle,oBut[5].stop,startAngle+5,xcenter,ycenter,'moveCenter()')
        else moveFromCenter()
    }
}   
//Moving the buttons to the center
function moveCenter(){
    if(oBut[0].y<95){
        for(i=0;i<oBut.length;i++){
            oBut[i].moveIt(oBut[i].x+(i-2.5),oBut[i].y+3)
        }
        setTimeout("moveCenter()",30)
    }else{   
        menuState=0
    //HERE GOES CODE TO MAKE IT DO SOMETHING WHEN IT REACHES CENTER!
    if (linkno==0) {window.location.href="http://hjem.get2net.dk/wich"};
        if (linkno==1) {window.location.href="link1.htm"};
        if (linkno==2) {window.location.href="link2.htm"};
        if (linkno==3) {window.location.href="link3.htm"};
        if (linkno==4) {window.location.href="link4.htm"};
        if (linkno==5) {window.location.href="link5.htm"};

    }
}
//Moving the buttons from center
function moveFromCenter(){
    if(oBut[0].y>6){
        for(i=0;i<oBut.length;i++){
            oBut[i].moveIt(oBut[i].x-(i-2.5),oBut[i].y-3)
        }
        setTimeout("moveFromCenter()",30)
    }else{   
        circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')
    }
}
/***************************************************************************
Mouseover and out on the buttons
****************************************************************************/
function mover(num){
    oBut[num].ref["img"+num].src='images/1_1.gif'
}
function mout(num){
    oBut[num].ref["img"+num].src='images/'+(num+1)+'.gif'
}
//Starting the menu on pageload.   
onload=init;   
</script>
</HEAD>
<BODY>

<div id="divCont">
    <!-- Circle image -->
    <div id="divCenter"><img src="images/circle.gif" name="imgCenter" width=200 height=200 border=0 alt=""></div>
    <!-- Buttons -->
    <div id="div0" class="clButtons"><a href="http://hjem.get2net.dk/wich" onclick="mclick(0); linkno=0;parent.focus(); return false" onmouseover="mover(0)" onmouseout="mout(0)"><img src="images/1.gif" name="img0" width=22 height=22 border=0 alt=""></a></div>
    <div id="div1" class="clButtons"><a href="#" onclick="mclick(1); parent.focus(); return false" onmouseover="mover(1)" onmouseout="mout(1)"><img src="images/2.gif" name="img1" width=22 height=22 border=0 alt=""></a></div>
    <div id="div2" class="clButtons"><a href="#" onclick="mclick(2); parent.focus(); return false" onmouseover="mover(2)" onmouseout="mout(2)"><img src="images/3.gif" name="img2" width=22 height=22 border=0 alt=""></a></div>
    <div id="div3" class="clButtons"><a href="#" onclick="mclick(3); parent.focus(); return false" onmouseover="mover(3)" onmouseout="mout(3)"><img src="images/4.gif" name="img3" width=22 height=22 border=0 alt=""></a></div>
    <div id="div4" class="clButtons"><a href="#" onclick="mclick(4); parent.focus(); return false" onmouseover="mover(4)" onmouseout="mout(4)"><img src="images/5.gif" name="img4" width=22 height=22 border=0 alt=""></a></div>
    <div id="div5" class="clButtons"><a href="#" onclick="mclick(5); parent.focus(); return false" onmouseover="mover(5)" onmouseout="mout(5)"><img src="images/6.gif" name="img5" width=22 height=22 border=0 alt=""></a></div>
</div>

</BODY>
</HTML>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester