Beiträge von Sempervivum

Sempervivum

Zitat

bitte nehm jetzt diesen gerade ermittelten Text und nutze ihn um die richtige ID zu suchen und aufzurufen".

Wenn ich dich da richtig verstehe, sollte dieses es tun:

Code

function zeile(){
    var rows = document.getElementById('ID_tablecontrolE1253671').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
        rows[i].addEventListener('click', function() {
            var row = this.rowIndex + 1;
            var idPlus = "_" + row + "_IMG";
            var newId = "ID_imageactioncontrol735BC564" + idPlus;
            $("img #" + newID).trigger("click"); // Klick auf den Button simulieren
            return true;
        });
    }
}

Alles anzeigen

Ich habe jQuery verwendet, weil das Triggern eines Klicks u. U. problematisch sein kann, siehe z. B. hier:

https://gomakethings.com/how-to-simulat…ith-javascript/

Sempervivum

Zitat

mit welchen befehlen positioniere ich die Balken und die Kreise

Siehe z. B. hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://stackoverflow.com/questions/3255…856609#33856609

Damit kannst Du die Elemente positionieren und, wenn Du es richtig machst, sind Position und Größe abhängig von der Auflösung des Bildschirms.

Zitat

Größe in Prozent zu definieren ist ebenfalls schon ein guter Ansatz

Sempervivum

Zitat

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.

Diese Aussage muss ich revidieren: Verwendet man konsequent Prozentangaben für Abmessungen und Positionen, kann diese Lösung sehr wohl responsiv sein, siehe hier:

http://webentwicklung.ulrichbangert.de/weltkarte-hunde.html

Sempervivum

Dafür würdest Du eval() brauchen, aber in den meisten Fällen ist das nicht zu empfehlen, sondern es gibt bessere Lösungen, so auch hier: ein Array oder ein Objekt verwenden:

Code

function test1(i){
// Array 
var pD = [
    "Peter1,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    "Peter2,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    "Peter3,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    "Peter4,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    "Peter5,Müller,Mann,10a,12.12.1999,1,2,3,6,2"
];
var a = pD[i];
 
 alert(a);
 return a;
}

function test2(i){
// Objekt 
var pD = {
    pD1: "Peter1,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    pD2: "Peter2,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    pD3: "Peter3,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    pD4: "Peter4,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
    pD5"Peter5,Müller,Mann,10a,12.12.1999,1,2,3,6,2"
];
var a = pD["pD" + i];
 
 alert(a);
 return a;
}

Alles anzeigen

Sempervivum

Danach bestand noch das Problem, dass die Höhe von linkem und rechten Logocontainer unterschiedlich war, abhängig von der Fensterbreite. Daher habe ich die Struktur umgestellt:

HTML

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Hauff Intro</title>
    <meta name="description" content="">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="http://www.hauff.com/" />
