problem fertiges script anzupassen

kid01 · 15.03.2005, 11:11

Hallo
ich habe mir vorige Woche ein Script gesaugt, welches ein Bild zum angeklickten Link in der Navigation wandern lässt!
So weit so gut..

Bis jetzt ist meine Navi ne Tabelle dessen Zeilen-Hintergrund per Mouseover geändert wird! Eigentlich soll dies mit dem Hintergrundändern auch so bleiben! Nur eben zusätzlich soll sich noch ein Bild hinter die Links bewegen.
Hier mal der Originalcode des fertigen Scripts

Code:

<html>
<head>
<title>DHTMLCentral.com - Free Dynamic HTML Scripts - SlideBall Demo</title>
<meta name="Author" content="Thomas Brattli (webmaster@dhtmlcentral.com)">
<META NAME="Generator" CONTENT="Designer:Thomas Brattli (www.bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scripts,slideball,links,ball,animation,move,slide,mouseover,menu,">
<meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help.">
<style type="text/css">
#divCircle   {position:absolute; width:10px; height:10px; z-index:1; top:-50px;} 
.clButtons   {position:absolute; width:47px; height:10px; top:20px; visibility:hidden; z-index:10; font-family:arial,helvetica,sans-serif; font-size:12px;}
.clButtons a {color:#333366;} 
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************   
SlideBall 
*   Copyright (C) 2001 Thomas Brattli
*   This script was released at DHTMLCentral.com
*   Visit for more great scripts!
*   This may be used and changed freely as long as this msg is intact!
*   We will also appreciate any links you could give us.
*
*   Made by Thomas Brattli 
*********************************************************************************/

function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=this.agent.indexOf("Opera 5")>-1
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
	return this
}
var bw=new lib_bwcheck()


//Variables to set
numItems = 4       //How many menuitems do you want?

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

circlePXspeed = 3  //How many pixels the circle will move per timeout
circleTspeed = 6  //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_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
function b_showIt(){this.css.visibility="visible"}
function b_slideIt(endx,endy,inc,speed,fn,wh) {
	if (!this.slideactive) {
		var distx = endx - this.x
		var disty = endy - this.y
		var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc
		var dx = distx/num
		var dy = disty/num
		this.slideactive = 1
		this.slide(dx,dy,endx,endy,speed,fn,wh)
	}
}

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(50,180)
	oBut[2].moveIt(50,210)
	oBut[3].moveIt(50,240)
	oBut[4].moveIt(50,270)
	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>
</head>

<body marginleft="0" marginheight="0">

<div style="position:absolute; left:0; top:0">[img]/images/logo.gif[/img]</div>






<!-- Replace the "#" with your links. If you're using this in frames remember to add a target to the link.
NOTE: WHEN ADDING LINKS TO THESE HREF TAGS, REMEMBER TO REMOVE THE "; return false" PART IN THE ONCLICK!
--->
<div id="divButton0" class="clButtons">Link 1</div>
<div id="divButton1" class="clButtons">Link 2</div>
<div id="divButton2" class="clButtons">Link 3</div>
<div id="divButton3" class="clButtons">Link 4</div>
<div id="divButton4" class="clButtons">Link 5</div>
<div id="divCircle">[img]note.gif[/img]</div>
</body>
</html>

ich habe jetzt einfach folgendes versucht

Code:

<table border="0" align="left" background="navi.gif" width="166">
  	<tr><td width="3"></td>
		<td>
			<table border="0">
				<tr><td width="109" height="66"></td></tr>
	<tr><td onmouseover="bgColor='#FFFF00'" onMouseOver="sbmover(0)" onmouseout="bgColor='', sbmout(0)">Band</td></tr>

Dabei wird mir aber die 2. Table außerhalb der 1. angezeigt!

Das Bild bewegt sich leider auch nicht!
ich bin sicher, einer von euch kann mir nen Tipp geben

nullplan · 17.03.2005, 10:21

hast du evt. die tabellen mit css positioniert??? weil ja beide Tabelle "table" heißen... müsstest du eine umbenennen... sonst wüsste ich auch nix genaues...

kid01 · 18.03.2005, 13:14

mm die tabellen sind im css nicht positioniert!
Aber gut, dass nicht nur ich das nicht verstehe.

Kann man vielleicht den hintergrund von divs ändern?? Denn so währe mein Problem ja auch gelöst!

nullplan · 18.03.2005, 13:44

ja klat kannst du das...

gibst dem div einfach ne class...

Code:

<dic class="bereich"> content </div>

und der gibst du mit nem Stylesheet ne hintergrundfarbe

Code:

