Button ändern

[Heidi]

Hallo,
wie kann ich in der folgenden Konstellation

<form action="http://www.example.com/cgi-bin/xxxxxx.pl"  method="post"
    name="f1n" id="f1i">
    <input type="image" src="http://www.example.com/button1.jpg">
</form>

beim Überfahren des Buttons den Button button2.jpg anzeigen?

[Gunnar Bittersmann]

Hello out there!

beim Überfahren des Buttons den Button button2.jpg anzeigen?

<input type="image" src="http://www.example.com/button1.jpg" onmouseover="[code lang=javascript]this.src='http://www.example.com/button2.jpg'" onmouseout="this.src='http://www.example.com/button1.jpg'">[/code]

sollte es tun. Schicker wäre freilich die Trennung von HTML und JavaScript.

See ya up the road,
Gunnar

[Heidi]

Danke Euch,

Schicker wäre freilich die Trennung von HTML und JavaScript.

Kannst Du mir hierzu einen kleinen Tip oder Verweis geben?
Ich nehme an, dass onmouse.... ausgelagert werden soll, aber wie?
Heidi

[Gunnar Bittersmann]

Hello out there!

Ich nehme an, dass onmouse.... ausgelagert werden soll,

Ja.

aber wie?

Siehe [molily]

See ya up the road,
Gunnar

[Heidi]

Hallo Gunnar,

Siehe [molily]

geht es nicht in kleineren Schritten?
Bevor ich diese Dokumentation verstehe, habe ich wahrscheinlich die Lust verloren.
Gibt es nicht ein ähnliches einfaches Beispiel wie das meinige, zu dem es die optimierte Variante gibt?
Schönen Abend
Heidi

[Gunnar Bittersmann]

Hello out there!

geht es nicht in kleineren Schritten?

Hilft dir </archiv/2006/8/t134246/#m870892>?

See ya up the road,
Gunnar

[Heidi]

Hallo

Hilft dir </archiv/2006/8/t134246/#m870892>?

Aber ja, doch!
Danke
Heidi

[Heidi]

Hallo Gunnar,
es klappt mit nachfolgenden Angaben, wenn ich das Skript in meiner HTML-Source angebe.

<script type="text/javascript">
  window.onload = function() {
    document.getElementById("foo").onmouseover = function() {
      this.src = ".....1";
    };
    document.getElementById("foo").onmouseout = function() {
      this.src = ".....2";
    };
  };
</script>

Wie kann ich das aber in meine ausgelagerte Script-Datei übernehmen? Ich habe, wenn ich es richtig sehe, keinen Funktionsnamen, den ich aufrufen könnte (ggf. an welcher Stelle).
In der Hoffnung auf weitere Unterstützung
Heidi

[Gunnar Bittersmann]

Hello out there!

Wie kann ich das aber in meine ausgelagerte Script-Datei übernehmen?

Indem du den Inhalt des 'script'-Elements in eine Datei 'foo.js' schreibst und diese referenzierst:
<script type="text/javascript" scr="foo.js"></script>

Ich habe, wenn ich es richtig sehe, keinen Funktionsnamen, den ich aufrufen könnte

Brauchst du auch nicht.

Der Code wird sofort ausgeführt. Deshalb kannst du ja nicht einfach sofort 'document.getElementById("foo")' aufrufen, bevor dieses Objekt "foo" existiert, sondern erst dann, wenn das HTML-Dokument komplett (also insb. das Element mit der ID "foo") geladen ist: 'window.onload'.

Dann erst wird diese anonyme(!) Funktion ausgeführt. Um zu deiner Frage zurückzukommen: Diese Funktion (und auch die Funktionen, die bei 'document.getElementById("foo").onmouseover' bzw. 'document.getElementById("foo").onmouseout' ausgeführt werden) bräuchte(n) keinen Namen; könnte(n) aber auch einen bekommen, das sähe dann so aus:

window.onload = init;  
  
function init()  
{  
  document.getElementById("foo").onmouseover = initFooOnmouseover;  
  document.getElementById("foo").onmouseout = initFooOnmouseout;  
}  
  
function initFooOnmouseover()  
{  
  this.src = ".....1";  
}  
  
