Ergebnis 1 bis 4 von 4
  1. #1
    Charliee ist offline Grünschnabel
    registriert
    01-07-2015
    Beiträge
    1

    Brauche bitte hilfe für Javascript Hausaufgabe

    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:
    HTML-Code:
    <!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 !

    Liebe Grüsse Charlie
    Geändert von mikdoe (01-07-2015 um 09:09 Uhr) Grund: Code Tags

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.550

    AW: Brauche bitte hilfe für Javascript Hausaufgabe

    Was genau ist denn deine Frage?
    Einrückungen im Code erhöhen die Les- und Wartbarkeit gewaltig!
    Code Tags hab ich mal ergänzt.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.579

    AW: Brauche bitte hilfe für Javascript Hausaufgabe

    Hausaufgaben solltest du selber lösen. Nur dann lernst du etwas dabei.

    Wenn du konkrete Fragen hast, kannst du sie stellen.

  4. #4
    Avatar von dbarthel
    dbarthel ist offline Haudegen
    registriert
    11-06-2014
    Beiträge
    641

    AW: Brauche bitte hilfe für Javascript Hausaufgabe

    Als Denkanstoß, ohne deine Hausaufgabe jetzt und hier zu lösen,

    Wenn lightbox zum Einsatz kommen soll, dann müsste der Code aber, unter anderem, an den dick, markierten Stellen angepasst werden:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <script src="path/to/lightbox.js"></script>
    <link href="path/to/lightbox.css" rel="stylesheet">
    
    
    <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>
    
    </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)" data-lightbox="roadtrip">
    <img src="http://forum.jswelt.de/bilder/bild1_std.jpg" width="150" height="75" />
    </a>
    </div>
    Außerdem erschließt sich mir auf den ersten Blick jetzt nicht so ganz, wozu die Divs benötigt werden.
    QR-Code scannen, das beste Fachforum für PHP & Javascipt entdecken.


    PS:

    Das Wort 'Kunst' kommt von Können und nicht von Wollen, denn sonst müsste es 'Wunst' heißen.



    שלום

Ähnliche Themen

  1. brauche bitte DRINGEND Hilfe !!!
    Von dobiginga im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 04-12-2014, 09:38
  2. Antworten: 7
    Letzter Beitrag: 28-05-2011, 00:16
  3. brauche bitte hilfe mit lightbox 0.5
    Von fatjay im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 24-02-2009, 16:42
  4. BRauche eure hilfe bitte
    Von Deets im Forum JavaScript
    Antworten: 16
    Letzter Beitrag: 02-11-2004, 15:53
  5. brauche hilfe... bitte!
    Von Heavy_Metal im Forum Serverseitige Programmierung
    Antworten: 7
    Letzter Beitrag: 15-03-2003, 14:37

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •