Ergebnis 1 bis 7 von 7
  1. #1
    foto ist offline Grünschnabel
    registriert
    19-02-2012
    Beiträge
    3

    Bildwechsel bei Mouseover / out in anderem DIV bei Überfahren eines Links

    Hallo zusammen,

    nachdem ich mich nun in HTML, CSS und PHP eingearbeitet habe und dies fleißig nutze, habe ich nun festgestellt, dass für meine erdachte Funktion nun auch noch Javascript nötig ist:

    Ich habe ein Div (ID = "nav_img"). Daneben steht ein Menü mit einer Liste von Links:
    (<a href="index.php">Startseite</a>)

    Im Div "nav_img" sieht man als Hintergrundbild beim Laden der Seite ein Anfangsbild.
    Beim Mouseover eines entsprechenden Links soll sich nun das Hintergrundbild im DIV ändern, und zwar abhängig vom überfahrenen Link (Also beim Kontaktlink zwei Hände, die sich drücken, usw...).

    Am liebsten möchte ich das Ganze mit CSS verknüpfen, also vielleicht Klassen, die sich tauschen oder eben die backgroundImage Zuweisungen. Meine bisherigen Versuche sind leider alle gescheitert. Muss ich hierzu zwingend eine JS-Script Funktion einfügen und Javascript definieren über <script type="text/javascript"> ?

    Soweit bin ich nun mit der Suchfunktion im Forum gekommen (ein Link als Beispiel):

    Code:
    <li><a href="imp.php" OnMouseover = "document.getElementById(nav_img).style.backgroundImage = url(menu01.jpg)"; OnMouseout = "document.getElementById(nav_img).style.backgroundImage = url(menu02.jpg)";>		Impressum</a></li>
    Die Fehlerkonsole zeigt "nav_img is not defined". Das Div ist allerdings in HTML angelegt. In der externen CSS-Datei ist das nav_img natürlich schon definiert und die CSS-Datei in HTML eingebunden. Die Pfade zu den Bilder stimmen auch. Kann es ein Problem sein, dass das Div in einem anderen DIV verschachtelt ist? Ich bin schon tagelang am rumprobieren und weiß nicht mehr weiter...

    Gruß
    Foto
    Geändert von foto (19-02-2012 um 09:32 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.672

    AW: Bildwechsel bei Mouseover / out in anderem DIV bei Überfahren eines Links

    Der Fehler stimmt schon. document.getElementById erwartet einen String (in deinem Fall mit dem Inhalt "nav_img") - du verwendest aber die Variable nav_img. Das ist nicht das selbe. Auch der zugewiesene Wert muss ein String sein.

    PS: es heißt onmouseover.

  3. #3
    foto ist offline Grünschnabel
    registriert
    19-02-2012
    Beiträge
    3

    AW: Bildwechsel bei Mouseover / out in anderem DIV bei Überfahren eines Links

    So, nun bin ich einen Schritt weiter. Hier meine Javascript-Funktion:

    Code:
    <!-- JAVASCRIPT-Funktionen -->
    <script type="text/javascript">
    function Bildwechsel(wechselbild) {
      document.getElementById("nav_img").style.backgroundImage = wechselbild;
    }
    </script>
    dieser Aufruf funktioniert, das Bild ändert sich, wenn ich auf den Link KLICKE:

    Code:
    <a href="javascript:Bildwechsel('url(menu01.jpg)')">Bild1</a> oder <a href="javascript:Bildwechsel('url(menu02.jpg')">Bild2</a>
    jetzt soll das aber nicht beim klicken passieren, sondern beim Mouseover / Mouseout.
    Das funktioniert allerdings damit nicht:

    Code:
    <a href="javascript:onmouseover = Bildwechsel('url(menu01.jpg)')">Bild1</a>	
    <a href="javascript:onmouseover = Bildwechsel('url(menu02.jpg)')">Bild2</a>
    Die Fehlerkonsole zeigt keinen Fehler an.

    Gruß Foto

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.672

    AW: Bildwechsel bei Mouseover / out in anderem DIV bei Überfahren eines Links

    1. href="javascript" ist ganz schlechter Stil - vergiss es sofort wieder. Wenn du auf einen Klick reagieren willst, verwende onclick="HIER_JS_CODE".
    2. Das sieht doch schon besser aus. Aber das onmouseover funktioniert nicht wegen 1. Mach'
    Code:
    <a href="test.html" onmouseover="Bildwechsel('url(menu01.jpg')">Bild1</a>

  5. #5
    foto ist offline Grünschnabel
    registriert
    19-02-2012
    Beiträge
    3

    AW: Bildwechsel bei Mouseover / out in anderem DIV bei Überfahren eines Links

    Heureka! Es geht.
    Die Schreibweise "javascript:" habe ich aus dem SelfHTML-Forum abgeschaut. Aber auch zur Verbesserung des Stils sind die Ratschläge immer willkommen. Ich habe gar nicht gemerkt, daß bei dem Herumpropieren der eigentliche Link abhanden gekommen ist. Nun sehe ich endlich klarer. Danke vielmals. Ich hoffe, dass ich auch mal helfen kann, wenn ich etwas mehr gelernt habe.

    Gruß Foto

  6. #6
    Avatar von jspit
    jspit ist offline Lounge-Member
    registriert
    19-06-2009
    Beiträge
    1.710

    AW: Bildwechsel bei Mouseover / out in anderem DIV bei Überfahren eines Links

    Es lohnt sich ev. noch, hier (Mit CSS Class eine andere Class ansprechen) mal einen Blick reinzuwerfen (reines CSS).

  7. #7
    cst
    cst ist offline Jungspund
    registriert
    19-02-2012
    Beiträge
    13

    AW: Bildwechsel bei Mouseover / out in anderem DIV bei Überfahren eines Links

    Hallo,

    wenn ich dich richtig verstehe suchst du so etwas: http://www.allerweltsautos.de/?tre
    Ich habe das ganz ohne Java Script realisiert. Falls das das richtige ist kann ich´s dir gerne erklären wie ichs gemacht habe

    Grüße Christian

Ähnliche Themen

  1. Antworten: 33
    Letzter Beitrag: 27-10-2005, 16:09
  2. Menü beim Überfahren eines Links mit der Maus
    Von The Knight im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 26-06-2005, 10:28
  3. Bei überfahren eines links Rahmen um link/text?
    Von The Knight im Forum CSS und (X)HTML
    Antworten: 1
    Letzter Beitrag: 21-02-2005, 15:38
  4. Infobox beim überfahren eines Links/Bildes?
    Von The Knight im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 18-02-2005, 23:45
  5. Antworten: 17
    Letzter Beitrag: 18-03-2002, 14:49

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •