Text verfolgt Cursor

jupo22 · 9. Dezember 2002

Hi Leute!

Könntet ihr mir bitte verraten, wie ich es anstelle, dass der Cursor von einem beliebigen Text "verfolgt" wird?
(Die Website wurde in htm geschrieben.)

Vielen Dank im Voraus für euere Hilfe.

Gruß,
jupo22

PS: In der Suche habe ich leider nichts zutreffendes gefunden.

Dario Linsky · 9. Dezember 2002

In der Suche habe ich leider nichts zutreffendes gefunden.

Nicht gleich aufgeben...

Fabian H · 10. Dezember 2002

PHP:

...

<style type="text/css">

#text {
 position: absolute;
 left: 0px;
 top: 0px;
}

</style>

<script language="JavaScript">

function move() {
 document.all.text.style.left = event.x + 5;
 document.all.text.style.top = event.y + 5;
}

</script>

</head>
<body onMouseMove="move()">

<span id="text">Dieser Text folgt der Maus</span>

...

Erklärung:
Die Variablen event.x und event.y werden vom Browser mit den Koordinaten des Mauszeigers belegt (=> sind nicht definierbar!!).

Das Ereignis onMouseMove wird bei jeder Mausbewegung aktiviert und ruft in diesem Fall die Funktion move() auf.
In dieser Funktion wird der Layer des Textes neu positioniert.
Damit dies möglich ist, muss er zuvor per CSS positioniert werden.

ACHTUNG: Nicht bei jedem Ereignis stehen die Variablen event.x und event.y zur Verfügung!

x12x13 · 10. Dezember 2002

so kannst du eine uhr, die immer weiterläuft, einem mauszeiger hinterherwackeln lassen...

PHP:

<SCRIPT language=JavaScript>
dCol='000000';//date colour.
fCol='000000';//face colour.
sCol='000000';//seconds colour.
mCol='000000';//minutes colour.
hCol='000000';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;

//Alter nothing below! Alignments will be lost!

d=new Array("SONNTAG","MONTAG","DIENSTAG","MITTWOCH","DONNERSTAG","FREITAG","SAMSTAG");
m=new Array("JANUAR","FEBRUAR","MÄRZ","APRIL","MAY","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>

Adam Wille · 10. Dezember 2002

@Ton:

Davon hat aber keiner außer den IE-Usern was...

@x12x13:

Was machen User, die als Browser bspw. den NN 6 oder Opera X oder Mozilla X nutzen?

Geist

x12x13 · 10. Dezember 2002

...dann starte ich über php eine abfrage, ob der user den ie verwendet oder nicht. diese abfrage spanne ich dann vor die html seite und leite dann mit einem automatischen redirect auf seite_ie.htm bzw. seite_andere.htm um. jenachdem, wie das ergebnis der php-schleife aussieht.

hatt der user keinen ie, hat er pech gehabt und bekommt die uhr nicht angezeigt.

Thomas Lindner · 10. Dezember 2002

..auch wenn das nicht die Frage beantwortet, aber ich möchte mal die Frage in den Raum stellen:

Möchte ein Besucher überhaupt ein nerviges Anhängsel ( Text/Uhr), das dem Mauszeiger folgt und zumeist Textbereiche überdeckt?

Also, ich verlasse Seiten mit derartigem Spielereien sofort!

x12x13 · 10. Dezember 2002

hi Webcutdirector,

schau dir das hier mal an:
http://www.timesharemagazin.de/

ich empfinde als nicht nervig und die
news, kann ich trotsdem alle sehr
gut lesen. wo liegt das problem ?

Thomas Lindner · 11. Dezember 2002

re

Wie gesagt, das speigelt meine Meinung wieder, und ich mag solche überflüssige Effekthascherei nicht und es soll einige mehr geben, die das nicht mögen.

Zumindest wirkt sowas nicht seriös...

btw. Ein Uhr? die habe ich serienmäßig rechts im Tray liegen!

Aber letztendlich ist es ja deine Entscheidung!

Cu on board

Cutti

x12x13 · 11. Dezember 2002

hast ja recht...

Text verfolgt Cursor

jupo22

Grünschnabel

Dario Linsky

Erfahrenes Mitglied

Fabian H

x12x13

Adam Wille

Erfahrenes Mitglied

x12x13

Thomas Lindner

Erfahrenes Mitglied

x12x13

Thomas Lindner

Erfahrenes Mitglied

x12x13

Neue Beiträge