Kleines Bild per Klick/Mouseover groß und an einer bestimmten Position anzeigen

  • Hey,


    erstmal muss ich mich wirklich für den Titel entschuldigen. Ich lerne seit einer Wochen html/css. Ich habe ein WebShop angefangen zu basteln (keine kommerzielle Nutzung). Habe da auch schon viel geschafft.

    Nun bin ich an einem Punkt wo ich etwas will ich aber nicht mal weiß wonach ich suchen soll.

    Es geht darum ich möchte mehrere kleine Bilder untereinander 4-5 angezeigt bekommen und diese sollen dann per mouse over oder per Klick groß und in einem bestimmten Rahmen dargestellt werden (wie bei Amazon).

    Ist das per html/css überhaupt realisierbar?


    Vielen Dank


    Koko

  • Ja, das ist realisierbar. Vor einiger Zeit habe ich mal dies entwickelt:

    Das Aussehen kannst Du mit CSS nach deinen Wünschen gestalten.

  • ok, wow da muss ich mich mal durcharbeiten. Hab davon ein paar Befehle noch nie gesehen bzw benutzt. :)


    Ich danke dir erstmal werde mal gucken das ich es bei mir ausprobiere.


    DANKE

  • Das ist der Radiohack. Er ermöglicht es, Elemente auf Klick zu ändern. Kern der Sache ist dieses:

    Code
                .mainimg input:checked + figure {
                    display: block;
                    opacity: 1;
                }

    Man verwendet Radiobuttons und versteckt sie. Ist ein Radiobutton gecheckt, wird das figure-Element, das unmittelbar darauf folgt ("+"), sichtbar gemacht. Hier wird dafür opacity verwendet, um ein Überblenden zu erzielen.

  • ok, ich kann dann aber den IMGs auch sagen das sie sich Automatisch an einen gegebenen Rahmen wo das Bild dann groß dargestellt werden soll anpassen ? wäre dann ja in css auto höhe und breite?!

  • ok, ich kann dann aber den IMGs auch sagen das sie sich Automatisch an einen gegebenen Rahmen wo das Bild dann groß dargestellt werden soll anpassen ? wäre dann ja in css auto höhe und breite?!


    Macht es denn überhaupt Sinn das so in HTML zu schreiben? Oder sollte man da eher auf javascript zurück greifen? Hatte jedoch auch letztens gelesen, dass man so viel wie möglich in html "Programmieren" soll, damit die Seite dann auch ohne JavaScript funktionsfähig ist/bleibt da es wohl vorkommt das java von manchen Browsern geblockt wird? Ist da was dran, an der aussage das möglichst viel in HTML geschrieben werden soll?

  • djheke Nein, das geht vielleicht in manchen Fällen, aber spätestens auf Smartphones wird das dann schwierig.



    Ich persönlich würde eher zu einer JS-Lösung greifen. Ja, manche User deaktivieren JS, jedoch ist das meiner Meinung eher ein geringer Anteil, den man nicht unbedingt beachten muss. Insbesondere, wenn es sich dabei nicht um eine Schlüsselfunktion deines Onlineshops handelt. Ein einfacher Hinweis für alle, die JS deaktiviert haben, reicht dann aus.

  • Zitat

    ich kann dann aber den IMGs auch sagen das sie sich Automatisch an einen gegebenen Rahmen wo das Bild dann groß dargestellt werden soll anpassen ?

    Ja, dieser Rahmen wäre .mainimg. Das figure-Tag hat per Default relativ großzügige Margins, so dass die Bilder diesen Rahmen nicht vollstänig ausfüllen. Ist das unerwünscht, kann man diese jedoch leicht auf 0 setzen.

    Zitat

    Macht es denn überhaupt Sinn das so in HTML zu schreiben? Oder sollte man da eher auf javascript zurück greifen? Hatte jedoch auch letztens gelesen, dass man so viel wie möglich in html "Programmieren" soll, damit die Seite dann auch ohne JavaScript funktionsfähig ist/bleibt da es wohl vorkommt das java von manchen Browsern geblockt wird?

    Gute Frage, darüber wird viel diskutiert. Der Browser führt Javascript nur dann nicht aus, wenn der Benutzer es explizit ausgeschaltet hat. Tut er das, muss er akzeptieren, dass viele Seiten dann nicht korrekt angezeigt werden.

  • JR Cologne da ich gerade mit allem erst anfange fällt mir js aktuell sehr schwer wird aber in den kommenden zwei Wochen sich deutlich bessern. Wie wäre deine Idee wenn man das mit JS lösen möchte?


    Sempervivum werde gleich mal versuchen was lauffähiges zusammen zu basteln mit deinem Code ;)

    PS.:Wenn sich es einmal aufmerksam durchließt versteht man doch schnell was für was ist! Danke!

  • Code
     .mainimg { position: absolute; display: inline-block; height: 100px; /*width: calc(100% - 50px);*/

    @Sempervivum

    Was ich hier nicht verstehe, was macht der ausgeklammerte bereich? wenn ich den so lasse habe ich rechts am Rand nen ganzes Stück weiße Fläche! Wenn ich ihn weg mache ist der Rand weg und sonst ändert sich nichts. Das finde ich gerade sehr komisch :D

  • Diese Anweisung soll dafür sorgen, dass .mainimg den gesamten freien Bereich rechts von den Thumbnails ausfüllt. Die 100% beziehen sich dabei auf das Elternelement. Und die 50px die abgezogen werden sind die Breite der Thumbnails.

  • JR Cologne da ich gerade mit allem erst anfange fällt mir js aktuell sehr schwer wird aber in den kommenden zwei Wochen sich deutlich bessern. Wie wäre deine Idee wenn man das mit JS lösen möchte?

    Du würdest deinen Bildern jeweils ein Klick-Event zuordnen und dann beim Klick z.B. eine Klasse zuweisen. Mit dieser könntest du dann im CSS das Aussehen deines Bildes, wenn es angeklickt wurde, festlegen.


    Wenn du möchtest, kann ich dir dazu am Wochenende mal ein Beispiel erstellen.


    Ansonsten gibt es in diesem Bereich aber auch viele fertige Lösungen, falls du dich mit JS lieber erstmal zurückhalten möchtest, was ich gut verstehen kann.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!