Hallo Leute, ich hoffe ihr könnt mir helfen !
Ich habe eine Wichtige Hausaufgabe über Javascript mit der ich nicht klar komme.
1.) „Mit Hilfe von Javascript, soll durch Analyse und Anpassung des folgenden Scripts, eine im
Zusammenhang mit dem Internet oft verwendete „mouse over“ –Technik angewendet werden.
Passen Sie das Script so an, dass beim Überfahren der Schaltflächen mit der Maus, eine Ersatzgrafik
anstelle dieser gezeigt wird, die eine andere Farbe hat.
a. Fertigen Sie je Schaltfläche 2 Grafiken an (25*75px) und beschriften Sie diese mit „Klick 1“,
„Klick 2“ und „Klick 3“ (insgesamt 3 Stück) eine Schaltfläche soll blau sein, eine jeweils rot.
b. Mit Hilfe des Scripts sorgen Sie dafür, das beim Überstreichen der 3 blauen, nebeneinander
liegenden Schaltflächen, jeweils die rote dazu passende Schaltfläche angezeigt wird.
Also zuerst 3 blaue nebeneinander („klick 1“ bis „klick 3“), wenn ich mit der Maus darüber
gehe wird sie rot („klick 1“ bis 3)
c. Verlassen Sie die entsprechende Schaltfläche wieder, muss die blaue Variante wieder zu
sehen sein.
2.) Suchen Sie sich im Internet die Lightbox2 – Galerie heraus. Sie ist im Moment die häufigst
eingesetzte Technologie zum Bilderbetrachten im Internet. Erstellen Sie mit 5 eigenen Motiven eine
Bildergalerie.
a. Die 5 Bilder liegen zunächst nebeneinander auf einer einfachen Homepage (HTML/CSS).
Klickt man eins der Bilder an, wird es groß dargestellt, wobei der Hintergrund
halbtransparent abgedunkelt wird. Durch klicken auf das Kreuz in der Großbilddarstellung
gelangt man wieder zur Bilderübersicht.
b. Erstellen Sie eine zweite Lösung, bei der Sie beim Anklicken eines der Bilder, eine
Bilderfolge auslösen, die der Betrachter mit Klicken auf die vor und zurück Flächen steuern
kann, bis er auch hier mit klicken auf das Kreuz die Präsentation beendet.
URL zur Lightbox2 – Galerie mit Erklärungen und Beispielen:
Lightbox
SCRIPT:
Ich danke schonmal im Vorraus !:icon7:
Liebe Grüsse Charlie
Ich habe eine Wichtige Hausaufgabe über Javascript mit der ich nicht klar komme.
1.) „Mit Hilfe von Javascript, soll durch Analyse und Anpassung des folgenden Scripts, eine im
Zusammenhang mit dem Internet oft verwendete „mouse over“ –Technik angewendet werden.
Passen Sie das Script so an, dass beim Überfahren der Schaltflächen mit der Maus, eine Ersatzgrafik
anstelle dieser gezeigt wird, die eine andere Farbe hat.
a. Fertigen Sie je Schaltfläche 2 Grafiken an (25*75px) und beschriften Sie diese mit „Klick 1“,
„Klick 2“ und „Klick 3“ (insgesamt 3 Stück) eine Schaltfläche soll blau sein, eine jeweils rot.
b. Mit Hilfe des Scripts sorgen Sie dafür, das beim Überstreichen der 3 blauen, nebeneinander
liegenden Schaltflächen, jeweils die rote dazu passende Schaltfläche angezeigt wird.
Also zuerst 3 blaue nebeneinander („klick 1“ bis „klick 3“), wenn ich mit der Maus darüber
gehe wird sie rot („klick 1“ bis 3)
c. Verlassen Sie die entsprechende Schaltfläche wieder, muss die blaue Variante wieder zu
sehen sein.
2.) Suchen Sie sich im Internet die Lightbox2 – Galerie heraus. Sie ist im Moment die häufigst
eingesetzte Technologie zum Bilderbetrachten im Internet. Erstellen Sie mit 5 eigenen Motiven eine
Bildergalerie.
a. Die 5 Bilder liegen zunächst nebeneinander auf einer einfachen Homepage (HTML/CSS).
Klickt man eins der Bilder an, wird es groß dargestellt, wobei der Hintergrund
halbtransparent abgedunkelt wird. Durch klicken auf das Kreuz in der Großbilddarstellung
gelangt man wieder zur Bilderübersicht.
b. Erstellen Sie eine zweite Lösung, bei der Sie beim Anklicken eines der Bilder, eine
Bilderfolge auslösen, die der Betrachter mit Klicken auf die vor und zurück Flächen steuern
kann, bis er auch hier mit klicken auf das Kreuz die Präsentation beendet.
URL zur Lightbox2 – Galerie mit Erklärungen und Beispielen:
Lightbox
SCRIPT:
HTML:
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" />
<title>JavaScript ‐ Grundlagen</title>
<style type=”text/css”>
.bild {floting:left;}
</style
<script type="text/javascript">
<!‐‐
Bild1_std = new Image();
Bild1_std.src = "../bilder/bild1_std.jpg"; //Schaltfläche 1 blau
Bild1_aktiv = new Image();
Bild1_aktiv.src = "../bilder/bild1_akt.jpg"; //Schaltfläche 2 rot (wenn Maus
darüber ist)
Bild2_std = new Image();
Bild2_std.src = "../bilder/bild2_std.jpg";
Bild2_aktiv = new Image();
Bild2_aktiv.src = "../bilder/bild2_akt.jpg";
Bild3_std = new Image();
Bild3_std.src = "../bilder/bild3_std.jpg";
Bild3_aktiv = new Image();
Bild3_aktiv.src = "../bilder/bild3_akt.jpg";
function Bildwechsel (Bildnr, Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src
}
‐‐>
</script>
<noscript>
Ihr Browser unterstützt kein Javascript, einige Inhalte auf dieser Seite können
eventuell nicht dargestellt werden...
</noscript>
</head>
<body>
<div>
<div width="100%"><h2>Beispiel Nr.2 ‐ Javascript mit Bildwechselfunktion</h2></div>
<div class=”bild”>
<a href="#"
onmouseover="Bildwechsel(0,Bild1_aktiv)"
onclick="Bildwechsel(3,Bild1_aktiv)"
onmouseout="Bildwechsel(0,Bild1_std)">
<img src="http://forum.jswelt.de/bilder/bild1_std.jpg" width="150" height="75" />
</a>
</div>
<div class="bild">
<a href="#"
onmouseover="Bildwechsel(1,Bild2_aktiv)"
onmouseout="Bildwechsel(1,Bild2_std)">
<img src="http://forum.jswelt.de/bilder/bild2_std.jpg" width="150" height="75" />
</a>
</div>
<div class="bild">
<a href="#"
onmouseover="Bildwechsel(2,Bild3_aktiv)"
onmouseout="Bildwechsel(2,Bild3_std)">
<img src="http://forum.jswelt.de/bilder/bild3_std.jpg" width="150" height="75" />
</a>
</div>
</div>
</body>
</html>Ich danke schonmal im Vorraus !:icon7:
Liebe Grüsse Charlie
Zuletzt bearbeitet von einem Moderator:
