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>
Ny bruger
Nybegynder
Opret
Preview
