1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Frage Aus einem Bild, ein bestimmten Bereich nehmen.

Dieses Thema im Forum "JavaScript" wurde erstellt von BierGarten100, 16 Juli 2017.

  1. BierGarten100

    BierGarten100 Neues Mitglied

    Registriert seit:
    24 Mai 2017
    Beiträge:
    6
    Punkte für Erfolge:
    1
    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.
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.373
    Punkte für Erfolge:
    63
    Hallo

    Ich bin mir nicht sicher.

    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 (text):
    1.  
    2.       <figure class="bildausschnitt">
    3.          <img src="http://lorempixel.com/450/150/nature/10" alt="Beispielbild">
    4.       </figure>
    5.       <figure class="bildausschnitt">
    6.          <img src="http://lorempixel.com/450/150/nature/10" alt="Beispielbild">
    7.       </figure>
    8.       <figure class="bildausschnitt">
    9.          <img src="http://lorempixel.com/450/150/nature/10" alt="Beispielbild">
    10.       </figure>
    11.       <figure class="bildausschnitt">
    12.          <img src="http://lorempixel.com/450/150/nature/10" alt="Beispielbild">
    13.       </figure>
    14.  
    dieses CSS

    Code (text):
    1.  
    2.       .bildausschnitt {
    3.          margin: 1rem 0rem 1rem 0rem;
    4.       }
    5.       .bildausschnitt:nth-of-type(1n+2) {
    6.          overflow: hidden;
    7.          width: 150px;
    8.          height: 150px;
    9.       }
    10.       .bildausschnitt:nth-of-type(1n+2) img {
    11.          max-width: auto;
    12.          display: inline-block;
    13.       }
    14.       .bildausschnitt:nth-of-type(3) img {
    15.          margin-left: -150px;
    16.       }
    17.       .bildausschnitt:nth-of-type(4) img {
    18.          margin-left: -300px;
    19.       }
    20.  
    Und ein Beispiel direkt zum Anschauen

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

    Gruss

    MrMurphy
     
    Zuletzt bearbeitet: 16 Juli 2017
    BierGarten100 gefällt das.
  3. BierGarten100

    BierGarten100 Neues Mitglied

    Registriert seit:
    24 Mai 2017
    Beiträge:
    6
    Punkte für Erfolge:
    1
    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.
     
  4. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.373
    Punkte für Erfolge:
    63
    Hallo

    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 (text):
    1.  
    2.     .bildausschnitt {
    3.          overflow: hidden;
    4.          width: 150px;
    5.          height: 150px;
    6.          margin: 1rem 0rem 1rem 0rem;
    7.       }
    8.  
    und passt dann für die unterschiedlichen Ausschnitte nur margin-left an.

    Gruss

    MrMurphy
     
    BierGarten100 gefällt das.
  5. BierGarten100

    BierGarten100 Neues Mitglied

    Registriert seit:
    24 Mai 2017
    Beiträge:
    6
    Punkte für Erfolge:
    1
    Ach so ^^

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

    Lg