function initFooOnmouseout()  
{  
      this.src = ".....2";  
};

See ya up the road,
Gunnar

[Heidi]

Hallo Gunnar,
was es nicht alles gibt, und was manche Leute alles wissen!
Ich bedanke mich.
Gruß
Heidi
(nicht von der Alm)

[Gunnar Bittersmann]

Hello out there!

was es nicht alles gibt, und was manche Leute alles wissen!

Auch ich ziehe vor einigen hier meinen Hut.

See ya up the road,
Gunnar

[Heidi]

Hallo Gunnar,
irgendwie stehe ich auf dem Schlauch.
Ich habe mein Programm bis auf ein paar Zeilen abgespeckt, um den Bildwechsel zu testen, aber es tut sich nichts.

Hier die Zeilen:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Test</title>  
<style type="text/javascript">  
  window.onload = init;  
  function init()  
  {  
    document.getElementById("id1").onmouseover = initFooOnmouseover;  
    document.getElementById("id1").onmouseout = initFooOnmouseout;  
  }  
  
  function initFooOnmouseover()  
  {  
    this.src = "bild1.jpg";  
  }  
  
  function initFooOnmouseout()  
  {  
    this.src = "bild.jpg";  
  };  
-->  
</style>  
</head>  
<body>  
<form action="http://www.foo.com/bin/form.pl" method="post">  
    <input type="image" id="id1" src="bild.jpg" alt="xyz">  
</form>  
</body>  
</html>  
  

Kannst Du hier etwas erkennen?
Danke Heidi

[Gunnar Bittersmann]

Hello out there!

[…] es tut sich nichts.

<style type="text/javascript">

Ein 'style'-Element wird einen Browser nicht dazu veranlassen, ein Script auszuführen. ;-)

function initFooOnmouseout()
  {
    this.src = "bild.jpg";
  };

Nimm mal das ';' weg. (Das hinter '}'. Ich weiß, Fehler von mir.)

-->

Und das auch. Wo kein '<!--', da kein '-->'. Und die HTML-Auskommentierung von Scripten ist bestenfalls überflüssig, manchmal auch falsch.

See ya up the road,
Gunnar

[Heidi]

Danke,
es funktioniert.
Wäre aber nicht nötig gewesen, dass Du mitten in der Nacht noch einmal aufstehst, um mir das Problem zu lösen!
Gruß
Heidi

[Der Martin]

Hallo Heidi,

auch wenn du bis hierher diejenige bist, die aus diesem Thread einen Nutzen zieht, möchte ich mich als Forums-Stammgast mal bei _dir_ bedanken.

Denn obwohl du anscheinend relativ neu hier bist (zumindest bist du mir noch nicht aufgefallen), gibst du ein Musterbeispiel ab für ein Verhalten, wie wir es uns hier wünschen:
Du bist in der Lage, dein Problem klar und verständlich zu beschreiben, du bedankst dich freundlich für Hinweise, die dir weiterhelfen, und du zeigst, dass du selbst mitdenkst. Denn das ist genau die Art von Hilfe, die wir hier am liebsten geben - Hilfe zum Verständnis, so dass der Fragesteller sein Problem mit einem kleinen Schubs hier und da letztendlich doch selbst lösen kann.

Wäre aber nicht nötig gewesen, dass Du mitten in der Nacht noch einmal aufstehst, um mir das Problem zu lösen!

Ach was, ein Uhr ist doch noch spät abends. Da guckt man doch nochmal schnell, ob noch was los ist, bevor man vor dem Ins-Bett-gehen den Rechner ausmacht. ;-)

Schönen Tag noch,
 Martin

[Manni]

Hallo zusammen,
dieser thread hat mich auf eine Idee gebracht, deren Verwirklichung aber ohne Eure Hilfe nicht optimal möglich ist.
Ich habe auf meinen Seiten verschiedene Bilder (als Submit-Button oder als Link). Alle habe ich bisher individuell in HTML mit onmouse....#
beim Überfahren ausgetauscht.
Jetzt möchte ich ein ausgelagertes Javascript machen der vorgeschlagenen Art, in dem alle möglichen Bilder bearbeitet werden.
Dazu nenne ich die Bilder bild1, bild2, ..., bild40, die beim Überfahren angezeigte Bilder bild1h, bild2h, ..., bild40h, die zugehörige id ist id1, id2, ... (oder auch bild1, bild2,....).

