HTML Grundkurs

Grundaufbau

  • Notwendigkeiten
  • Aufbau
  • Der Head
  • Der Body
  • Schrift
  • Links
  • Textpositionierung
  • Tabellen
  • Formulare
  • Bilder und Töne

    Zusätzliches

  • Spezielles Text
  • Spezielles Bilder
  • Gästebuch & Co.
  • Besucher nerven

    Hilfen

  • Uploaden
  • Hilfen
  • Verfolgte Maus

    Das Script wird gleich nach dem <BODY>-Tag eingefügt. Da es in unsichtbaren Kommentarklammern steht, wird es nicht angezeigt. Wir müssen nun nur noch bei 'var path' unsere Grafik nennen und evtl. bei 'var trailLenghth' die Anzahl der verfolgenden Grafiken nennen.
    Achtung: Eine verfolgende Grafik sollte möglichst klein sein, da sie sonst ziemlich lange braucht, um die Maus zu verfolgen. Ausserdem sollte der Hintergund der Grafik transparent sein.

    Hinweis: Dieses Script funktioniert nur im IE!

    Das wollen wir erreichen:
    Die Maus soll von folgender Grafik ('sterne.gif') verfolgt werden: sterne.gif

    Tag:
    <script language="JavaScript1.2">
    <!--
    var trailLength = 10
    var path = "sterne.gif"

    var isIE = false,isNav = false,range = "all.",style = ".style",i,d = 0
    var topPix = ".pixelTop",leftPix = ".pixelLeft",images,storage
    if (document.layers) {
    isNav = true,range = "layers.",style = "",topPix = ".top",leftPix = ".left"
    } else if (document.all) {
    isIE = true
    }
    function initTrail() {
    images = new Array()
    for (i = 0; i < parseInt(trailLength); i++) {
    images[i] = new Image()
    images[i].src = path
    }
    storage = new Array()
    for (i = 0; i < images.length*3; i++) {
    storage[i] = 0
    } for (i = 0; i < images.length; i++) {
    (isIE) ? document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>') : document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + images[i].src + '"></layer>')
    }
    trail()
    }
    function trail() {
    for (i = 0; i < images.length; i++) {
    eval("document." + range + "obj" + i + style + topPix + "=" + storage[d])
    eval("document." + range + "obj" + i + style + leftPix + "=" + storage[d+1])
    d = d+2
    }
    for (i = storage.length; i >= 2; i--) {
    storage[i] = storage[i-2]
    }
    d = 0
    var timer = setTimeout("trail()",10)
    }
    function processEvent(e) {
    if (isIE) {
    storage[0] = window.event.y+document.body.scrollTop+10
    storage[1] = window.event.x+document.body.scrollLeft+10
    } else {
    storage[0] = e.pageY+12
    storage[1] = e.pageX+12
    }
    }
    if (isNav) {
    document.captureEvents(Event.MOUSEMOVE)
    }
    if (isIE || isNav) {
    initTrail()
    document.onmousemove = processEvent
    }
    //-->
    </script>

    So sieht es aus:
    Guck mal die Maus an! ;-)

    wieder hoch
     
    erstellt von Nicole Wellinger -