Frage Aus einem Bild, ein bestimmten Bereich nehmen.

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

BierGarten100

Neues Mitglied
24 Mai 2017
11
0
1
27
Hallo,

ich möchte gerne aus einem Bild, ein bestimmten Inhalt nehmen und diesen anzeigen lassen. Also um genau zu sein von X=0 & Y=0 bis X=0 & Y=16.

Wenn das geschafft ist möchte ich wenn ich z.B. die Rechte Pfeiltaste drücke dann X=16 & Y=0 bis X=16 & Y=32.

Ich hoffe ihr versteht mein vorhaben.
Mir geht es also nur um die selbst bestimmte Auswahl aus einem Bild. Der Rest mit "ich drück mal ne Pfeiltaste und dann passiert eine andere Auswahl" würde ich dann noch hin bekommen denk ich ^^

Leider weis ich nur nicht, wie ich da ansetzen soll.
Also wie ich dieses vorhandene Bild im Code so bearbeite das ich nur ein bestimmten Bereich davon habe.

Ich hoffe mir kann ein schlauer User da weiter helfen.

P.s.: Ich hoffe das ich das im richtigen Thema gepostet habe.
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.622
242
63
Hallo

Ich hoffe ihr versteht mein vorhaben.

Ich bin mir nicht sicher.

Mir geht es also nur um die selbst bestimmte Auswahl aus einem Bild.

Dazu würde ich "overflow: hidden;" verwenden.

Das Bild befindet sich in einem Container (zum Beispiel dem figure-Element). Dem figure-Element wird eine bestimmte Breite kleiner als das Bild und "overflow: hidden;" zugewiesen. Dadurch wird nur ein Teil des Bildes angezeigt. Ohne weitere Angaben ist das der linke obere Teil.

Indem dem Bild Abstände (margin) zugewiesen werden kann das Bild in dem Ausschnitt verschoben werden.

margin-left mit negativen Werten für eine horizontale Verschiebung, margin-top mit negativen werden für eine vertikale Verschiebung.

Für dein Vorhaben - so wie ich es verstanden zu haben glaube - müsstest du also auf Pfeildruck die margin-Werte ändern.

Ich habe mal ein Beispiel für den Bildausschnitt erstellt. Das Bild ist 450 mal 150px groß. Zunächst wird es komplett angezeigt, darunter jeweils in drei jeweils 150px Breiten Ausschnitten.

Zu dem HTML

Code:
      <figure class="bildausschnitt">
         <img src="http://lorempixel.com/450/150/nature/10" alt="Beispielbild">
      </figure>
      <figure class="bildausschnitt">
         <img src="http://lorempixel.com/450/150/nature/10" alt="Beispielbild">
      </figure>
      <figure class="bildausschnitt">
         <img src="http://lorempixel.com/450/150/nature/10" alt="Beispielbild">
      </figure>
      <figure class="bildausschnitt">
         <img src="http://lorempixel.com/450/150/nature/10" alt="Beispielbild">
      </figure>

dieses CSS

Code:
      .bildausschnitt {
         margin: 1rem 0rem 1rem 0rem;
      }
      .bildausschnitt:nth-of-type(1n+2) {
         overflow: hidden;
         width: 150px;
         height: 150px;
      }
      .bildausschnitt:nth-of-type(1n+2) img {
         max-width: auto;
         display: inline-block;
      }
      .bildausschnitt:nth-of-type(3) img {
         margin-left: -150px;
      }
      .bildausschnitt:nth-of-type(4) img {
         margin-left: -300px;
      }

Und ein Beispiel direkt zum Anschauen

http://boratb.bplaced.net/index64.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
  • Like
Reaktionen: BierGarten100

BierGarten100

Neues Mitglied
24 Mai 2017
11
0
1
27
Hey danke für deine Antwort.

Kannst du mir kurz erklären warum
"
<figure class="bildausschnitt">
<img src="http://lorempixel.com/450/150/nature/10" alt="Beispielbild"></figure>
" in der HTML 4x vorhanden sein muss / soll und wieso es in der CSS so aufgeschildert ist. Was das genau bringt.

Das wäre noch lieb. Danke.
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.622
242
63
Hallo

vorhanden sein muss / soll

Ich habe vier Beispiele gemacht, in denen einmal das Bild komplett angezeigt wird und in den folgenden drei nur Ausschnitte vom Bild.

Zur Umsetzung deines Wunsches braucht du natürlich nur ein Bild, bei dem du margin-left anpassen musst.

Als CSS brauchst du nur

Code:
    .bildausschnitt {
         overflow: hidden;
         width: 150px;
         height: 150px;
         margin: 1rem 0rem 1rem 0rem;
      }

und passt dann für die unterschiedlichen Ausschnitte nur margin-left an.

Gruss

MrMurphy
 
  • Like
Reaktionen: BierGarten100

BierGarten100

Neues Mitglied
24 Mai 2017
11
0
1
27
Ach so ^^

Ok. Dann mach ich mich mal weiter an mein vorhaben.
Vielen lieben dank für deine hilfreichen Antworten.

Lg