7.5.4 Grafiken einsetzen
Mit Grafiken können gerade durch JavaScript sehr schöne Effekte erzeugt werden (z. B. Bildershows). Sicherlich sagt Ihnen der Begriff „Mouseover-Effekt“ etwas.
In JavaScript ist es das Objekt Image
, mit dem Grafiken verändert oder verschönert werden können. Das Image
-Objekt arbeitet mit dem Array document.images
und bietet verschiedene Möglichkeiten, auf Grafiken zuzugreifen:
document.nameDerGrafik
document.images[nameDerGrafik]
document.images[nummerDerGrafik]
document.images[#].src
(statt#
können Sie die Nummer oder den Namen einsetzen)
nameDerGrafik
ist das name
-Attribut, das den Grafiken beim Einfügen in den HTML-Sourcecode gegeben werden kann.
nummerDerGrafik
ist die Nummer, die die Grafik im Standard-Array document.images
besitzt, wobei die Zählung bei 0
beginnt.
Eine weitere wichtige Eigenschaft des Objekts ist src
, welche die URL der entsprechenden Grafik beschreibt. JavaScript kann diese URL sowohl lesen als auch verändern, sodass z. B. eine neue Grafik geladen wird. Allerdings können nur die Grafik an sich verändert werden, Rahmen und Größe bleiben gleich.
Mouseover erzeugen
Wenn Sie mit der Maus über eine Grafik fahren und sich diese dabei verändert, so ist dieser Effekt mit einem Mouseover erzeugt worden. Befindet sich Ihre Maus nicht mehr auf der Grafik, nimmt diese wieder ihre ursprüngliche Gestalt an.
Mit JavaScript können Sie Grafiken zwar nicht verändern, aber austauschen. Sie erstellen also zwei Grafiken, die die gleiche Größe haben, nur dass eine Grafik z. B. einen schwarzen, die andere einen grünen Hintergrund hat.
Zum besseren Verständnis ein Sourcecode-Beispiel. Sie sehen in der folgenden Abbildung ein HTML-Dokument, dass in dieser Form nur eine Grafik mit einer Verlinkung ausgibt:
Diese Grafik soll beim Darüberfahren ausgetauscht werden. Der dazugehörige JavaScript-Code sieht wie folgt aus:
Der Link im HTML-Code wird entsprechend angepasst, um die Funktionen onmouseover
und onmouseout
hinzuzufügen:
Hier haben wir den gesamten Sourcecode und wie es im Browser aussieht.
Mouseover mit JavaScript
Hier ist der vollständige Sourcecode für den Mouseover-Effekt. Die Grafik ändert sich, wenn Sie die Maus darüber bewegen, und wird zurückgesetzt, wenn Sie die Maus entfernen.
So sieht es im Browser aus
Animationen und Bildershows
Bildershows wirken, klug eingesetzt, auf Websites ansprechend und professionell. Bilder wechseln in bestimmten Abständen und starten am Ende wieder von vorne.
Der folgende Sourcecode zeigt, wie eine Bildershow in JavaScript realisiert werden kann:
So sieht es im Browser aus
Die Kommentare im Code erklären die meisten Funktionen. Wichtig ist, dass das Attribut id
in der HTML-Datei und der Bezeichner des Image
-Objekts gleich sind.
Aufgabe: Spiel erstellen
Erstellen Sie eine Website, die mit dem Besucher interagiert: Eine Grafik ist sichtbar, doch sobald der Benutzer mit der Maus darüber fährt, verschwindet sie und taucht an einer anderen Stelle wieder auf. Verwenden Sie ein ansprechendes Hintergrundbild, um die Seite unterhaltsam zu gestalten.
Grafik für die Aufgabe
Lösung
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maus-Spiel</title>
<style>
body {
background-size: cover;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
img {
position: absolute;
width: 100px;
cursor: pointer;
}
</style>
<script>
function moveImage() {
const image = document.getElementById("spielGrafik");
const x = Math.random() * (window.innerWidth - 100);
const y = Math.random() * (window.innerHeight - 100);
image.style.left = x + "px";
image.style.top = y + "px";
}
</script>
</head>
<body>
<img id="spielGrafik" src="../media/5_4_maus.png" alt="Grafik" onmouseover="moveImage()">
</body>
</html>
So sieht es im Browser aus
Versuchen Sie die Maus anzuklicken.