Seite 1 von 2

Mausverfolger - wie "einbauen"?

Verfasst: 30.10.2007 20:56
von Mr.Guru
Hallo,

ich bin neu im diesen Thema, und habe schon eine Brandheiße frage.
Mein Forum soll ja lustige Gimmiks bekommen, dazu zählen auch Mausverfolger ;)

Nun inderessiere ich mich für diesen Mausverfolger im Javascriptformat:

http://www.kostenlose-javascripts.de/ja ... olger.html

ein Hanf Mausverfolger.

Nun wie baue ich den Mausverfolger so ein, das er überall im PHPBB forum erscheint?

Ich habe PHPBB Plus 1.35 drauf.

Ich hatte mal vor etwas längerem auch ein PHPBB (?Plus?) forum gesehen, wo auch ein Mausverfolger (Alien) da war...

Da ich ein Newbie bin, bitte ich um hilfe, danke. :oops:

Mfg,

Mr.Guru :D

Verfasst: 30.10.2007 21:04
von Jan500
das musst du dann in die overall_header.tpl einfügen ;)

aber ganz ehrlich... es gibt nichts nervigeres als so ein mausgedöns
da hab ich doch lieber nervige hintergrundmusik und augenkrebsfarben :o

Jan

Verfasst: 31.10.2007 10:42
von Mr.Guru
Naja jeder hat seinen eigenen Geschmack... und so ein Gimmik ist mein geschmack :D


So lüstige Hanfblätter was die Maus immer beisuch hat, findet mann heutzutage nicht allemal...

Code: Alles auswählen

<!-- präsentiert von kostenlose-javascripts.de -->
<div id="dot0" style="position: absolute; visibility: hidden; height: 35; width: 35;"></div>
<div id="dot1" style="position: absolute; height: 35; width: 44;"><img src="hanf.gif" width="44" height="35" alt=""></div>
<div id="dot2" style="position: absolute; height: 35; width: 44;"><img src="hanf.gif" width="44" height="35" alt=""></div>
<div id="dot3" style="position: absolute; height: 35; width: 44;"><img src="hanf.gif" width="44" height="35" alt=""></div>
<div id="dot4" style="position: absolute; height: 35; width: 44;"><img src="hanf.gif" width="44" height="35" alt=""></div>
<div id="dot5" style="position: absolute; height: 35; width: 44;"><img src="hanf.gif" width="44" height="35" alt=""></div>
<div id="dot6" style="position: absolute; height: 35; width: 44;"><img src="hanf.gif" width="44" height="35" alt=""></div>
<script type='text/javascript'>
<!--
var nDots = 7;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;

  // fixed time step, no relation to real time
var DELTAT = .01;
  // size of one spring in pixels
var SEGLEN = 10;
  // spring constant, stiffness of springs
var SPRINGK = 10;
  // all the physics is bogus, just picked stuff to
  // make it look okay
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
  // stopping criterea to prevent endless jittering
  // doesn't work when sitting on bottom since floor
  // doesn't push back so acceleration always as big
  // as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 35;
  // BOUNCE is percent of velocity retained when 
  // bouncing off a wall
var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

  // always on for now, could be played with to
  // let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();

function init()
{
    var i = 0;
    for (i = 0; i < nDots; i++) {
        dots[i] = new dot(i);
    }
    
    // set their positions
    for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X + "px";
        dots[i].obj.top = dots[i].Y + "px";
    }
    
    
    if (isNetscape) {
        // start right away since they are positioned
        // at 0, 0
        startanimate();
    } else {
        // let dots sit there for a few seconds
        // since they're hiding on the real bullets
        setTimeout("startanimate()", 20);
    }
}



function dot(i) 
{
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    this.obj = eval("document.getElementById('dot" + i + "').style");
}

document.onmousemove = MoveHandler;

function startanimate() {	
    setInterval("animate()", 20);
}

// just save mouse position for animate() to use
function MoveHandler(e) {

	if (!e) {
		Xpos = window.event.x + document.documentElement.scrollLeft;
		Ypos = window.event.y + document.documentElement.scrollTop;
	} else {
		Xpos = e.pageX;
		Ypos = e.pageY;
	}
}

function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}