Dies habe ich folgendermassen geschafft:

  
  window.onload = init;  
  function init()  
  {  
   if (document.getElementById("bild1"))  
   {  
    document.getElementById("bild1").onmouseover = initOnmouseover1;  
    document.getElementById("bild1").onmouseout  = initOnmouseout1;  
   }  
   if (document.getElementById("bild2"))  
   {  
    document.getElementById("bild2").onmouseover = initOnmouseover2;  
    document.getElementById("bild2").onmouseout  = initOnmouseout2;  
   }  
   if (document.getElementById("bild3"))  
   {  
    document.getElementById("bild3").onmouseover = initOnmouseover3;  
    document.getElementById("bild3").onmouseout  = initOnmouseout3;  
   }  
  }  
  
.....  
  
  function initOnmouseover1()  
  {  
   this.src = "bild1h.jpg";  
  }  
  function initOnmouseout1()  
  {  
   this.src = "bild1.jpg";  
  }  
  
  function initOnmouseover2()  
  {  
   this.src = "bild2h.jpg";  
  }  
  function initOnmouseout2()  
  {  
   this.src = "bild2.jpg";  
  }  
  
  function initOnmouseover3()  
  {  
   this.src = "bild3h.jpg";  
  }  
  function initOnmouseout3()  
  {  
   this.src = "bild3.jpg";  
  }  
  
......  

Da nicht in jedem HTML jedes Bild angesprochen wird, frage ich oben jeweils ab, ob die id exisitiert.
Das gesamte Skript ist natürlich äußerst umfangreich und unschön.
Daher habe ich es versucht in der Art

  
  window.onload = init;  
  function init()  
  {  
    var i=0;  
    while (i < 41)  
    {  
      i++;  
      document.getElementById("id" + i).onmouseover = initOnmouseover();  
      document.getElementById("id" + i).onmouseout  = initOnmouseout();  
    }  
  }  
  function initOnmouseover()  
  {  
    var i=0;  
    while (i < 41)  
    {  
      i++;  
      this.src = "bild" + i + "h.jpg";  
    }  
  }  
  function initOnmouseout()  
  {  
    var i=0;  
    while (i < 41)  
    {  
      i++;  
      this.src = "bild" + i + ".jpg";  
    }  
  }  

... aber das geht, wie ich schnell bemerkte nicht, denn es muss ja für jede id eine Funktion onmouse... existieren.
Hat jemand eine Idee, wie man das Problem elegant lösen könnte?

[Der Martin]

Hallo,

dieser thread hat mich auf eine Idee gebracht, deren Verwirklichung aber ohne Eure Hilfe nicht optimal möglich ist.

och komm, mit ein wenig Hirnschmalz schon ... ;-)

Jetzt möchte ich ein ausgelagertes Javascript machen der vorgeschlagenen Art, in dem alle möglichen Bilder bearbeitet werden.

Für jedes Bild eine eigene Funktion zu schreiben, ist natürlich mühsam und fehleranfällig - und unelegant noch dazu. Da es sich immer um denselben Vorgang handelt, bietet es sich förmlich an, dieselben Eventhandler für alle Bilder zu benutzen.

... aber das geht, wie ich schnell bemerkte nicht, denn es muss ja für jede id eine Funktion onmouse... existieren.

Keineswegs.

window.onload = init;
  function init()
  {
    var i=0;
    while (i < 41)
    {
      i++;
      document.getElementById("id" + i).onmouseover = initOnmouseover();
      document.getElementById("id" + i).onmouseout  = initOnmouseout();
    }
  }

Autsch! Hier rufst du die beiden Eventhandler-Funktionen je einmal auf und speicherst dann deren Rückgabewerte, nämlich "undefined". In deinem ersten Ansatz hattest du das richtig.