</head>
<body bgcolor="#a8a9ad">
    <style>
        h1 {
            font-size: 24px;
        }

        h2 {
            font-size: 18px;
            display: inline-block;
            margin: 20px;
            margin-top: 40px;
            margin-bottom: 40px;
        }

        a {
            text-decoration: none;
            flex-basis: 50%;
        }

        body {
            font-family: arial;
            margin: 0;
            padding: 0;
        }

        header, main {
            display: flex;
            flex-direction: row;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        figure {
            width: 100%;
            position: relative;
        }

            figure.left {
                background-color: #fff;
            }

            figure.right {
                background-color: #282828;
            }

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

                main figure figcaption {
                    text-align: left;
                    width: 85%;
                }

        figure.logo {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

            figure.logo.right {
                justify-content: flex-end;
                color: #ffffff;
            }

            figure.logo.left {
                justify-content: flex-start;
                color: #a8a9ad;
            }

            figure.logo.right figcaption {
                text-align: left;
                padding: 20px;
            }

            figure.logo.left figcaption {
                text-align: right;
                padding: 20px;
            }

        figure {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        img.logo {
            max-width: 100%;
        }

        .overlay {
            position: absolute;
            width: 85%;
            bottom: 0;
            color: white;
        }

            .overlay.right {
                left: 0;
                background-color: rgba(245, 130, 32, 0.4);
            }

            .overlay.left {
                right: 0;
                background-color: rgba(102, 174, 64, 0.6);
            }
    </style>
    <header>
        <a href="https://www.hauffdigital.com/" title="Hauff-Digital: Digitale Verkaufslösungen für den Baustoffhandel">
            <figure class="logo left">
                <img class="logo left" src="Hauff-Digital.png" alt="Hauff Digital Logo" />
                <figcaption>
                    <h1>Digitale Verkaufslösungen für den Baustoffhandel</h1>
                </figcaption>

            </figure>
        </a>
        <a href="http://www.hauff.com" title="Hauff-Classic: Ladenbau für den Baustoffhandel">
            <figure class="logo right">
                <figcaption>
                    <h1>Ladenbau für den Baustoffhandel</h1>
                </figcaption>
                <img class="logo right" src="Hauff-Ladenbau.png" alt="Hauff Ladenbau Logo" />
            </figure>
        </a>
    </header>
    <main>
        <a href="https://www.hauffdigital.com/" title="Hauff-Digital: Digitale Verkaufslösungen für den Baustoffhandel">
            <figure class="bottom">
                <figcaption class="overlay left">
                    <h2>Wir planen und bauen erfolgreiche Verkaufsausstellungen. Denn wer heute Kunden begeistern will, muss Mehrwerte bieten – analog und digital.</h2>
                </figcaption>
                <img src="HauffDigital.jpg" alt="Hauff Digital" />
            </figure>
        </a>

        <a href="https://www.hauff.com/" title="Hauff-Digital: Digitale Verkaufslösungen für den Baustoffhandel">
            <figure class="bottom">
                <img src="HauffClassic.jpg" alt="Hauff Ladenbau" />
                <figcaption class="overlay right">
                    <h2>
                        Wir sind die Digitalpioniere der Baustoffbranche und machen Ihre Verkaufsräume fit für die Zukunft. So profitieren Sie und Ihre Kunden aus dem Besten aus Offline und Online!
                    </h2>
                </figcaption>
            </figure>
        </a>
    </main>
</body>
</html>

Alles anzeigen

Ich habe versucht, jetzt die selben Dateinamen für die Bilder zu verwenden wie Du.

Ist das Fenster zu schmal, werden jetzt die Logotexte nicht mehr optimal dargestellt. Dies könnte man noch verbessern, indem man mit eine Mediaquery Bilder und Texte jeweils untereinander anordnen würde bei schmalem Fenster.

Sempervivum

Außerdem stimmen jetzt die Proportionen von linkem und rechtem Container nicht mehr. Der Grund ist, dass das a-Tag hinzugekommen ist. Dieses muss jetzt das flex-basis bekommen:

Code

        a {
            text-decoration: none;
            flex-basis: 50%;
        }

Und der Container:

Code

       .container {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

Sempervivum

Zitat

Und wie kriege ich Text und Slogan nebeneinander mit jeweils 20 px Abstand?

Das Problem ist, dass das img-Tag innerhalb von figcaption liegt:

Code

            <figure class="logo left">
                <figcaption>
                    <img class="logo left" src="images/logo-hauff.png" alt="Hauff Digital Logo" />
                    <h1>Digitale Verkaufslösungen für den Baustoffhandel</h1>
                </figcaption>

            </figure>

Es gehört außerhalb:

Links:

Code

            <figure class="logo left">
                <img class="logo left" src="images/logo-hauff.png" alt="Hauff Digital Logo" />
                <figcaption>
                    <h1>Digitale Verkaufslösungen für den Baustoffhandel</h1>
                </figcaption>

            </figure>

Rechts:

Code

            <figure class="logo right">
                <figcaption>
                    <h1>Ladenbau für den Baustoffhandel</h1>
                </figcaption>
                <img class="logo right" src="images/logo-hauff.png" alt="Hauff Ladenbau Logo" />
            </figure>

Sempervivum

Die einfachste Lösung ist, ein zentrales audio-Objekt zu verwenden, wie ich es früher vorgeschlagen habe: Posts 29 und 31.

Sempervivum

PS: Sollten die Overlays nicht halbtransparent sein? Würde ich hübscher finden.

Sempervivum

Warum nicht auch für die Logos figure-Tags benutzen?

Ich habe versucht, es anzupassen. Schau, ob es jetzt deine Anforderungen trifft:

Code

<style>
        h1 {
            font-size: 30px;
        }

        h2 {
            font-size: 24px;
        }

        h3 {
            font-size: 16px;
            display: inline-block;
        }

        body {
            display: flex;
            flex-direction: row;
            font-family: arial;
            margin: 0;
            padding: 0;
        }

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

            .container.left {
                background-color: #fff;
            }

            .container.right {
                background-color: #333;
            }

            .container figure.bottom {
                margin: 0;
                padding: 0;
                display: inline-block;
                width: 100%;
                position: relative;
            }

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

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

        figure.logo {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        figure.logo.left {
            justify-content: flex-start;
            color: #333;
        }
        figure.logo.right {
            justify-content: flex-end;
            color: white;
        }
        figure.logo.left figcaption {
            padding-right: 10px;
        }
        figure.logo.right figcaption {
            text-align: right;
            padding-left: 10px;
        }
        figure {
            margin: 0;
            padding: 0;
        }

        img.logo {
            margin: 20px;
            max-width: 80%;
        }

        .overlay {
            position: absolute;
            width: 80%;
            bottom: 0;
            left;
            color: white;
        }

            .overlay.left {
                left: 0;
                background-color: rgba(245, 130, 32, 1.0);
            }

            .overlay.right {
                right: 0;
                background-color: rgba(102, 174, 64, 1.0);
            }
    </style>
    <div class="container left">
            <figure class="logo left">
                <img class="logo left" src="images/buttonleftp.png" alt="Hauff Ladenbau Logo" />
                <figcaption>
                    <h3>
                        Digitale Verkaufslösungen für den Baustoffhandel
                    </h3>
                </figcaption>
            </figure>
            <figure class="bottom">
                <img src="images/dia0.jpg" alt="Hauff Digital" />
                <figcaption class="overlay left">
                    <h3>
                        Wir planen und bauen erfolgreiche Verkaufsausstellungen.
                        Denn wer heute Kunden begeistern will, muss Mehrwerte bieten – analog und digital.
                    </h3>
                </figcaption>
            </figure>
    </div>
    <div class="container right">
        <figure class="logo right">
            <figcaption>
                <h3>
                    Digitale Verkaufslösungen für den Baustoffhandel
                </h3>
            </figcaption>
            <img class="logo right" src="images/buttonrightp.png" alt="Hauff Ladenbau Logo" />
        </figure>
        <figure class="bottom">
            <img src="images/dia1.jpg" alt="Hauff Digital" />
            <figcaption class="overlay right">
                <h3>
                    Wir planen und bauen erfolgreiche Verkaufsausstellungen.
                    Denn wer heute Kunden begeistern will, muss Mehrwerte bieten – analog und digital.
                </h3>
            </figcaption>
        </figure>
    </div>

Alles anzeigen

Sempervivum

Versuche dieses:

Code

        aud = bird.getElementsByTagName("audio")[0]; // dies ist das Audio-Element
        aud.play();
        console.log(aud.src); // dies ist die URL des Clips

Sempervivum

audiourl.play - offenbar rufst Du die Funktion play() auf audiourl auf, das ist ein String. Du musst sie auf dem audio-Element aufrufen: aud.play()

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.

Beiträge von Sempervivum

[Erledigt] JS / jQuery für eine anklickbare Tabellenzeile

Objekte positionieren

Mein Traum für meine ersten Webseite

allgemeine fragen zu Javascript

Newbie in Sachen Grid und div

Newbie in Sachen Grid und div

Newbie in Sachen Grid und div

Add element to a List

Newbie in Sachen Grid und div

Newbie in Sachen Grid und div

Add element to a List

Add element to a List

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