.bereich {background-color: #FF0000;}

kid01 · 18.03.2005, 20:34

ja aber wie funzt das dann das ich bei Mouseover die Farbe ändere!
Zur verdeutlichung http://www.okedoak.de
Dort will ich bei der Navi zusätzlich ne "fliegende" Note einbauen welche sich an die Links heftet!

nullplan · 21.03.2005, 10:08

aso dann musst du das so machen meine ich:

Code:

.bereich:hover{background-color: #FF0000;}

denke das müsste gehen...

Baltasar · 21.03.2005, 10:36

nur, dass der ie :hover bisher nur bei "a" darstellt und bei allen anderen attributen mal schön untern tisch fallen lässt

nullplan · 21.03.2005, 10:45

so'n assi...

dann nimm halt ein anderes attribut.... wie zum Bleistifft <var> oder <cite> ....

und ich dachte nur ich hätte das problem

cu

kid01 · 22.03.2005, 07:25

mm
ich glaube, ich verdeutliche mein Problem noch mal

http://www.okedoak.de/test/navi.html -> Original
http://www.okedoak.de/test/navi1.html ->
koomischerweise geht das! Zwar wird die falsche Position angesteuert, aber das kann man ja ändern!

http://www.okedoak.de/test/navi2.html ->
Sobald ich aber den gesamten Originalbereich auskommentiere, fliegt die Note auch nicht mehr zu meinem neuen Link!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Statistik Script Referrer Problem	7Style	PHP Tipps 2008	28	01.07.2008 15:14
Problem mit php script	Jelko	PHP Tipps 2008	2	19.08.2007 23:28
Problem bei Dateidownload via PHP Script	niffi	PHP-Fortgeschrittene	7	01.06.2007 19:39
Problem mit einem Script wo ich ned weiterkomme	MatthiasNI	PHP Tipps 2006	3	14.10.2006 17:35
Problem mit einem Script		PHP Tipps 2007	7	28.11.2005 16:37
Problem mit Login Script		PHP Tipps 2007	4	15.11.2005 17:29
mal funktionierts, mal nicht - großes Problem mit PHP Script	nicobischof	PHP Tipps 2005-2	5	01.10.2005 16:13
Problem mit Bilder einfügen Script		PHP Tipps 2005-2	3	21.07.2005 00:28
problem mit login script		PHP Tipps 2005	26	20.05.2005 22:10
Suche fertiges "Adress-Eintrag" Script		Beitragsarchiv	4	01.03.2005 15:17
script time out problem !		PHP Tipps 2005	4	14.01.2005 21:23
[Erledigt] PHP Script Problem		PHP Tipps 2005	12	06.01.2005 12:38
Problem mit einem Bildergallery Script (Strato Problem???)	sharky	PHP Tipps 2007	9	05.01.2005 11:00
Termin Script Problem		PHP Tipps 2004	16	16.08.2004 08:35
Problem beim Upload mehrerer Dateien per Script		PHP Tipps 2004	1	04.08.2004 16:26


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.03.2005, 10:21
nullplan Erfahrener Benutzer Registriert seit: 08.03.2005 Beiträge: 123	hast du evt. die tabellen mit css positioniert??? weil ja beide Tabelle "table" heißen... müsstest du eine umbenennen... sonst wüsste ich auch nix genaues... __________________ Was auch immer, du mich auch!

18.03.2005, 13:14
kid01 Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 642	mm die tabellen sind im css nicht positioniert! Aber gut, dass nicht nur ich das nicht verstehe. Kann man vielleicht den hintergrund von divs ändern?? Denn so währe mein Problem ja auch gelöst! __________________ http://www.dhsmedia.de http://www.buecherfuerdasleben.at

18.03.2005, 13:44
nullplan Erfahrener Benutzer Registriert seit: 08.03.2005 Beiträge: 123	ja klat kannst du das... gibst dem div einfach ne class... Code: <dic class="bereich"> content </div> und der gibst du mit nem Stylesheet ne hintergrundfarbe Code: .bereich {background-color: #FF0000;} __________________ Was auch immer, du mich auch!

18.03.2005, 20:34
kid01 Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 642	ja aber wie funzt das dann das ich bei Mouseover die Farbe ändere! Zur verdeutlichung http://www.okedoak.de Dort will ich bei der Navi zusätzlich ne "fliegende" Note einbauen welche sich an die Links heftet! __________________ http://www.dhsmedia.de http://www.buecherfuerdasleben.at

21.03.2005, 10:08
nullplan Erfahrener Benutzer Registriert seit: 08.03.2005 Beiträge: 123	aso dann musst du das so machen meine ich: Code: .bereich:hover{background-color: #FF0000;} denke das müsste gehen... __________________ Was auch immer, du mich auch!

21.03.2005, 10:36
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	nur, dass der ie :hover bisher nur bei "a" darstellt und bei allen anderen attributen mal schön untern tisch fallen lässt

21.03.2005, 10:45
nullplan Erfahrener Benutzer Registriert seit: 08.03.2005 Beiträge: 123	so'n assi... dann nimm halt ein anderes attribut.... wie zum Bleistifft <var> oder <cite> .... und ich dachte nur ich hätte das problem cu __________________ Was auch immer, du mich auch!

22.03.2005, 07:25
kid01 Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 642	mm ich glaube, ich verdeutliche mein Problem noch mal http://www.okedoak.de/test/navi.html -> Original http://www.okedoak.de/test/navi1.html -> koomischerweise geht das! Zwar wird die falsche Position angesteuert, aber das kann man ja ändern! http://www.okedoak.de/test/navi2.html -> Sobald ich aber den gesamten Originalbereich auskommentiere, fliegt die Note auch nicht mehr zu meinem neuen Link! __________________ http://www.dhsmedia.de http://www.buecherfuerdasleben.at