function animate() {	
    // dots[0] follows the mouse,
    // though no dot is drawn there
    var start = 0;
    if (followmouse) {
        dots[0].X = Xpos;
        dots[0].Y = Ypos;
        start = 1;
    }
    
    for (i = start ; i < nDots; i++ ) {
        
        var spring = new vec(0, 0);
        if (i > 0) {
            springForce(i-1, i, spring);
        }
        if (i < (nDots - 1)) {
            springForce(i+1, i, spring);
        }
        
        // air resisitance/friction
        var resist = new vec(-dots[i].dx * RESISTANCE,
            -dots[i].dy * RESISTANCE);
        
        // compute new accel, including gravity
        var accel = new vec((spring.X + resist.X)/ MASS,
            (spring.Y + resist.Y)/ MASS + GRAVITY);
        
        // compute new velocity
        dots[i].dx += (DELTAT * accel.X);
        dots[i].dy += (DELTAT * accel.Y);
        
        // stop dead so it doesn't jitter when nearly still
        if (Math.abs(dots[i].dx) < STOPVEL &&
            Math.abs(dots[i].dy) < STOPVEL &&
            Math.abs(accel.X) < STOPACC &&
            Math.abs(accel.Y) < STOPACC) {
            dots[i].dx = 0;
            dots[i].dy = 0;
        }
        
        // move to new position
        dots[i].X += dots[i].dx;
        dots[i].Y += dots[i].dy;

        // get size of window
        var height, width;
        if (isNetscape) {
            height = window.innerHeight + document.scrollTop;
            width = window.innerWidth + document.scrollLeft;
        } else {	
            height = document.body.clientHeight + document.documentElement.scrollTop;
            width = document.body.clientWidth + document.documentElement.scrollLeft;
        }
        
        // bounce of 3 walls (leave ceiling open)
        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }
        
        // move img to new position
        dots[i].obj.left = dots[i].X + "px";
        dots[i].obj.top =  dots[i].Y + "px";
    }
}
//-->
</script>
<br />
<div id="kostenlosejavascripts" align="center"><a href="http://www.kostenlose-javascripts.de/javascripts.html" title="Javascript auf der Homepage" target="_blank">Javascript auf der Homepage</a></div>
<br />
<script type="text/javascript" src="http://www.kostenlose-javascripts.de/startScript.php?id=171"></script>
<!-- präsentiert von kostenlose-javascripts.de -->
einfach so irgendwo einfügen oder was muss ich noch beachten?

Verfasst: 31.10.2007 10:47
von djchrisnet
vorher backup der Datei machen! generell würde ich den code allerdings in eine andere datei einfügen und dann includen, weil es die übersichtichkeit der overall_header.tpl doch sehr zerstört.

Verfasst: 31.10.2007 11:07
von Mr.Guru
Öhm...

Was ist das sogenannte includen? Backup habe ich....
Ich habe den Script einfach hinten an der Datei eingefügt...

Also das so was so Kompliziert sein kann :o :lol: :( :oops: :wink:

Verfasst: 31.10.2007 12:09
von djchrisnet
funktioniert es den auch. Mein vorschlag mit dem includen des java scriptes war rein wegen der Übersicht in der .tpl datei. es vereinfacht später die fehlersuche bei anderen problemen.

Verfasst: 31.10.2007 12:48
von Mr.Guru
Also wo ich den Quellcode in den overall datei eingefügthabe, funzt es nicht.

Das Hanfzeichen ist da, aber es sitzt oben in der Ecke Fest und starr :(

Das mit den Includen weis ich immernochnicht :(


:oops:

Verfasst: 31.10.2007 13:25
von djchrisnet
verlinke die seite doch bitte mal. der link in der signatur ist defekt.

Verfasst: 31.10.2007 18:06
von manuj170793
schreib mal alles, was in dem script steht in eine datei und nenne sie hanf.js.
Danach schreibst du ganz unten in die overall_header.tpl folgendes:

Code: Alles auswählen

<script src="http://deineseite.de/hanf.js" type="text/javascript"></script>
der pfad muss angepasst werden (also http://deineseite.de/hanf.js)
Sowas nennt man includen

Verfasst: 31.10.2007 18:47
von Mr.Guru
ich werd noch heute includen.

Aber ich muss leider durch einen Technischen Datenbankcrash mein Forum neu aufsetzen :(