5k41: Bild zu Maus verschieben

Hallo!
Ich wollte mir (nachdem ich über das Wochenende Javascript sowie Css per Tutorials gelernt habe) mal ein kleines Programm schreiben, welches ein Bild an die Stelle der Mauskoordinaten setzt, doch nun scheitere ich schon daran eine Funktion bei onMoveMouse aufzurufen... was ist daran falsch?

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lalala!</title>
<script language="JavaScript" src="./test.js"></script>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>

<body onMouseMove="javascript:setimagetomouse();">
 <img class="image" src="bild.jpg" alt="Mein tolles Bild!"></img>
</body>
</html>

Javascript:
// JavaScript Document
function setimagetomouse()
{
 image.top      = event.pageY+"px";
 image.left     = event.pageX+"px";
 alert("AUfruf!");
 return(0);
}

CSS:
img.image
{
 padding        : 10px;
 border-style   : solid;
 position       : absolute;
 top            : 100px;
 left           : 200px;
}

MfG
5k41

  1. <img class="image" src="bild.jpg" alt="Mein tolles Bild!"></img>

    Ich koennte mich irren, aber du brauchst noch eine id="image", über class kannst du kein element verändern.

    Ansonsten noch document.getElementById("image").top... (insofern top funktioniert)

    Gruß

    Anton

  2. Hallo!
    Das kann schon sein! (Wenn das wirklich so ist wieso?) Aber mein Hauptproblem im moment ist, dass nicht mal das alert("Aufruf") angezeigt wird!

    MfG
    5k41

    1. Hallo,

      Das kann schon sein! (Wenn das wirklich so ist wieso?) Aber mein Hauptproblem im moment ist, dass nicht mal das alert("Aufruf") angezeigt wird!

      Führst du Selbstgespräche?

      <img class="image" src="bild.jpg" alt="Mein tolles Bild!"></img>

      Damit könnten manche Browser Probleme haben. Um sicherzugehen, solltest du lieber die Notation mit ".../>" anstatt einem separaten schließenden Tag verwenden.

      Javascript:
      // JavaScript Document
      function setimagetomouse()
      {
      image.top      = event.pageY+"px";
      image.left     = event.pageX+"px";
      alert("AUfruf!");
      return(0);
      }

      Dein Script kennt kein Objekt mit dem Namen 'image'. Deshalb muss es schon in der ersten Zeile mit einer Fehlermeldung abbrechen, die du uns hier aber verschweigst.

      Bevor du die Eigenschaften des Bildes per JS setzen kannst, musst du erstmal eine Referenz darauf haben. Am einfachsten ist das, wenn du dem Bild eine ID gibst und dann mit document.getElementbyId() die Referenz ermittelst.

      So long,
       Martin

      --
      Lieber blau machen, als sich schwarz ärgern.
      1. Hi!
        Nein ich führe keine selbstgespräche, habe aber das prinzip von dem Forum noch nicht ganz verstanden :D .
        Das mit dem Objekt hab ich so noch garnicht gesehen... glaube ich bringe langsam alles durcheinander... werde es sofort ändern

        Mfg
        5k41

        P.S.: Es gab KEINE Fehlermeldung!

        1. Hi!
          So nun führ ich selbstgespräche ;-)
          Habe es grade so geändert, wie ich das verstanden habe, nur leider Funktioniert es immer noch nicht!

          MfG

          Javascript:
          // JavaScript Document
          function setimagetomouse()
          {
           var e=getElementById("image")
           e.style.top      = event.pageY+"px";
           e.style.left     = event.pageX+"px";
           alert("AUfruf!");
           return(0);
          }

          1. Hallo,

            So nun führ ich selbstgespräche ;-)

            :-D

            // JavaScript Document
            function setimagetomouse()
            {
            var e=getElementById("image")

            Hat denn dein Bild auch die ID "image" bekommen? Falls nein, liefert getElementById() nämlich null, und die folgende Zeile

            e.style.top      = event.pageY+"px";

            erzeugt eine Fehlermeldung. Und doch, da wurden definitiv Fehlermeldungen ausgeworfen! Die Javascript-Konsole dürfte etliche auflisten! Auf solche möglichen Stolpersteine solltest du auf jeden Fall eingehen, indem du die Werte, die du weiterverwenden willst, auf Gültigkeit prüfst. Wenn du es richtig ordentlich machen willst, solltest du außerdem noch abfragen, ob die Methode getElementById überhaupt existiert - in älteren Browsern ist das nicht selbstverständlich.

            function setimagetomouse(event)
              { var e;

            if (!document.getElementById)           // existiert die Methode?
                 { alert("Methode nicht verfügbar.");   // nö, Fehler melden
                   return;                              // und fertig
                 }
                if (e=document.getElementById("image")) // Objektreferenz gültig?
                 { e.style.top  = event.pageY+"px";     // ja, top und
                   e.style.left = event.pageX+"px";     // left neu setzen
                 }
                alert("Alles OK.");                     // ein bisschen prahlen
                return;                                 // und auch fertig.
              }

            So, und dann achte in Zukunft auch mal ein bisschen auf die Informationen, die dein Browser dir gibt. Welchen benutzt du überhaupt zum Testen?

            Ciao,
             Martin

            --
            Ein guter Lehrer muss seinen Schülern beibringen können,
            eine Frage so zu stellen, dass auch der Lehrer lernen muss,
            um die Frage beantworten zu können.
              (Hesiod, griech. Philosoph, um 700 v.Chr.)
            1. Hi!
              Vielen Dank für die Guten Tipps! Ich benutze Mozilla Firefox zum testen und bekomme definitiv keine Fehlermeldung. Wieso übergibts du der Funktion noch den wert "event"? Ist der nicht standart? Habe den nämlich nie übergeben.

              MfG

              P.S.: Es geht nun VIELEN DANK!

              1. Hi 5k41,

                Vielen Dank für die Guten Tipps! Ich benutze Mozilla Firefox zum testen und bekomme definitiv keine Fehlermeldung.

                Ich glaube du weiß lediglich nicht, wo die Fehlermeldungen stehen ;-) Der Firefox zeigt im Gegensatz zu dem Internet Explorer nicht für jede Fehlermeldung eine Nachrichten-Box an, um die Javascript Fehler im Firefox zu sehen musst du auf Extras -> Javascript-Konsole klicken.

                MfG, Dennis.

                --
                Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:| mo:} zu:|
                Patch zur Verwendung von PATHINFO in JLog
                Wenn Sie einen Schweizer Bankier aus dem Fenster springen sehen, springen Sie hinterher. Es gibt bestimmt etwas zu verdienen. (Voltaire)
                1. Vielen Dank!
                  Ich hab sofort einen weiteren Fehler beheben können ;-)
                  Habe nun das ziel eine Leiste (ähnlich dem Startmenü von windows) mit unterpunkten zu machen! Das ist nicht das Problem, sondern eher, dass die Leiste nicht einfach da sein soll, sondern langsam aus dem vorherigen Button herrausgefahren werden soll! Muss ich da wirklich für jeden Button eine eigene CSS ID machen? Wenn ja, hat vielleicht noch jemand eine Idee wie man soetwas verwalten kann?

                  MfG
                  5k41

              2. Hi

                Wieso übergibts du der Funktion noch den wert "event"? Ist der nicht standart? Habe den nämlich nie übergeben.

                Bei manchen Browsern wird das letzte Event im Objekt window.event übertragen, bei manchen als Argument übergeben. Versuch am besten folgendes:

                function irgendwas(e)  
                {  
                 if(!e)  
                  var e = window.event;  
                 machwas();  
                }
                

                mfg
                Genie

                1. Hey!
                  Vielen Danke für deine Antwort! Werde ich machen!

                  MfG

            2. Hallo Martin.

              var e=getElementById("image")

              Hat denn dein Bild auch die ID "image" bekommen? Falls nein, liefert getElementById() nämlich null, […]

              Die Methode window.getElementById() dürfte generell undeklariert sein, kann daher auch nicht null zurück geben.

              Einen schönen Sonntag noch.

              Gruß, Ashura

              --
              sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
              „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
              [HTML Design Constraints: Logical Markup]
              1. Hallo Ashura,

                var e=getElementById("image")
                Hat denn dein Bild auch die ID "image" bekommen? Falls nein, liefert getElementById() nämlich null, […]

                Die Methode window.getElementById() dürfte generell undeklariert sein, kann daher auch nicht null zurück geben.

                Potzblitz. Wo er recht hat ...
                Diese Kleinigkeit ist mir gar nicht aufgefallen. Aber das ist ja das Schöne, dass hier unzählige Augen mitlesen. Irgendwer wird's schon merken. :-)

                Schönen Abend noch,
                 Martin

                --
                Küssen ist die schönste Methode, eine Frau zum Schweigen zu bringen.