Mausspur


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

Eine kleine, nette Spielerei ist ein Text, der dem Mauszeiger folgt.
(Demo (http://www.yubb.de/demos/js_12.html))

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 (6184x gelesen)
Diese News stammt von der Seite http://www.yubb.de
Sie ist unter http://www.yubb.de/artikel286.html direkt aufrufbar.

Jegliche Reproduktion dieser Seite oder ihrer Inhalte ist strengstens untersagt.