DHTMLCentral.com - Free Dynamic HTML Scripts

Login

Save Password - Forgot Pass?

Not a member?
Become a DC
member now!

Info

Author: Thomas Brattli

Works in: NS4+ IE4+

Downloaded:32214 times
View script

History
No history...

SlideBall
Written 05/14/2001 by Thomas Brattli. Last updated 09/23/2001.

This scripts make a image slide to the menu item you mouseover. And stay there when you choose one of them (if used in frames).

Instructions
Instructions in source-code.

Source
You have two options on getting the source to this script.

1. Copy the source from the textboxes below and place the code inside the body textbox in the body of your document and the code in the head textbox in the head of your document. If there are images to the script right click on the images below the textboxes and choose "save as" to get them.

2. Download the sourcecode and images in a zip file

Head

circleXstart = 100 //Where should the circle start and end, x position
circleYstart = -25 //Where should the circle start and end, y position
circleXoffset = 5  //The offset between the buttons X position and the circles X position on mouseover
circleYoffset = -3 //The offset between the buttons Y position and the circles Y position on mouseover

circlePXspeed = 5  //How many pixels the circle will move per timeout
circleTspeed = 10  //Timeout speed in milliseconds

circleStay = 1     //Set this to 0 if you don't want the circle to stay on the active link when a link is clicked.

//NOTE: To set the placement of the buttons, see the slideball_init() function!

/****************************************************************************
Cross-browser object part...You should not need to edit anything this
part.
****************************************************************************/
function makeObj(obj,nest,x,y){
	nest = (!nest)?"":'document.'+nest+'.'		
	this.css = bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0
	this.evnt = bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?this.css:0
	this.showIt = b_showIt
	this.moveIt = b_moveIt
	this.slide = b_slide
	this.slideIt = b_slideIt
	this.obj = obj+"Object"
	eval(this.obj+"=this")
	return this
}

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

function b_slide(dx,dy,endx,endy,speed,fn,wh) {
	if (!fn) fn = null
	if (!wh) wh = null
	if (this.slideactive && (Math.floor(Math.abs(dx))<Math.floor(Math.abs(endx-this.x)) || 	Math.floor(Math.abs(dy))<Math.floor(Math.abs(endy-this.y)))) {
		this.moveIt(this.x+dx,this.y+dy)
		eval(wh)
		slidTim = setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+speed+",'"+fn+"','"+wh+"')",speed)
	}
	else{
		this.slideactive = 0
		this.moveIt(endx,endy)
		eval(fn)
	}
}

/****************************************************************************
The init function. This is where you set the placement of the Buttons.
****************************************************************************/
function slideballInit(){
	oBut = new Array()
	for (var i=0; i<=numItems; i++){
		oBut[i] = new makeObj('divButton'+i)
	}
	oCircle = new makeObj('divCircle')
	
	//Set the placement of each individual button below.
	//Syntax: oBut[num].moveIt(xplacement,yplacement)
	oBut[0].moveIt(50,150) 
	oBut[1].moveIt(110,150)
	oBut[2].moveIt(170,150)
	oBut[3].moveIt(230,150)
	oBut[4].moveIt(280,150)
	oCircle.moveIt(circleXstart,circleYstart)
	//Showing the buttons
	for(var i=0; i<=numItems; i++){
		oBut[i].showIt()
	}
}

/****************************************************************************
Mouseover and mouseout functions.
****************************************************************************/
var slidTim = 100;
var active = -1
function sbmover(num){
	clearTimeout(slidTim)
	oCircle.slideactive = false
	oCircle.slideIt(oBut[num].x+circleXoffset,oBut[num].y+circleYoffset,circlePXspeed,circleTspeed)
}
function sbmout(num){
	clearTimeout(slidTim)
	oCircle.slideactive = false
	if (active>-1 && circleStay) oCircle.slideIt(oBut[active].x+circleXoffset,oBut[active].y+circleYoffset,circlePXspeed,circleTspeed)
	else oCircle.slideIt(circleXstart,circleYstart,circlePXspeed,circleTspeed)
}
function changeListing(num){
	active = num
}

//Starting the script when the balls load.
if(bw.bw) onload = slideballInit;

/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
   1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
   2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
   Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
</script>

Body

<div id="divButton0" class="clButtons"><a href="#" onmouseover="sbmover(0)" onmouseout="sbmout(0)" onclick="changeListing(0); return false">Link 1</a></div>
<div id="divButton1" class="clButtons"><a href="#" onmouseover="sbmover(1)" onmouseout="sbmout(1)" onclick="changeListing(1); return false">Link 2</a></div>
<div id="divButton2" class="clButtons"><a href="#" onmouseover="sbmover(2)" onmouseout="sbmout(2)" onclick="changeListing(2); return false">Link 3</a></div>
<div id="divButton3" class="clButtons"><a href="#" onmouseover="sbmover(3)" onmouseout="sbmout(3)" onclick="changeListing(3); return false">Link 4</a></div>
<div id="divButton4" class="clButtons"><a href="#" onmouseover="sbmover(4)" onmouseout="sbmout(4)" onclick="changeListing(4); return false">Link 5</a></div>
<div id="divCircle"><img src="circle.gif" width=23 height=22 alt="" border="0"></div>

All the free scripts on this site may be reused as long the copyright notice is intact in the script source. If you wish to use any of the scripts without the copyright notice contact us at copyright@dhtmlcentral.com.

Donations

Though all scripts on this site is free you have the ability to donate to the site to help freeing up my time to make the scripts (and the rest of the site) better.

For more info see donations.

SlideBall Written 05/14/2001 by Thomas Brattli. Last updated 09/23/2001.

Donations

SlideBall
Written 05/14/2001 by Thomas Brattli. Last updated 09/23/2001.