Beiträge von Sempervivum

Sempervivum

Dann würde ich das Template so erweitern:

Code

    <script type="text/template" id="bird-list-entry">
        <li class="bird-list-entry" bird-id="<%= id %>">
            <img src="<%= imagePath %>" class="bird-image" />
            <div class="bird-description">
                <span class="bird-name"><%= name %></span>
                <span class="bird-latin-name"><%= latinName %></span>
            </div>
            <span class="add-bird-button">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
            </span>
            <span class="play-button" data-sound="<%= sound %>">
                    <i class="fa fa-play" aria-hidden="true"></i>
            </span>
        </li>
    </script>

Alles anzeigen

Das Ersetzen des Platzhalters <%= sound %> kannst Du sicher selber machen.

Und der Eventlistener müsste dann so aussehen:

Code

$("bird-list-entry span.play-button").on("click", function() {
    var audiourl = $(this).data("sound");
    aud.src = audiourl;
    aud.play(); 
});

Sempervivum

Der Grund ist, dass ich das Overlay absolut positioniert habe mit top:0 an der oberen Kante. Generell ist zwar zu empfehlen. auf abs. Pos. zu verzichten, aber wenn man Elemente überdecken will wie bei einem Overlay ist es doch angebracht.

Man kann aber auch die Reihenfolge der Elemente bei Flexbox ändern durch das Attribut "order".

Sempervivum

Ich habe da mal schnell etwas ausgearbeitet. Hoffe, ich habe deine Beschreibung richtig verstanden. Farben, Abstände etc. muss Du noch verfeinern. Und natürlich die Bilder gegen deine austauschen. Wenn es nicht passt, melde dich wieder.

Code

<body>
    <style>
        body {
            display: flex;
            flex-direction: row;
        }

        .container {
            display: flex;
            flex-direction: column;
            flex-basis: 50%;
        }

            .container figure {
                display: inline-block;
                width: calc(100% - 20px);
                margin: 10px;
                position: relative;
            }

                .container figure img {
                    width: 100%;
                    height: auto;
                    vertical-align: top;
                }

                .container figure figcaption {
                    text-align: center;
                    width: 80%;
                }

        img.logo.left {
            align-self: flex-start;
        }

        img.logo.right {
            align-self: flex-end;
        }

        img.logo {
            margin: 10px;
            max-width: 80%;
        }
        .overlay {
            position: absolute;
            width: 80%;
            bottom: 0;
            text-align: center;
            background-color: rgba(0,0,0,0.4);
            color: white;
        }
        .overlay.left {
            left: 0;
        }
        
        .overlay.right {
            right: 0;
        }
    </style>
    <div class="container" id="left">
        <img class="logo left" src="images/catimage11.png" />
        <figure>
            <img src="images/dia0.jpg" />
            <figcaption class="overlay left">Overlay links</figcaption>
        </figure>
    </div>
    <div class="container" id="right">
        <img class="logo right" src="images/catimage12.png" />
        <figure>
                <img src="images/dia1.jpg" />
                <figcaption class="overlay right">Overlay rechts</figcaption>
        </figure>
    </div>
</body>

Alles anzeigen

Sempervivum

Hallo Heike, würde da etwas ausarbeiten, aber nicht gern doppelte Arbeit machen.

@all: Ist da schon jemand dran?

Sempervivum

Ich empfehle folgendes:

Die URL der Sounddatei in einem data-Attribut ablegen. Leider sieht dein Template keinen Platzhalter dafür vor, aber Du könntest es so einfügen:

Code

.replace('<img src=', '<img data-sound="' + dein_objekt.audioPath + '" src=')

Dann ein Audio-Objekt anlegen:

Code

var aud = new Audio();

Und einen Eventhandler für Mouseover registrieren:

Code

$("bird-list-entry img").on("mouseover", function() {
    var audiourl = $(this).data("sound");
    aud.src = audiourl;
    aud.play(); 
});

Und bedenke, dass es auf Touch-Geräten kein Mouseover gibt. Besser wäre es, jeweils einen Play-Button anzubringen und damit den Klang zu starten.

Sempervivum

BTW: Astrofotografie? Cooles Hobby!

Sempervivum

Einfach eine "normale" Tabelle?

Vorname	Nachname	Email	Alter
Max	Muster	maxmuster@email.de	30
Erika	Mustemann	erikam@gmx.net	50

Sempervivum

Guten Abend Monice,

da fielen mir zunächst zwei Möglichkeiten ein, es zu realisieren: Die Hundeköpfe in die Weltkarte hinein zeichnen und mit Hilfe einer Imagemap die Links auf die Bilder legen.

Oder: Die Hundeköpfe jeweils in ein a-Tag einbetten und dieses auf der Karte absolut positionieren. Die a-Tag bilden jeweils einen Link, der die betr. Seite öffnet.

Beides ist zunächst mal nicht responsiv. Eine responsive Lösung mit SVG wird hier beschrieben:

https://wiki.selfhtml.org/wiki/SVG/Tutor…nsive_Imagemaps

Eine SVG-Grafik ist ohnehin zu empfehlen, da sie beliebig vergrößert und verkleinert werden kann.

Sempervivum

Nein, ich bin sehr sicher, dass jCanvas die Funktion drawImage der Canvas-API benutzt. Die API ist im Browser eingebaut und man kann sie benutzen, ohne etwas einzubinden. Diese Funktion hat für die Abmessungen und die Position die selben Parameter. Offenbar liegt es daran, wie das Verkleinern im Browser implementiert ist. Das ist eine Wissenschaft für sich und es gibt verschiedene Methoden, die sich in Qualität und Schnelligkeit unterscheiden.

Sempervivum

Ah ja, interessante Information, danke! Ich benutze Opera, werde es mal mit anderen Browsern testen.

