✔ Mousezeiger-Image

mhribernik

mhribernik

Erfahrenes Mitglied
Hallo.

Mich würde interessieren, ob man es machen kann, dass zwei kleine Bilder der Mouse folgen?
Wenn ja, wie? Könntet ihr mir den Code netterweise posten?
Danke im Voraus.
 
Zuletzt bearbeitet:
HTML: 
<img id="mousepic" src="bild.gif" style="position:absolute" />
HTML: 
<script type="text/javascript"><!--
    
    var pic = document.getElementById('mousepic');
    
    document.onmousemove = placePic;
    
    function placePic(e) {
    	var x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX,
    	    	 y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
    	if (!!pic) {
    		pic.style.left = (x + 20) + "px";
    		pic.style.top = (y + 20) + "px";
    	}
    }
    
    //--></script>
 
Zuletzt bearbeitet:
Danke für dein Antwort.
Das Bild, das sich eigentlich hinter der Mouse herbewegen sollte, sitzt fest in der oberen linken Ecke. Was mache ich falsch?

Hier könnt ihr euch das ansehen: Klick
 
document.getElementById('mousepic'); wird ausgeführt, bevor ein Element mit dieser Id geladen ist => undefined

Du musst das gesammt Script hinter das Image schreiben.
 
Ja, klappt wunderbar, danke dir!

Nun hätte ich noch eine Frage, kann man es machen, dass das Bild der Mouse etwas weicher folgt? Also, dass wenn man die Mouse schnell wegzieht, das Bild nicht sofort mitfolgt, sondern erst "resgieren" muss?

Zb. http://www.maria-rain.at/ ist sowas ähnliches. (Funktioniert mit Firefox nicht)
 
Hier der Quelltext dieser komischen Uhr aur http://www.maria-rain.at

Wie kann ich das auf mein Bild beziehen?

HTML: 
<SCRIPT type=text/javascript>
<!-- Silly Clock 3 by Kurt Grigg http://website.lineone.net/~kurt.grigg/javascript

/* NUR HIER AENDERUNGEN VORNEHMEN UND ANPASSEN */

dCol='000000';       // Farbe des Datums
fCol='000000';       // Farbe der Ziffern
sCol='00cc00';       // Farbe des Sekunderzeigers
mCol='0000cc';       // Farbe des Minutenzeigers
hCol='cc0000';       // Farbe des Stundenzeigers
ClockHeight=40;      // Hoehe der Uhr
ClockWidth=40;       // Breite der Uhr
ClockFromMouseY=50;  // Senkrechte Entfernung vom Mauszeiger
ClockFromMouseX=50;  // Waagrechte Entfernung vom Mauszeiger


/* AB HIER BITTE NICHTS AENDERN */

d=new Array("SONNTAG","MONTAG","DIENSTAG","MITTWOCH","DONNERSTAG","FREITAG","SAMSTAG");
m=new Array("JANUAR","FEBRUAR","MÄRZ","APRIL","MAI","JUNI","JULI","AUGUST","SEPTEMBER","OKTOBER","NOVEMBER","DEZEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'<\/font><\/center><\/layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'<\/font><\/center><\/layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'<\/b><\/center><\/font><\/layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'<\/b><\/center><\/font><\/layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'<\/b><\/center><\/font><\/layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'<\/B><\/font><\/div>');
document.write('<\/div><\/div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'<\/B><\/font><\/div>');
document.write('<\/div><\/div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'<\/div>');
document.write('<\/div><\/div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'<\/div>');
document.write('<\/div><\/div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'<\/div>');
document.write('<\/div><\/div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
 var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
 F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
 F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
 }
for (i=0; i < H.length; i++){
 var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
 HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
 HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
 }
for (i=0; i < M.length; i++){
 var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
 ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
 ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
 }
for (i=0; i < S.length; i++){
 var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
 SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
 SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
 }
for (i=0; i < D.length; i++){
 var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
 DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
 DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
 }
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
//-->
</SCRIPT>
<!-- Das Analoguhr-Script endet hier -->
<SCRIPT language=JavaScript>
 
Wie wäre es mit einer einfachen Glättungsfunktion statt der direkten zuweisung der/ Koordinaten? Bisschen selber denken, du musst nur minmal etwas verändern.
 
Zuletzt bearbeitet:
Ich würde gerne selber denken, nicht dass ich kein Hirn hab oder so, doch ich kenn mich mit Javascript noch fast garnicht aus. Ich hab mir vor einigen Tagen ein Buch darüber gekauft. Beim Tutorial-Suchen binn ich in einem Flash Forum auf die sache mit dem Mousezeiger-Bild gestoßen.

Könntest du mir den Code bitte posten? Das wäre sehr nett.
Danke im Voraus,
mfg. Marko
 
Du wirst doch wohl da noch eine Glättungsfunktion einbauen können. Dafür muss man nur zur Schule gegangen sein und braucht kaum JavaScript-Wissen.

Wenn du wirklich keinen Plan hast, kannst du dich nochmal melden, aber versuch's doch bitte erstmal selber.
 
Zuletzt bearbeitet:
Nein, leider.
Ich glaub es muss in den Zeilen:
HTML: 
pic.style.left = (x + 20) + "px";
pic.style.top = (y + 20) + "px";
was geändert werden?

Lieg ich da richtig? In welche Schule bist du denn gegangen? :p
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück