Bild zu Maus verschieben
5k41
- javascript
0 Anton0 5k410 Der Martin0 5k410 5k41
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
<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
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
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
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!
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);
}
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
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!
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.
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
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
Hey!
Vielen Danke für deine Antwort! Werde ich machen!
MfG
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
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