Besonderer HOVER-Effekt

[Svenja Krauss]

Hallo Forum.

Ich weiss nicht, was ich machen soll, denn ich beherrsche absolut kein Javascript.

Folgendes möchte ich realisieren:

Ich habe eine Tabelle mit einem Hauptbild und drei Menüs auf der rechten Seite.

Siehe Grafik: http://www.pyrofreaxx.net/test.gif

Alles sind Grafiken (Startbild, 1,2,3). Wenn ich jetzt z.B. mit der Maus auf den Menüpunkt 1 fahre, dann ändert sich mit einem Hovereffekt der Menüpunkt 1. Nun möchte ich aber auch, das wenn ich z.B. diesen besagten Menüpunkt mit der Maus überfahre, dass nicht nur er sich ändert, sondern auch das Startbild. Das ganze sollte natürlich bei allen drei menüpunkten (1,2,3) funktionieren.

Kann mir da vielleicht jemand weiterhelfen?

Vielen Dank im Vorraus

Svenja Krauss

[Schorsch]

Salut

Ich weiss nicht, was ich machen soll, denn ich beherrsche absolut kein Javascript.

Huuuu, du bringst aber recht Unruhe auf dein Bildschirm. Ich bewege die Maus und werde vom Bilderwechsel fast erschlagen...

Aber nun zu deinem Problem:
In Javascript gibt es Objekte. Zum Beispiel dein grosses Bild in der Mitte ist so ein Objekt. Mit Javascript kannst du nun auf dieses Objekt zugreifen und ihm sagen, er soll eine andere Quelle, also ein anderes Bild nehmen. Bei dir muss das genau dann geschen, wenn du mit der Maus über den Link fährst.

1. Du hast einen Link:
   <a href="#" title="blah">Link 1 </a>

Wenn die Maus darüber fährt, soll was passieren:
  <a href="#" onmouseover="bildwechsel('bildneu.jpg')
  "title="blah">Link 1 </a>

2. Du hast das grosse Bild, welches sich ändern muss:
   <img src="standardbild.jpg" alt="blah" id="bild" />

3. Du hast eine Javascript Funktion

Diese Funktion wechselt das Bild aus.
   Sie wird aufgerufen, wenn du mit der Maus
   Über einen Link fährst.

function bildwechsel(src)
   {
     // Grosses Bild holen
     var bild = document.getElementById('bild');

// Jetzt hast du dein Bild quasi in der
     // Vaiable "bild" drinnen und kannst
     // damit allerhand anstellen.
     // Zum beispiel eben die Quelle (src)
     // ändern.
   }

Viel Erfolg!
Schorsch

[Svenja Krauss]

Hallo,

danke für Eure Hilfe und die Ratschläge. Dann werde ich es mal versuchen.

Gruss

Svenja

[Struppi]

Wenn die Maus darüber fährt, soll was passieren:
  <a href="#" onmouseover="bildwechsel('bildneu.jpg')
  "title="blah">Link 1 </a>

2. Du hast das grosse Bild, welches sich ändern muss:
      <img src="standardbild.jpg" alt="blah" id="bild" />

Warum nicht einfach:

<img src="standardbild.jpg" alt="blah" onmouseover="this.src='bildneu.jpg'">

Struppi.

[Gunnar Bittersmann]

Hi Struppi,

Warum nicht einfach:
<img src="standardbild.jpg" alt="blah" onmouseover="this.src='bildneu.jpg'">

Weil sich das große Bild nicht beim Mouseover über eben dieses, sondern beim Mouseover über den Menüpunkt-Bildern ändern soll.

Gruß,
Gunnar

[Struppi]

Weil sich das große Bild nicht beim Mouseover über eben dieses, sondern beim Mouseover über den Menüpunkt-Bildern ändern soll.

Stimmt, vielleicht sollte ich dem Beispiel Biesterfeld folgen.

Struppi.

[Svenja Krauss]

Hi, irgendwie bekomme ich das nicht hin, ich habe also folgendes gemacht:

Wenn die Maus darüber fährt, soll was passieren:
  <a href="#" onmouseover="bildwechsel('bildneu.jpg')
  "title="blah">Link 1 </a>

<a href="#" onmouseover="bildwechsel('QUELLE ZUM BILD')"title="blah">Link 1 </a>

<a href="#" onmouseover="bildwechsel('QUELLE ZUM 2. BILD')"title="blah">Link 2 </a>

<a href="#" onmouseover="bildwechsel('QUELLE ZUM 3.BILD')"title="blah">Link 3 </a>

2. Du hast das grosse Bild, welches sich ändern muss:
      <img src="standardbild.jpg" alt="blah" id="bild" />

<img src="QUELLE ZUM GROSSEN BILD" alt="blah" id="bild" />

3. Du hast eine Javascript Funktion

Diese Funktion wechselt das Bild aus.
   Sie wird aufgerufen, wenn du mit der Maus
   Über einen Link fährst.

function bildwechsel(src)
   {
     // Grosses Bild holen
     var bild = document.getElementById('bild');

// Jetzt hast du dein Bild quasi in der
     // Vaiable "bild" drinnen und kannst
     // damit allerhand anstellen.
     // Zum beispiel eben die Quelle (src)
     // ändern.
   }

