yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Mausspur

Eine kleine, nette Spielerei ist ein Text, der dem Mauszeiger folgt.

Eine kleine, nette Spielerei ist ein Text, der dem Mauszeiger folgt.
(Demo)

Füge dies in den
Code:
<head>...</head>
-Bereich ein:
Code:
<style>
.spanstyle {
COLOR: ff6633;
FONT-FAMILY: Verdana;
FONT-SIZE: 8pt;
FONT-WEIGHT: bold;
POSITION: absolute;
TOP: -50px;
VISIBILITY: visible
}
</style>
<script language="JavaScript">
<!--
var x, y;
var step = 10;
var flag = 0;

var message = " Hallo wie Gehts "; //Hier den Text
message = message.split("");
var xpos = new Array();
for (i = 0; i <= message.length - 1; i++) {
xpos[i] = -50;
}
var ypos = new Array();
for (i = 0; i <= message.length - 1; i++) {
ypos[i]= -50;
}
function handlerMM(e) {
x = (document.layers) ? e.pageX : document.body.scrollLeft + event.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop + event.clientY;
flag = 1;
}
function makesnake() {
if (flag == 1 && document.all) {
for (i = message.length - 1; i >= 1; i--) {
xpos[i] = xpos[i - 1] + step;
ypos[i] = ypos[i - 1];
}
xpos[0] = x + step;
ypos[0] = y;
for (i = 0; i < message.length - 1; i++) {
var thisspan = eval("span" + (i) + ".style");
thisspan.posLeft = xpos[i];
thisspan.posTop = ypos[i];
}
}
else if (flag==1 && document.layers) {
for (i = message.length - 1; i >= 1; i--) {
xpos[i] = xpos[i - 1] + step;
ypos[i] = ypos[i - 1];
}
xpos[0] = x + step;
ypos[0] = y;
for (i = 0; i < message.length - 1; i++) {
var thisspan = eval("document.span" + i);
thisspan.left = xpos[i];
thisspan.top = ypos[i];
}
}
var timer = setTimeout("makesnake()", 10);
}
-->
</script>
<script language="JavaScript">
<!--
for (i = 0; i <= message.length-1; i++) {
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
-->
</script>


Füge darauf noch in den
Code:
<body>-Tag
folgendes ein:
Code:
onLoad="makesnake()"


In der Zeile, wo auch schon passend steht
Code:
//Hier den Text
kannst du den Text
Code:
Hallo wie Gehts
in den Text deiner Wahl ändern.
Die Textfarbe bzw. den Stil kannst du unter
Code:
COLOR, FONT-FAMILY, FONT-SIZE
und
Code:
FONT-WEIGHT
nach den normalen CSS-Regeln ändern.

Geschrieben von Phil Marx am 18.06.2004 (8324x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren