JavaScript - Bildkarte: Ein Anfängerleitfaden

Hallo da draußen, zukünftiger Codingsuperstar! Heute begeben wir uns auf eine aufregende Reise in die Welt der JavaScript-Bildkarten. Mach dir keine Sorgen, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide sein, und wir gehen das Schritt für Schritt durch. Am Ende dieses Tutorials wirst du interaktive Bilder wie ein Profi erstellen können!

Was ist eine Bildkarte?

Bevor wir uns der JavaScript-Komponente zuwenden, lassen wir uns erst einmal anschauen, was eine Bildkarte ist. Stell dir vor, du hast ein Bild von einer Pizza und möchtest, dass verschiedene Dinge passieren, wenn jemand auf verschiedene Beläge klickt. Genau das macht eine Bildkarte – sie macht spezifische Bereiche eines Bildes klickbar!

Erste Schritte mit HTML

Um eine Bildkarte zu erstellen, beginnen wir mit ein wenig grundlegendem HTML. Mach dir keine Sorgen; es ist einfacher, als es aussieht!

<img src="pizza.jpg" alt="Delicious Pizza" usemap="#pizzamap">

<map name="pizzamap">
<area shape="circle" coords="100,100,50" href="#cheese" alt=" Käse">
<area shape="rect" coords="200,50,300,150" href="#pepperoni" alt="Pepperoni">
</map>

Lassen wir das auseinanderbrechen:

• Wir haben ein <img>-Tag, das unser Pizza-Bild anzeigt.
• Das usemap-Attribut verbindet das Bild mit unserer Karte.
• Innerhalb des <map>-Tags definieren wir klickbare Bereiche mit <area>-Tags.
• Jedes <area>-Tag hat eine Form (Kreis oder Rechteck), Koordinaten und einen Link.

Verbesserung mit JavaScript

Nun fügen wir ein wenig JavaScript-Zauber hinzu, um unsere Bildkarte interaktiver zu gestalten!

Schritt 1: Elemente auswählen

Zuerst müssen wir unsere Elemente mit JavaScript erfassen:

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

Dieser Codefindet unser Bild und alle von uns definierten klickbaren Bereiche.

Schritt 2: Klickereignisse hinzufügen

Nun lassen wir etwas passieren, wenn wir auf einen Bereich klicken:

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('Du hast auf ' + this.alt + ' geklickt');
});
});

Dieser Code fügt jedem Bereich ein Klickereignis hinzu. Beim Klicken wird eine Alertbox mit dem Namen des Belags angezeigt.

Schritt 3: Bereiche hervorheben

Lassen wir es visuell werden! Wir werden den Bereich hervorheben, wenn die Maus darüberfährt:

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

areas.forEach(area => {
const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

Dieser Code erstellt eine halbtransparente Überlagerung für jeden Bereich und zeigt/schließt sie bei Mausberührung.

Alles zusammenfügen

Hier ist unser vollständiger JavaScript-Code:

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('Du hast auf ' + this.alt + ' geklickt');
});

const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

Fazit

Herzlichen Glückwunsch! Du hast gerade eine interaktive Bildkarte mit JavaScript erstellt. Erinnern wir uns daran, was ich gesagt habe, dass du interaktive Bilder wie ein Profi erstellen würdest? Nun, sieh dich an!

Hier ist eine schnelle Zusammenfassung dessen, was wir gelernt haben:

1. Wir haben mit grundlegendem HTML begonnen, um unser Bild und die klickbaren Bereiche zu definieren.
2. Wir haben JavaScript verwendet, um diese Elemente auszuwählen.
3. Wir haben Klickevents hinzugefügt, um Alerts anzuzeigen, wenn Bereiche geklickt werden.
4. Wir haben visuelles Feedback mit Überlagerungen bei Mausberührung erstellt.

Methodentabelle

Hier ist eine Tabelle der wichtigsten von uns verwendeten JavaScript-Methoden:

Methode	Beschreibung
querySelector()	Wählt das erste Element aus, das einem CSS-Selektor entspricht
querySelectorAll()	Wählt alle Elemente aus, die einem CSS-Selektor entsprechen
addEventListener()	Fügt einen Ereignis-Handler einem Element hinzu
preventDefault()	Verhindert die standardmäßige Aktion eines Ereignisses
createElement()	Erstellt ein neues HTML-Element
appendChild()	Fügt ein neues Kind-Element zu einem Element hinzu

Weiterüben und experimentieren mit diesen Konzepten. Vor dir lies jeder Experte einmal ein Anfänger. Frohes Coden!

Credits: Image by storyset