✔ Mousezeiger-Image

[Sven Mintel]

<ot>
Zu meiner Schulzeit gab es auch keine Glättungsfunktionen....was ist das?
Da fällt mir ein...ich muss noch Glätten ...ääh Plätten :suspekt:
</ot>

 

[con-f-use]

Mhribernik, du hast recht: Die einzige (wirkliche) Änderung, gehört in das Zeilenpaar.

Hmm, weiß wohl doch nicht jeder was eine Glättungsfunktion ist. Tut mir leid, Leute, lag ich wohl falsch. Also wir hatten Glättungsfunktionen in der 8. Klasse im Gymnasium - aber war auch ein bayrisches. Haben wir wohl doch was gelernt.

Wie auch immer, bin kein Mathematiker aber ich würde es mal als eine Funktion von einem Wert definieren, die sich mit jedem Schritt näher diesen Wert asymptotisch annähert.

Mit anderen Worten, das ist eine Glättungsfunktion:

<img id="mousepic" src="bild.gif" style="position:absolute;top:0px;left:0px" />
 
 <script type="text/javascript"><!--
 
 	var pic=document.getElementById('mousepic'), x, y, oldx=0, oldy=0;
 
 	document.onmousemove = mouse; 
 	setInterval('placePic()',100);
 
 	function mouse(e){
 		x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
 		y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
 	}
 	
 	function placePic() {
 		if(!!pic) {
 			pic.style.left = Math.round( oldx += .6 * (x-oldx) ) + "px"; 
 			pic.style.top = Math.round( oldy += .6 * (y-oldy) ) + "px";
 		}
 	}
 
 //--></script>

P.S.
Bei ein paar Testläufen hat's im Mozilla erst funktioniert, als ich auf reload gelickt habe (obwohl der Cache leer war) und im IE kam mal ne Fehlermeldung von wegen "ungültiges Argument", die dann ebenfalls nach Reload wieder verschwand. Kann ich mir erklären - im Script sollte doch eigentlich nichts sein, was das verursachen könnte.

 

[mhribernik]

Danke dir.
Bei mir funktioniert das Script überhaupt nicht. Das bild ist wieder in der oberen linken Ecke und bewegt sich nicht: http://mhribernik.mh.funpic.de/b.php
Dieses Ergebniss liefert der IE, Firefox, Opera.

Woran liegt das?

 

[con-f-use]

Ändere mal die erste Zeile des Scripts in

var pic=document.getElementById('mousepic'), x=y=oldx=oldy=0;

vielleicht geht's dann. Sonst haben nämlich x und y am Anfang keinen Wert.

http://confus.co.funpic.de/_data/tut/mousefollow.html

 

[mhribernik]

Ja es klappt wunderbar!
Danke dir!

Eine Kleinigkeit noch: Nun hat das Probleme mit +"px" am Ende des Scripts. Das Bild wird meilenweit weggeschleudert, falls sich der Curser in Richtung unten-rechts bewegt.

Irgendwas ist da noch.

 

[mhribernik]

Oh, mein Fehler. Dummer, dummer Fehler.
Hab versehentlich noch ein " bei der Zeile von x zuviel eingebaut.

Fehler behoben!

Danke dir nun ist es wirklich perfekt!
mfg. Marko

 

[mhribernik]

Da währe doch noch etwas:

Wie kann ich es nun machen, das sich zwei Bilder hinterher bewegen?
Ich hab schon so ein bißchen herumprobiert, doch es ist nix brauchbares rausgekommen.

Kannst du mir sagen wie das funktioniert?

 

[con-f-use]

Du die Bilder in ein <div>, gibt dem <div> an Stelle der Bilder die id="mousepic" und die Style-Angabe position:absolute;top:0px;left:0px; und fertig.

Und zur Vorbeugung bitte hier mal reinschauen: http://www.tutorials.de/forum/showpost.php?p=1122340&postcount=2

 

[mhribernik]

Das mit dem Div Tag wäre nicht so toll, denn ich will beim Zweiten Bild einen größeren Abstand zum Mousezeiger und mit anderer Werten im Bereich:

pic.style.left = Math.round( oldx += .6 * (x-oldx) ) + "px"; 
pic.style.top = Math.round( oldy += .6 * (y-oldy) ) + "px";

Geht das denn?

 

[con-f-use]

Wo ist denn das Problem, du kannst das Bild doch innerhalb des Layers nochmal postionieren, so hat es dann auch einen anderen Abstand? Und was die Geschwindigkeit des Folgens angeht: Wieso willst du die unbedingt änder?