Sempervivum

Aber natürlich. Du brauchst nur etwas Ausdauer und Beharrlichkeit. Nicht gleich bei den ersten Problemen aufgeben und wenn es gar nicht geht, im Forum fragen.

Und Schritt für Schritt vorgehen. Das Kontaktformular z. B. ist eine Wissenschaft für sich. Ich empfehle, es zunächst zurückzustellen.

Sempervivum

Zitat

Wenn ich jetzt ein 7x7 grosen Würfel habe in Regenbogen Farbe ,wie kann man das den verkleinern .Das währen ja 7 Farben auf ein Pixel. Nur wie siehts da aus .Gemischt ,unsortiert oder wie original

Das ist schlicht unmöglich. Ein Pixel kann nur eine Farbe haben.

Sempervivum

Für die Bilder in drei Spalten habe ich mal ein Beispiel gemacht, weil es aus den Links oben nicht so einfach ersichtlich ist, wie es geht.

Code

<style>
        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .container figure {
            display: inline-block;
            flex-basis: calc(33% - 1em);
            margin: 0.5em;
        }
        .container figure img {
            width: 100%;
            height: auto;
        }
        .container figure figcaption {
            text-align: center;
        }
    </style>
    <div class="container">
        <figure>
            <img src="images/dia0.jpg" />
            <figcaption>Dies ist die Bildbeschriftung</figcaption>
        </figure>
        <figure>
            <img src="images/dia1.jpg" />
            <figcaption>Dies ist die Bildbeschriftung</figcaption>
        </figure>
        <figure>
            <img src="images/dia2.jpg" />
            <figcaption>Dies ist die Bildbeschriftung</figcaption>
        </figure>
        <figure>
            <img src="images/dia3.jpg" />
            <figcaption>Dies ist die Bildbeschriftung</figcaption>
        </figure>
        <figure>
            <img src="images/dia4.jpg" />
            <figcaption>Dies ist die Bildbeschriftung</figcaption>
        </figure>
        <figure>
            <img src="images/dia5.jpg" />
            <figcaption>Dies ist die Bildbeschriftung</figcaption>
        </figure>
    </div>

Alles anzeigen

Sempervivum

Zitat

Soll es beides mal der gleiche Link sein?

Oh nein, für die Bilder dieser:

https://wiki.selfhtml.org/wiki/HTML/Text…urierung/figure

Sempervivum

Da hast Du ja noch eine Menge Arbeit vor dir. Lies dir mal diese Seite durch, dort wird beschrieben, wie man mit Hilfe von Flexlayout Element anordnet:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox

Und dieses, dort wird beschrieben, wie man Bilder mit Beschreibungen anlegt:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox

Sempervivum

In dem Fiddle aus #21 hast Du die Größe des Bildes nicht geändert

Ich bin mir ziemlich sicher, dass dieses richtig ist, aber dabei kommt nur Grau heraus, das Blaue geht verloren:

https://jsfiddle.net/Sempervivum/ggdqbafq/1/

Mache ich das Verkleinern mit meiner Bildbearbeitung, kommt Hellblau heraus. Entweder in dem Skript ist noch ein Fehler oder es liegt am Verkleinern durch die Canvas-API.

Sempervivum

Zitat

Wüsste nicht wie ich das schreiben müsste

Siehe hier:

https://projects.calebevans.me/jcanvas/docs/images/

Bei "Custom width/height"

Sempervivum

Zitat

Wie kann ich denn am besten Javascript lernen.

Ich würde sagen, gleich hier:
https://www.html-seminar.de/javascript.htm

Sempervivum

Zitat

Was macht den das fromCenter ?

Das wird hier erklärt:

https://projects.calebevans.me/jcanvas/docs/rectangles/

Zitat

weil ich auch nicht weiss was das macht.

Ich habe es heraus gefunden, indem ich die RGB-Werte in der Console ausgegeben habe. Dabei sah man sofort, dass in jeder Zeile 32-mal 0,0,0 ausgegeben wurde.

Zitat

Wie functioniert das den bei dir

Wenn man setPixels aufruft, führt jCanvas natürlich auch ein Schleife über alle Pixel aus und ruft für jedes Pixel das each-Callback auf. Soweit ich weiß, sind in der Funktion dann nur die RGB-Werte verfügbar. Braucht man x und y, muss man dies selber berechnen.

Sempervivum

Zitat

wenn ich Kommentare von Post-Id 48 und ich es dann unterhalb schreibe haben alle Posts die Kommentare von Post-Id 48.

Ich vermute, dort befindest Du dich in einer Schleife über alle Posts. Um das Problem zu beheben. musst Du abfragen, ob der aktuelle Schleifendurchlauf für den Post ist, zu dem die Kommentare gehören.

Beiträge von Sempervivum

Add element to a List

Newbie in Sachen Grid und div

Newbie in Sachen Grid und div

Newbie in Sachen Grid und div

Add element to a List

Eigene Internetseite veröffentlichen

Darstellung User-Daten

Mein Traum für meine ersten Webseite

Akzentfarbe aus Bild

Akzentfarbe aus Bild

Eigene Website bauen mit HTML5 + CCS3 ( mit Responsive Design)

Akzentfarbe aus Bild

Eigene Website bauen mit HTML5 + CCS3 ( mit Responsive Design)

Eigene Website bauen mit HTML5 + CCS3 ( mit Responsive Design)

Eigene Website bauen mit HTML5 + CCS3 ( mit Responsive Design)

Akzentfarbe aus Bild

Akzentfarbe aus Bild

Währungsrechner mit HTML, CSS oder Javascript programmieren

Akzentfarbe aus Bild

Kommentare werden nicht an der richtigen "Position" angezeigt