# Events ```js $('img').on("click", randHinzufügen) function randHinzufügen() { $(this).css({"border": "5px solid blue"}) } ``` # Aufgabe 0 Baue auf deiner Website ein, dass ein Klick auf den Titel die Nachricht "Willkommen" anzeigt. # Aufgabe 1 Baue auf deiner Website ein, dass wenn der Benutzer auf die Überschrift klickt, sich die Textfarbe der Überschrift auf rot ändert # Aufgabe 2 Verändere den Code der Aufgabe 1 so, dass es reicht, die Maus über die Überschrift zu bewegen, um diese zu färben. Dazu kannst du statt 'click' das Ereignis 'mouseover' verwenden. # Aufgabe 2.5 Erweitere deinen Code so, dass sich der Titel wieder zurückstellt, sobald man mit der Maus den Bereich des Titels wieder verlässt. Dazu kannst du das Ereignis 'mouseout' verwenden. # Aufgabe 3 Baue auf deiner Website ein, dass Bilder standardmässig einen Unschärfefilter besitzen. Das kannst du mit dem folgenden CSS-Code erreichen ```css img { filter: blur(20px); } ``` Wenn man nun mit der Maus auf ein Bild klickt, soll dieses scharf werden. # Aufgabe 4 Letzte Woche hast du programmiert, dass man die Hintergrundfarbe der Website selber wählen kann. Erweitere den Code nun so, dass ein Doppelklick (Ereignis: `dblclick`) auf ein beliebiges Element dich nach einer Farbe fragt und dem Element diese Hintergrundfarbe gibt. # Aufgabe 5 Baue auf deiner Website einen Feedbackbutton ein, der verschwindet, wenn man mit der Maus drüberfährt. Um den Button zu verstecken kannst du die CSS-Regel `display: none` verwenden. # Aufgabe 6 Füge am unteren Ende deiner Website eine Schaltfläche ein, die an den Seitenanfang scrollt: [Beispiel](https://www.computerhope.com/issues/ch001475.htm). Baue JS-Code ein, der die Schaltfläche nur anzeigt, wenn man mehr als 100 Pixel nach unten gescrollt ist. Du kannst dafür den `scroll`-Event verwenden und du kannst die aktuelle Scrollposition mit `$(window).scrollTop()` herausfinden. # Aufgabe 7 Baue Code ein, der bei einem Druck auf die Taste <kbd>&UpArrow;</kbd> alle Bilder vergrössert und bei einem Druck auf <kbd>&DownArrow;</kbd> alle verkleinert.