Change Image bei Hover eines Kindelements

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Change Image bei Hover eines Kindelements

      Hallo alle,

      ich habe eine Frage. Ich bin gerade dabei eine Seite zu programmieren doch komme an einer Stelle nicht weiter.
      Ich erkläre euch kurz worum es geht:

      Man könnte sich eine Produktansicht in einem Shop vorstellen, die sehen ja meistens sehr ähnlich aus. Ich habe ein großes Artikelbild und unter diesem Bild drei weitere Ansichten.
      Ich möchte, dass wenn man eines dieser kleinen Bildelemente hovert, das große Artikelbild sich ändert.

      Hier der HTML Quellcode:

      PHP-Quellcode

      1. <div class="leftSide">
      2. <div class="imageZoom">
      3. <a class="oben" title="" href="#">
      4. <img src="http://i.ebayimg.com/t/Norwegersocken-grau-meliert-100-Schafwolle-1-Paar-/00/s/NjAwWDYwMA==/z/1vsAAOxyRhBS5ZLz/$_12.JPG" alt="">
      5. </a>
      7. <a class="seite" title="" href="#">
      8. <img src="http://i.ebayimg.com/t/Norwegersocken-grau-meliert-100-Schafwolle-1-Paar-/00/s/NjAwWDYwMA==/z/v2kAAOxycmBS5ZLy/$_12.JPG" alt="">
      9. </a>
      11. <a class="fuss" title="" href="#">
      12. <img src="http://i.ebayimg.com/t/Norwegersocken-grau-meliert-100-Schafwolle-1-Paar-/00/s/NjAwWDYwMA==/z/Jv4AAMXQVT9S5ZLu/$_12.JPG" alt="">
      13. </a>
      14. </div>
      16. <div class="smallImages">
      17. <div class="smallUnderImage oben">
      18. <a title="" href="#">
      19. <img src="http://i.ebayimg.com/t/Norwegersocken-grau-meliert-100-Schafwolle-1-Paar-/00/s/NjAwWDYwMA==/z/1vsAAOxyRhBS5ZLz/$_14.JPG" style="max-width:64px;max-height:64px" index="0" alt="">
      20. </a>
      21. </div>
      22. <div class="smallUnderImage seite">
      23. <a title="" href="#">
      24. <img src="http://i.ebayimg.com/t/Norwegersocken-grau-meliert-100-Schafwolle-1-Paar-/00/s/NjAwWDYwMA==/z/v2kAAOxycmBS5ZLy/$_14.JPG" style="max-width:64px;max-height:64px" index="1" alt="">
      25. </a>
      26. </div>
      27. <div class="smallUnderImage fuss">
      28. <a title="" href="#">
      29. <img src="http://i.ebayimg.com/t/Norwegersocken-grau-meliert-100-Schafwolle-1-Paar-/00/s/NjAwWDYwMA==/z/Jv4AAMXQVT9S5ZLu/$_14.JPG" style="max-width:64px;max-height:64px" index="2" alt="">
      30. </a>
      31. </div>
      32. </div>
      33. </div>
      Alles anzeigen


      Mein Problem ist, das die Elemente die ich hovern möchte, im Quellcode unter dem eigentlichen Artikelbild sind, heißt das ich die mit CSS nicht ansprechen kann.
      Hier noch ein Link: Edit fiddle - JSFiddle

      Hoffe mir kann jemand helfen.
      Danke im Vorraus,

      sn0w

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • Was spricht gehen Javascript?

      Edit:
      So hier mal was schnell hingebasteltes. Es ist nicht ganz fertig aber ich denke du siehst wo hin es geht.

      Edit fiddle - JSFiddle

      EDIT EDIT:
      Ich habe das mal mit einem Klick gebaut sonst kommt es zu Problemen, weil sich das Hauptbild leider nicht verkleinern lässt ohne noch mehr im Code zu basteln. Das müsstest du dann halt per CSS lösen. So das die Bilder immer gleich sind.

    • Javascript kann ich nicht verwenden weil es für eine Produktansicht in einem Ebay Shop ist und man dort keine javascript Dateien nicht extern verwendet werden dürfen und javascript befehle im Editor nicht zugelassen sind.

      Ich schaue mir dein Teil mal an, bin gerade am Handy sonst hätte ich da schon etwas zu geschrieben.

    • Die Grafik wird unten angezeigt ;) Nur leider kann ich diese nicht per jQuery kleiner machen. Das will irgendwie nicht so recht klappen :D

      Aber ich denke wenn du das ganze in einen Container mit einer festen Breite packst und die img's auf 100% machst, dann sollte das auch so gehen wie du es dir vorstellst