Bildergalerie durch klick auf spezifisches Wort anzeigen

[paulski]

Guten Tag in die Runde,
man hat mir erzählt, dass hier im Forum immer sehr freundlich geholfen wird, deshalb komme ich mit meinem (leider recht spezifischen) Problem mal zu euch!

Ich arbeite an meinem ersten größeren HTML/CSS Projekt und komme jetzt leider nicht mehr um JavaScript herum.
Ich möchte für die Uni (bin Biologiestudent) einen Bestimmungsschlüssel umsetzen:

Ich habe zwei div-Boxen. In der linken Box ist Text. Die rechte soll Bilder passend zum Text anzeigen.
Im Text möchte ich einzelne Wörter anklickbar machen, die ein Bild hinterlegt haben. Steht also im Text links z.B. "Das Tier hat vier Beine", soll man das Wort "vier" anklicken können und in der rechten div-Box erscheint dann ein Beispielbild wie ein Tier aussieht, das vier Beine hat:


Da ich das ganze ohne Vorkenntnisse autodidaktisch mache, habe ich mit Hilfe von Chatbots und YouTube Videos folgenden Code zusammengebastelt. Ich habe aber die Befürchtung, dass der schlecht ist und so niemals von einer Person mit Ahnung geschrieben werden würde:

HTML/CSS:

<style>
#image-popup { /* specifications for image popup by mouse hovering */
            position: absolute;
            display: none;
            background-color: white;
            border: 1px solid black;
            padding: 1px;
            margin-left: 40px
</style>


<div id="left-box">
    Das Tier hat <span class="hoverable-word" data-img="img/Vierbeiner.jpeg"> vier</span> oder mehr Beine.
</div>
<div id="right-box">
    <div id="image-popup"></div>
</div>

JavaScript: (im Code steht oft "hoverable word", weil ich erst mit MouseOver gearbeitet habe. Nun soll das Bild aber erst nach einem klick erscheinen)

<script>
    document.addEventListener('DOMContentLoaded', function() {
    const hoverableWords = document.querySelectorAll('.hoverable-word');

    hoverableWords.forEach(word => {
        word.addEventListener('click', function() {
            const imgSrc = this.getAttribute('data-img');
            const imgPopup = document.getElementById('image-popup');
            const textBlockWidth = document.querySelector('.text-block').offsetWidth; // Get the width of the text block and safe it in a variable
            imgPopup.innerHTML = `<img src="${imgSrc}" alt="Hovered Image" style="width: ${textBlockWidth}px; height: auto;">`; // set width of displayed image as the same as the width of the text blocks.
            imgPopup.style.display = 'block';
        });

        document.addEventListener('click', function(event) {
            if (!event.target.classList.contains('hoverable-word')) {
                document.getElementById('image-popup').innerHTML = '';
                document.getElementById('image-popup').style.display = 'none';
            }
        });
    });
});

    </script>

Es funktioniert, dass der Code das entsprechende Bild anzeigt, wenn ich auf das Wort klicke. Wenn ich wo anders hin klicke, verschwindet es wieder. So weit, so gut.

Nun meine Fragen:

1. Ist der Code so erst mal akzeptabel?
2. Ist es möglich, einem Wort mehrere Bilder zu hinterlegen? Ich stelle mir da kleine Pfeilchen (siehe Abb.) neben dem Bild vor, mit denen man dann durch die verschiedenen Fotos wechseln kann, die z.B. zum Wort "vier" passen.
3. Wie kennzeichne ich die "klickbaren" Wörter im Text? Ich hätte sie sehr gern blau, wie im Beispiel-Screenshot.

Ich verstehe, dass das eine sehr spezifische Frage ist. An diesem Projekt sitze ich seit vielen Wochen in jeder Minute meiner Freizeit. Ich habe bei absolut Null Kenntnissen zu HTML/CSS/JavaScript angefangen und deshalb sehr viel Zeit investieren müssen, um bis hier hin zu kommen. Ich wäre euch enorm dankbar, wenn mir jemand helfen könnte, da diese Funktion für mein Projekt wirklich wichtig ist.

