Onclick in externer Datei

[striker]

Hallo,
ich möchte auf meiner Homepage einen Onclick-Effelt einbauen. Diesen möchte ich genre ich ein externes Dokument schreiben, so wie ich das schon mit einem Onmouseover-Effekt gemacht habe.
Die Javascriptdatei(in die der Onclick scrip auch rein soll) sieht momenatn so aus:

  
  
function moImage(hElement, sImagePath)  
{  
        this.element = hElement;  
        this.overImage = new Image();  
        this.overImage.src = sImagePath;  
        this.outImage = new Image();  
        this.outImage.src = hElement.src;  
        var tmp = this;  
        this.element.onmouseover = function()  
        {  
                this.src = tmp.overImage.src;  
        }  
        this.element.onmouseout = function()  
        {  
                this.src = tmp.outImage.src;  
        }  
        this.element.onload = null;  
  
}  

Im Quelltext wird der dann so geladen:
Code:

<script type="text/javascript" src="mouseover.js"></script>

So hab ich dann dass im body-bereich eingefügt:
Code:

<a href=index.html><img src="images/linklistehome.png" onload="new moImage(this, 'images/linklistehome2.png')" border="0" /></a>  

Jetz möchte ich auf diese weise einen Onclick-Effekt einfügen, also wenn ich auf einen Bildlink klicke, dass ein anderes bild angezeigt wird, welches von mir erstellt wurde.
Kann mir da einer einen passenden Skript geben, der genau dies ausführt??
wäre super=)
also dass der script auch in die datei onmouseover.js kommt, oben im Head-Bereich geladen wird und nur mit einem code angewendet wird??
Danke im Vorraus

[Felix Riesterer]

Lieber striker,

benutze mal Dein Hirn etwas mehr. Du schreibst, was Du bereits hast:

function moImage(hElement, sImagePath) {[...]}
[...]
<script type="text/javascript" src="mouseover.js"></script>
[...]
<img src="images/linklistehome.png" onload="new moImage(this, 'images/linklistehome2.png')" border="0" />

Und jetzt willtst Du auch noch onclick dazu? Na, dann mach das doch! Was ist so schwer daran, das obige zu kopieren und "onload" durch "onclick" zu ersetzen (den Funktionsnamen natürlich auch anpassen)?

Liebe Grüße,

Felix Riesterer.

[striker]

Lieber striker,

benutze mal Dein Hirn etwas mehr. Du schreibst, was Du bereits hast:

function moImage(hElement, sImagePath) {[...]}
[...]
<script type="text/javascript" src="mouseover.js"></script>
[...]
<img src="images/linklistehome.png" onload="new moImage(this, 'images/linklistehome2.png')" border="0" />

Und jetzt willtst Du auch noch onclick dazu? Na, dann mach das doch! Was ist so schwer daran, das obige zu kopieren und "onload" durch "onclick" zu ersetzen (den Funktionsnamen natürlich auch anpassen)?

Liebe Grüße,

Felix Riesterer.

Halt mal die Luft an okee.
ich bin weis gott nunmal kein Javascript experte! wieso gibt es das forum hier? damit man alles schon perfekt kann und keine fragen hat?
was weiss ich was ich ersetzen muss und was nicht, ich bin 14 entschuldigung.

Danke trotzdem für deine Hilfe

[striker]