Ich würde hier allerdings noch ein Stück weitergehen und dem Bildobjekt seine beiden Bildnamen (Normal + Hover) als Eigenschaften mitgeben, dann kannst du später im Eventhandler bequem darauf zugreifen. Bei der Gelegenheit baue ich noch die hier ungünstige while-Schleife in eine for-Schleife um und optimiere den Zugriff auf das Elementobjekt, damit man nicht x-mal getElementById() aufrufen und den ganzen Elementbaum durchsuchen muss:

for (var i=0; i<41; i++)
    {
      var obj = document.getElementById("id" + i);
      obj.onmouseover = initOnmouseover;
      obj.onmouseout  = initOnmouseout;
      var dot = obj.src.lastIndexOf(".");
      obj.normalimage = obj.src;
      obj.hoverimage  = obj.src.substr(0, dot) + "h" + obj.src.substr(dot);
    }
  }

Um die richtigen Namen der Bilder zu bestimmen, gehe ich hier davon aus, dass sie eine mit einem Punkt abgetrennte Endung haben, wie das allgemein üblich ist. Dann kann ich den Namen am letzten vorkommenden Punkt auftrennen und das "h" einfügen, oder was auch immer.
Nun brauchst du innerhalb der Eventhandlerfunktionen nur noch die src-Eigenschaft des betroffenen Objekts neu zu setzen, wobei die richtigen Werte schon als normalimage bzw. hoverimage im Objekt vorliegen.

function initOnmouseover()
  {
      this.src = this.hoverimage;
  }
  function initOnmouseout()
  {
      this.src = this.normalimage;
  }

Ist doch recht handlich geworden, oder nicht?

So long,
 Martin

[Manni]

Man oh Man(ni),
das hat auf Anhieb funktioniert!
Danke

[Patrick Andrieu]

Hallo Manni!

das hat auf Anhieb funktioniert!

Tja, so ist er halt, unser Martin. Selbst ein verbissener JavaScript-Verweigerer, für andere kann er aber die dollsten Sachen zaubern ;)

*SCNR, Martin*

Viele Grüße aus Frankfurt/Main,
Patrick

[Der Martin]

Hallo Patrick,

das hat auf Anhieb funktioniert!
Tja, so ist er halt, unser Martin. Selbst ein verbissener JavaScript-Verweigerer, für andere kann er aber die dollsten Sachen zaubern ;)

*blush*
danke für dieses Lob - aber nochmal: Ich bin kein Javascript-Verweigerer, ich nutze es auch selbst gern. Aber eben nur Selbstgemachtes, nicht das, was andere mir andrehen wollen.

*SCNR, Martin*

Scho' recht.

Herzliche Grüße aus'm Schwobaländle,
 Martin

[andris]

hallo heidi,

versuch's mal so:

im CSS:
 #submit {
 background:url(button1.jpg);
 }

#submit:hover {
 background:url(button2.jpg);
 }

und im HTML:

<input type="submit" id="submit"/>

gruss,
andris

[Inita_]

hoi,

gruss,
andris

andris ? Das ist doch ein lettischer Name, oder? :) Inita

[andris]

andris ? Das ist doch ein lettischer Name, oder? :) Inita

holländisch.

halb holländer, halb schweizer.

[Patrick Andrieu]

Hallo andris!

halb holländer, halb schweizer.

Alles Käse!

*SCNR*

Viele Grüße aus Frankfurt/Main,
Patrick

[andris]

Alles Käse!

ich liebe käse

[Inita_]

andris ? Das ist doch ein lettischer Name, oder? :) Inita

holländisch.

halb holländer, halb schweizer.

Bei uns in Lettland ist aber Andris ein sehr sehr alter Name und ist auch viel verbreitet, also, es gibt sehr viele Maenner mit den Namen Andris =).

Inita

[andris]

Bei uns in Lettland ist aber Andris ein sehr sehr alter Name und ist auch viel verbreitet, also, es gibt sehr viele Maenner mit den Namen Andris =).

Hauptsache nordisch. ;-)

[Heidi]

Hallo,

<input type="submit" id="submit"/>

Ich habe keinen Submit-Button, sondern
<input type=img .....
Das funktioniert so also nicht.
Gruß
Heidi