function bildwechsel(src)
    {
     // Grosses Bild holen
      var bild = document.getElementById('QUELLE ZUM 1. GROSSEN AUSTAUSCH-BILD');
}

function bildwechsel2(src)
    {
     // Grosses Bild holen
      var bild = document.getElementById('QUELLE ZUM 2. GROSSEN AUSTAUSCH-BILD');
}

function bildwechsel3(src)
    {
     // Grosses Bild holen
      var bild = document.getElementById('QUELLE ZUM 3. GROSSEN AUSTAUSCH-BILD');
}

Dabei tut sich bei mir überhaupt nichts.

Gruss

Svenja

[wahsaga]

hi,

function bildwechsel(src)
    {
     // Grosses Bild holen
      var bild = document.getElementById('QUELLE ZUM 1. GROSSEN AUSTAUSCH-BILD');
}

'QUELLE ZUM 1. GROSSEN AUSTAUSCH-BILD' ist kein gültiger wert für eine ID, also kannst du dir mit getElementById() hier auch unmöglich zugriff auf irgendein element beschaffen.

function bildwechsel2(src)
function bildwechsel3(src)

darüber hinaus willst du immer noch drei funktionen benutzen, die eigentlich das gleiche machen. beschäftige dich mit der möglichkeit, funktionen mit parametern aufzurufen.

Dabei tut sich bei mir überhaupt nichts.

was sich bei dir erst mal "tun sollte", ist ein ausführlicherer blick in JS-kapitel von selfhtml.

gruß,
wahsaga

[Svenja Krauss]

Hallo,

was habe ich denn für einen Fehler? Kann mir nicht einmal jemand anhand meines Beispieles zeigen, was falsch ist?

function bildwechsel(src)
    {
     // Grosses Bild holen
      var bild = document.getElementById('QUELLE ZUM 1. GROSSEN AUSTAUSCH-BILD');
}

»»'QUELLE ZUM 1. GROSSEN AUSTAUSCH-BILD' ist kein gültiger wert

das war nur ein Beispiel. Hätte auch der Pfad stehen können: 'quelle/zum/ersten/bild/bild1.jpg'

Wie muss das denn funkitonieren mit meiner getElementById Abfrage für drei Bilder?

Gruss

Svenja

[Ingo Turski]

Hi,

»»'QUELLE ZUM 1. GROSSEN AUSTAUSCH-BILD' ist kein gültiger wert

das war nur ein Beispiel. Hätte auch der Pfad stehen können: 'quelle/zum/ersten/bild/bild1.jpg'

und auch der hätte da nichts zu suchen!
Lies doch bitte in der Doku nach, was eine ID überhaupt ist. Und überlege Dir vielleicht auch, ob Du nicht doch auf Javascript verzichten und eine CSS-Lösung wählen willst.

freundliche Grüße
Ingo

[Svenja Krauss]

Lies doch bitte in der Doku nach, was eine ID überhaupt ist. Und überlege Dir vielleicht auch, ob Du nicht doch auf Javascript verzichten und eine CSS-Lösung wählen willst.

Hmm...das sind für mich alles böhmische Dörfer. Ich gebs jetzt auf.
Ob CSS oder Javascript... es funktioniert nicht. Habe versucht das Beispiel zu verstehen, aber ich bekomme es nicht angepasst.

Gruss

Svenja

[Gernot Back]

Hallo Svenja,

Hmm...das sind für mich alles böhmische Dörfer. Ich gebs jetzt auf.
Ob CSS oder Javascript... es funktioniert nicht. Habe versucht das Beispiel zu verstehen, aber ich bekomme es nicht angepasst.

Ich kann dir als Anfängerin nur noch einmal meinen Rat ans Herz legen:

Mach es mit dem images-Objekt, tu dir nicht gleich document.getElementsById an! Die CSS-Lösung halte ich für Anfänger auch für eine Überforderung.

Aber keine Angst (das sag ich vor allem nicht dir Svenja, sondern den anderen): Dahin kommst du auch noch. Eins nach dem anderen!

Gruß Gernot

[Gernot Back]

Hallo Svenja,

fang am besten bei deinem Javascript-Studium mal hier an:

http://de.selfhtml.org/javascript/objekte/images.htm

Damit:

http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id

... geht es zwar in den meisten Browsern auch, aber die klassische Variante ist doch wohl die erstere und da ist auch ein schönes Beispiel, das du an deine Bedürfnisse anpassen kannst.

Gruß Gernot

[Gunnar Bittersmann]

Hi Svenja,

Ich weiss nicht, was ich machen soll, denn ich beherrsche absolut kein Javascript.

Das kann man lernen.

Nun möchte ich aber auch, das wenn ich z.B. diesen besagten Menüpunkt mit der Maus überfahre, dass nicht nur er sich ändert, sondern auch das Startbild.

Kopiere den Code, der das Bild des Menüpunkts ändert und passe ihn für des große Bild an.

Gruß,
Gunnar

[wahsaga]

hi,

Nun möchte ich aber auch, das wenn ich z.B. diesen besagten Menüpunkt mit der Maus überfahre, dass nicht nur er sich ändert, sondern auch das Startbild. Das ganze sollte natürlich bei allen drei menüpunkten (1,2,3) funktionieren.

also ist javascript eigentlich gar nicht erforderlich, wenn du eine umsetzung wie Eric Meyers Pure CSS Popups benutzt.

gruß,
wahsaga