Ich habe s versucht und habs nicht hinbekommen, da ich fast keine kenntnisse in javascript habe:(
wäre lieb wenn mir jmd. die vollständigen scripts geben könnte.
ich wäre wirklich sher dankbar

[Felix Riesterer]

Lieber striker,

Ich habe s versucht und habs nicht hinbekommen, da ich fast keine kenntnisse in javascript habe:(

na, dann rück doch mal raus, was Du bisher hast!

wäre lieb wenn mir jmd. die vollständigen scripts geben könnte.

Ist hier nicht üblich. Hier wird gelernt. Normalerweise.

ich wäre wirklich sher dankbar

Klar.

Liebe Grüße,

Felix Riesterer.

[striker]

Hallo,
ja ok ich zeigs dir mal:
Das war ja der ursprüngliche script für den onmouseover:

  
function moImage(hElement, sImagePath)  
{  
        this.element = hElement;  
        this.overImage = new Image();  
        this.overImage.src = sImagePath;  
        this.outImage = new Image();  
        this.outImage.src = hElement.src;  
        var tmp = this;  
        this.element.onmouseover = function()  
        {  
                this.src = tmp.overImage.src;  
        }  
        this.element.onmouseout = function()  
        {  
                this.src = tmp.outImage.src;  
        }  
        this.element.onload = null;  
  
}  

Du hast gesagt ich soll es mit onClick ersetzen:

  
function moImage(hElement, sImagePath)  
{  
        this.element = hElement;  
        this.overImage = new Image();  
        this.overImage.src = sImagePath;  
        this.outImage = new Image();  
        this.outImage.src = hElement.src;  
        var tmp = this;  
        this.element.onClick = function()  
        {  
                this.src = tmp.overImage.src;  
        }  
        this.element.onmouseout = function()  
        {  
                this.src = tmp.outImage.src;  
        }  
        this.element.onload = null;  
  
}  

Sonst hab ich nixx gefunden!
Im quelltext sieht das dann so aus:

  
<a href=index.html><img src="images/linklistehome.png" onClick="new moImage(this, 'images/linklistehome3.png')" border="0" /></a>  

Bin mir sicher dass da was fehlt, komm aber nicht drauf was, weil ich wie schon gesagt nicht wirklich ahnung von Javascript habe:(

[Struppi]

this.element.onClick = function()
        this.element.onmouseout = function()
        this.element.onload = null;

Fällt dir was auf?

Struppi.

[striker]

this.element.onClick = function()
        this.element.onmouseout = function()
        this.element.onload = null;

Fällt dir was auf?

Struppi.

Ja natürlich fällt mir was auf, aber ich hab kp was ich machen soll!

[Struppi]

Ja natürlich fällt mir was auf, aber ich hab kp was ich machen soll!

Naja, das was dir auffällt musst du ändern.

Struppi.

[striker]

Ja natürlich fällt mir was auf, aber ich hab kp was ich machen soll!

Naja, das was dir auffällt musst du ändern.

Struppi.

this.element.onClick = function()
        this.element.onmouseout = function()
        this.element.onload = null;

was meinst du genau??
was mit aufgefallen ist ist halt der onmouseout?!
Was soll ich nun ändern?
Ihr seid hier echt total hilfreich mit euren beiträgen...
Kostruktive Hilfe ist jedoch sehr gern gesehen

[Struppi]

this.element.onClick = function()
        this.element.onmouseout = function()
        this.element.onload = null;

was meinst du genau??

Schau doch mal auf die Schreibweise der drei Events. In dem einen, der Probleme bereitet, ist etwas anders, als in den anderen, die funktionieren.

was mit aufgefallen ist ist halt der onmouseout?!

Was?

Ihr seid hier echt total hilfreich mit euren beiträgen...

Naja, ein bisschen mitdenken solltest du schon.

Struppi.

[striker]

this.element.onClick = function()
        this.element.onmouseout = function()
        this.element.onload = null;

was meinst du genau??

Schau doch mal auf die Schreibweise der drei Events. In dem einen, der Probleme bereitet, ist etwas anders, als in den anderen, die funktionieren.

was mit aufgefallen ist ist halt der onmouseout?!

Was?

Ihr seid hier echt total hilfreich mit euren beiträgen...

Naja, ein bisschen mitdenken solltest du schon.

Struppi.

Hallo,
meinst du dass da:
this.element.onload = null;
es hat einen wert am schluss, und keine funktion...ist das der Fehler?
Natürlich denke ich mit, aber ich hab halt leider fast keine ahnung von javascript, somit kan ich mit deinen nett gemeinten hilfestellungen wenig anfangen...

[Struppi]

Struppi.

Du musst nicht alles zitieren, nur das worauf du antwortest.

meinst du dass da:
this.element.onload = null;

Nein, ist das der Event der nicht funktioniert.

Natürlich denke ich mit, aber ich hab halt leider fast keine ahnung von javascript, somit kan ich mit deinen nett gemeinten hilfestellungen wenig anfangen...

Naja, den Unterschied zwischen Groß- und Kleinschriebung kennst du aber im Prinzip? Javascript auch.

Struppi.

[striker]

Naja, den Unterschied zwischen Groß- und Kleinschriebung kennst du aber im Prinzip? Javascript auch.

Ja den kenne ich, es schreiben aber viel Online nur klein
Wieso unterhalten wir uns eig. über so nen Quatsch? Ich brauch ne Lösung für ein Problem, du kannst es mir geben, hast keine Lust dazu, wo ist der Sinn??

Nein, ist das der Event der nicht funktioniert.

Ich versteh nicht ganz was du meinst, entweder da fehlt ein Fragezeichen bei dir oder ich erkenn den Sinn des Satzes nicht?!

[Struppi]

Naja, den Unterschied zwischen Groß- und Kleinschriebung kennst du aber im Prinzip? Javascript auch.
Ja den kenne ich, es schreiben aber viel Online nur klein
Wieso unterhalten wir uns eig. über so nen Quatsch? Ich brauch ne Lösung für ein Problem, du kannst es mir geben, hast keine Lust dazu, wo ist der Sinn??

Mann, tut mir wirklich leid, aber bist du so blöd oder tust du nur so?

this.element.onClick = function()
        this.element.onmouseout = function()
        this.element.onload = null;

Einer der drei Events funktioniert nicht, welcher?
was ist dort der Unterschied zu den anderen?

Nein, ist das der Event der nicht funktioniert.
Ich versteh nicht ganz was du meinst, entweder da fehlt ein Fragezeichen bei dir oder ich erkenn den Sinn des Satzes nicht?!

Nein, Da fehlt ein Ausrufezeichen.

Struppi.

[striker]

Muss  ich mich von dir beleidigen lassn?
Was weiß ich welcher der drei events nicht funktioniert, kenn ich mich in javascript aus oder du?
Wofür gibt es dieses forum hier?
Um einen zu beleidigen oder zu helfen?
Wenn dus weißt dann erklär es bitte damit ich weis was daran falsch ist.
Wenn du meinst mich als Blöd bezeichnen zu müssen viel spaß.

Wenn ich deinen staz über groß- und kleinschreibung nicht auf meinen
scjreibstil sondern auf meinen script beziehe, kann es dann sein dass es mit der großschreibung des C in onClick zu tun hat??
Also dieses hier? this.element.onClick = function(
Sollte es dann so heißen? this.element.onclick = function(

sonst hab ich echt keine idee was du meinen könntest

[Struppi]

Also dieses hier? this.element.onClick = function(
Sollte es dann so heißen? this.element.onclick = function(

sonst hab ich echt keine idee was du meinen könntest

Genau das meine ich.

Struppi.

[striker]

Also dieses hier? this.element.onClick = function(
Sollte es dann so heißen? this.element.onclick = function(

sonst hab ich echt keine idee was du meinen könntest

Genau das meine ich.

Struppi.

Und ohne das großgeschriebene funktioniert es dann??
Theoretisch muss ich es dann hier ja auch äkleinschreiben oder?
<img src="images/linklistehome.png" onClick="new moImage(this, 'images/linklistehome2.png')" border="0" />
Also dann so:
<img src="images/linklistehome.png" onclick="new moImage(this, 'images/linklistehome2.png')" border="0" />

Ich habe das onclick gro geschrieben, weil es in einem anderen forum(weiß ezz net genau wo) gestanden hat, man soll onClick schreiben._.

[striker]

Jetzt muss ich ja noch den funktionsnamen ändern oder??
mom. heißt der ja soo:
function moImage(hElement, sImagePath)

wie soll ich denn dann nennen? weil wenn ich den mit der bezeichnung in mein onmouseover.js integriere, greift der onmouseover-effekt ja wieder auf die eigentliche onclick datei zu, und würde deshalb nicht funktionieren.
wie muss ich das also verändern?

Danke schonmal an struppi für seine geduld xD

[striker]

Gut habs soweit jetzt=)

So sieht jetzt der script aus:

function momImage(hElement, sImagePath)  
{  
        this.element = hElement;  
        this.overImage = new Image();  
        this.overImage.src = sImagePath;  
        this.outImage = new Image();  
        this.outImage.src = hElement.src;  
        var tmp = this;  
        this.element.onclick = function()  
        {  
                this.src = tmp.overImage.src;  
        }  
        this.element.onmouseout = function()  
        {  
                this.src = tmp.outImage.src;  
        }  
        this.element.onload = null;  
  
}  

so wird er im quelltext angewendet;

  
<img src="images/linklistehome.png" onload="new moImage(this, 'images/linklistehome2.png')" onclick="momImage (this, 'images/linklistehome.png')" border="0" />  

Jetzt wird ja noch der alte funktionsname verwendet/also der vom onmouseover) und es funktioniert so ja nicht.
Wie muss ich den Funktonsnamen jetzt abändern, damit alles funktioniert?

[striker]

hab ausversehen einen post überlesen, tut mir leid!

[striker]

So habs nun so gemacht wiebeschrieben, klappt aber noch nicht ganz.(
so siht also jetzt nochma der script aus:
function klickBild(el, src) {
    el.src = src;
}
        this.element = hElement;
        this.overImage = new Image();
        this.overImage.src = sImagePath;
        this.outImage = new Image();
        this.outImage.src = hElement.src;
        var tmp = this;
        this.element.onclick = function()
        {
                this.src = tmp.overImage.src;
        }
        this.element.onmouseout = function()
        {
                this.src = tmp.outImage.src;
        }
        this.element.onload = null;

}

so im quelltext angewendet:
<a href=index.html><img src="images/linklistehome.png" onload="new moImage(this, 'images/linklistehome2.png')" onclick="klickBild(this, 'images/linklistehome3.png')"  /></a>

wenn ich das jetzt so speicher und öffne, wird weder der onmouseover noc der onclick angezeigt, sondern nur das bild...
wieso?

[Felix Riesterer]

Lieber striker,

wieso?

was sagt die JavaScript-Fehlerkonsole Deines Browsers? Und was sagt Dir Dein Verstand? Hast Du die verschiedenen Posts nicht nur ge-copy&pasted, sondern auch zu begreifen versucht?

Es hat einfach keinen Sinn, hier nur nach fertigen Script-Schnipseln zu fragen. Du musst verstehen was Du tust. Und dabei wird Dir hier gerne geholfen. Man glaubt hier an Hilfe zur Selbsthilfe. Also hilf Dir selbst! Das geht schon mit 14 Lenzen, denn schon da hat man diese unglaubliche Waffe, die allgemeinhin als "Verstand" bezeichnet wird...

Liebe Grüße,

Felix Riesterer.

[striker]

Ja ich habe sie zu verstehen versucht. Soweit alles gut.
Ich finde den fehler auch nach mehrmaligem überprüfen nicht.
Selbsthilfe ist ja schön und gut, man sollte jedoch ein funktionierendes beispiel haben um etwas lenern zu können. wenn man nicht weiß wie was geht braucht man auch nicht nach fehlern suchen, sondern frägt leute die das können nach hilfe, bekommt es von diesen gezeigt, und lernt danah asu seinen fehlern, nur wenn man nicht weis wo der fehler ist kann man nicht daraus lernen...
PS:
der onmouseover effekt ist von einer internetseite, den hab ich also auch nicht selbst geschrieben, aber ich habe ihn mir danach angeschaut und meine ihn verstanden zu haben...

[Der Martin]

Hallo,

Selbsthilfe ist ja schön und gut, man sollte jedoch ein funktionierendes beispiel haben um etwas lenern zu können.

ja, das Beispiel sollte aber abstrakt sein und möglichst *nicht* auf den konkreten Anwendungsfall passen, so dass eine aktive Transferleistung vom Lernenden erforderlich ist. Sonst verleitet einen das doch geradezu, dieses Beispiel einfach zu übernehmen, ohne darüber nachzudenken.

wenn man nicht weiß wie was geht braucht man auch nicht nach fehlern suchen, sondern frägt leute die das können nach hilfe

Gute Strategie.

bekommt es von diesen gezeigt

Du meinst: Man bekommt von denen *erklärt*, wie's geht, oder noch besser, wo man es nachlesen kann.

nur wenn man nicht weis wo der fehler ist kann man nicht daraus lernen...

Wenn man nicht einmal erkennt, wo der Fehler steckt, fehlen einem die Grundlagen. Dann ist mit "zeigen" auch nicht viel gewonnen. Sicher kann mir ein Klavierlehrer zeigen, wie ich die Finger bei einem bestimmten Akkord halten soll. Aber wenn ich noch nicht einmal Noten lesen kann, hilft mir das nicht wirklich weiter, weil ich eben diesen Akkord auf dem Notenblatt nicht von einem anderen unterscheiden kann.

der onmouseover effekt ist von einer internetseite, den hab ich also auch nicht selbst geschrieben, aber ich habe ihn mir danach angeschaut und meine ihn verstanden zu haben...

Soso.

Ciao,
 Martin

[striker]

ja zerfleddere meinen post so, dass es aussieht dass ich euch ausnütze.
so is recht.
ja bei mir fehlen die grundlagen! trotzdem möchte ich dies einfach verstehen!
dein beispiel is ja mal voll bombe, respekt!

[striker]

da gerade vorhin noch gefragt wurde was meine javascript-fehlerkosole sagt, dss sagt sie:
hElement ist undefiniert.

darüber gegoogelt, nichts gefunden._.

[Felix Riesterer]

Lieber striker,

hElement ist undefiniert.

da steht sicher auch in welcher Code-Zeile...

darüber gegoogelt, nichts gefunden._.

Das bedeutet, Du hast schon wieder nicht nachgedacht, sondern bist blind einfach einer Eingebung gefolgt. So geht das nicht. Beginne mit den Grundlagen (wie Martin bereits schrieb) und frage dann bei Verständnis-Schwierigkeiten in Sachen Grundlagen hier wieder nach.

Du wärst der erste, der ohne Ahnung von Tuten und Blasen in wenigen Stunden ein komplexes technisches Problem gelöst hätte, und dabei alle Grundlagen gelernt und begriffen hätte. Mit 14 Lenzen.

Jetzt mach' Dich halt mal ernsthaft an die Arbeit. Kannst ja mal mit irgend so einem Tutorial anfangen und später dann in <http://de.selfhtml.org/javascript/intro.htm@title=SELFHTML zu JavaScript> weiterstudieren.

Matthias Schäfer schreibt auch gerade an seiner Einführung in JavaScript - ich weiß aber nicht, ob die besser verständlich oder fertig ist - aber er ist in Sachen JavaScript extrem versiert.

Liebe Grüße,

Felix Riesterer.

[striker]

werde ich mir mal anschauen und vielen dank für die hilfe=)
hab jetzt auch ein gut erklärtes tut fürn onclick gefunden

[Felix Riesterer]

Lieber striker,

fast richtig.

<img src="images/linklistehome.png" onload="new moImage(this, 'images/linklistehome2.png')" onclick="momImage (this, 'images/linklistehome.png')" border="0" />

Du hast doch eine onclick-Funktion schon definiert! Diese onclick-Funktion ist dem Bild-Elementobjekt bereits mitgegeben worden (eine Eigenschaft von objektorientierter Programmierung), indem Dein Bild nach dem vollständigen Laden (also "onload") mit diversen Erweiterungen (eben nach dem Schema von moImage) versehen wurde, darunter auch die onclick-Funktion.

Du bist schon längst fertig! Das onclick-Attribut im HTML ist nun überflüssig, denn dessen Sinn hat bereits Deine Konstruktor-Funktion (moImage) erfüllt.

Und sei bitte so gut und hau das border="0" raus! Das ist ja hässlich (und sowas von unnötig)!

Liebe Grüße,

Felix Riesterer.

[Struppi]

Struppi.

Bitte zitiere nur das worauf du antwortest, das erleichtert das lesen.

Und ohne das großgeschriebene funktioniert es dann??

Sollte - ja!

Theoretisch muss ich es dann hier ja auch äkleinschreiben oder?

Jein. Wenn deine Seite normales HTML ist, spielt es keine Rolle, in XHTML müssen die Attribute klein geschrieben werden.

Ich habe das onclick gro geschrieben, weil es in einem anderen forum(weiß ezz net genau wo) gestanden hat, man soll onClick schreiben._.

Das ist Unsinn.

Struppi.

[striker]

Jein. Wenn deine Seite normales HTML ist, spielt es keine Rolle, in XHTML müssen die Attribute klein geschrieben werden.

meine seite hat html, aber ich schreibs vorsorglich mal klein=)

[Felix Riesterer]

Lieber striker,

schön, dass Du hier trotz anfänglicher innerer Blokade nun auch etwas dazulernst... aber meine Antwort mit einer Lösung hast Du anscheinend übersehen? Dabei steht sie schon seit 14:08 Uhr hier.

Liebe Grüße,

Felix Riesterer.

[Der Martin]

Hallo,

Also dieses hier? this.element.onClick = function(
Sollte es dann so heißen? this.element.onclick = function(
Genau das meine ich.

da haste aber wirklich eine Denkblockade gehabt. Na, jetzt hast du's ja. :-)

Theoretisch muss ich es dann hier ja auch äkleinschreiben oder?
<img src="images/linklistehome.png" onClick="new moImage(this, 'images/linklistehome2.png')" border="0" />
Also dann so:
<img src="images/linklistehome.png" onclick="new moImage(this, 'images/linklistehome2.png')" border="0" />

Richtig. Wenn man es ganz genau nimmt, ist das auch die empfohlene Schreibweise. Allerdings ist HTML gnädig gegenüber der Groß/Kleinschreibung (XHTML wiederum nicht).

Ich habe das onclick gro geschrieben, weil es in einem anderen forum(weiß ezz net genau wo) gestanden hat, man soll onClick schreiben._.

Ja, den Unsinn sieht man leider oft, und immer wieder führt er zu Verwirrung.

So long,
 Martin

[Felix Riesterer]

Lieber striker,

Das war ja der ursprüngliche script für den onmouseover: [... code ...]

schon klar. Das hatten wir schon.

Du hast gesagt ich soll es mit onClick ersetzen:

Nein, ich habe das hier geschrieben:

Was ist so schwer daran, das obige zu kopieren und "onload" durch "onclick" zu ersetzen (den Funktionsnamen natürlich auch anpassen)?

Und was hast Du gemacht? Du hast kopiert, aber den Funktionsnamen nicht umbenannt.

Also mache ich das mal für Dich:

function klickBild(el, src) {  
    el.src = src;  
}

Diese Funktion nimmt zwei Parameter entgegen, eine Referenz auf ein Element (es wird nicht geprüft, ob "el" auch ein <img>-Element ist!!) und einen Wert, der dem "el"-Element als Wert für eine "src"-Eigenschaft zugewiesen wird.

Sollte also "el" tatsächlich ein Bildelement sein, dann wird dem Bild eine neue Datei zugewiesen. Steht in "src" auch ein sinnvoller Pfad, dann wird das Bild-Element tatsächlich ein neues Bild anzeigen.

<a href=index.html><img src="images/linklistehome.png" onClick="new moImage(this, 'images/linklistehome3.png')" border="0" /></a>

Das ist so natürlich Unsinn, da kein neues "moImage"-Objekt erzeugt werden soll. Stattdessen soll nur eine Funktion aufgerufen werden, die zwei passende Parameter erhält.

<img  
    src="images/linklistehome.png"  
    alt="Link-Liste"  
    onclick="klickBild(this, 'images/linklisteclickbild.png')"  

>

Du weißt aber schon, dass wenn das Bild in einem Link sitzt, dass dann das anzuzeigende Klickbild eventuell nicht mehr zu sehen sein wird, da die Seite zur neuen URL hin verlassen wird, oder?

Liebe Grüße,

Felix Riesterer.