Danke schon mal im Voraus!!
Paul

 

[Sempervivum]

Guten Morgen Paul und willkommen im Forum!

1. Ist der Code so erst mal akzeptabel?

Soo schlecht ist das zunächst mal nicht angesichts der Tatsache, dass Du gerade erst mit HTML und CSS begonnen hast. Folgende Anmerkungen:
Den Eventlistener für Klick außerhalb des Wortes registrierst Du innerhalb der Schleife über die Wörter. Das führt dazu, dass er mehrfach registriert wird. Du kannst dich davon überzeugen indem Du einen console.log dort einfügst:

        document.addEventListener('click', function(event) {
            console.log('document clicked');
            if (!event.target.classList.contains('hoverable-word')) {
                document.getElementById('image-popup').innerHTML = '';
                document.getElementById('image-popup').style.display = 'none';
            }
        });

Besser konsequent sein und alles mit einem Listener erledigen:

        document.addEventListener('click', function(event) {
            // Prüfen ob auf ein Wort geklickt wurde:
            if (event.target.classList.contains('hoverable-word')) {
                const imgSrc = event.target.getAttribute('data-img');
                const imgPopup = document.getElementById('image-popup');
                const textBlockWidth = document.querySelector('.text-block').offsetWidth; // Get the width of the text block and safe it in a variable
                imgPopup.innerHTML = `<img src="${imgSrc}" alt="Hovered Image" style="width: ${textBlockWidth}px; height: auto;">`; // set width of displayed image as the same as the width of the text blocks.
                imgPopup.style.display = 'block';
            } else {
                // Es wurde außerhalb eines Wortes geklickt:
                document.getElementById('image-popup').innerHTML = '';
                document.getElementById('image-popup').style.display = 'none';
            }
        });

Mir ist nicht ganz klar, was Du mit dem Setzen der Breite des Bildes vor hast. Ich vermute, Du möchtest erreichen, dass es seinen Container vollständig ausfüllt? Das kannst Du mit CSS viel einfacher erreichen.

1. Wie kennzeichne ich die "klickbaren" Wörter im Text? Ich hätte sie sehr gern blau, wie im Beispiel-Screenshot.

Auch das kannst Du mit CSS erreichen:

<style>
    span.hoverable-word {
        color: blue;
    }
</style>

1. Ist es möglich, einem Wort mehrere Bilder zu hinterlegen?

Das wird jetzt leider ein wenig komplizierter. Du wirst in irgend einer Form eine Datenbasis brauchen, wo die Bilder mit ihren Eigenschaften wie "Anzahl der Beine" abgelegt sind. Dabei empfehle ich, Schritt für Schritt vorzugehen:

1. Die Daten in einem Javascript-Array ablegen.
2. Die Daten in einer Datei auf dem Server ablegen, damit sie von überall her verfügbar sind.
3. Die Daten in einer Datenbank ablegen.

Um mit 1. zu beginnen, informiere dich zunächst über Arrays:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

und Objekte:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

1. Ich stelle mir da kleine Pfeilchen (siehe Abb.) neben dem Bild vor, mit denen man dann durch die verschiedenen Fotos wechseln kann, die z.B. zum Wort "vier" passen.

Um so etwas zu realisieren findest Du zahlreiche Beispiele unter dem Begriff "Slideshow". Ich empfehle, gleich Nägel mit Köpfen zu machen und ein ausgereiftes Skript zu verwenden. Selber benutze ich Swiper:

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

Das unterstützt auch das Umschalten der Bilder durch Wischen, wie man es auf dem Handy gewohnt ist.

 

[paulski]

Guten Abend Sempervivum,
vielen herzlichen Dank für die ausführliche Antwort! Ich bin die nächsten Tage recht ausgelastet, aber werde mir so gut es geht die Nächte um die Ohren schlagen und mich einarbeiten. Deine Ausführungen sind sehr hilfreich - ich melde mich dann (vermutlich mit Folgefragen ) wieder, wenn ich etwas vorangekommen bin!