cropped-blogger6.jpg

HTML5, CSS3 und Javascript Erklärungen und Beispiele, zum selber nachbauen. Wer mitmachen möchte, kann mir gerne schreiben, ich würde mich über Unterstützer freuen!

Div hover oder click und Ausgabe in anderem Div

Heute geht es um die Ansteuerung eines <div> Elementes per javascript, um damit in einem anderem <div2> Element das Hintergrundbild oder die Hintergrundfarbe zu ändern.

Zu erst müssen wir ein HTML Gerüst erstellen. Hier erstellen wir zwei <div> Elemente, eins für die spätere Ausgabe und eins für die Funktion, beide werden mit einer „id“ ausgewiesen. Die Funktionen können hier beispielsweise lauten: „onclick“, also bei Maus drücken oder „onmouseover“, also beim herüberfahren mit der Maus. Wir schreiben also in das <div> Element z.B. onclick=“beimDruecken ();“ oder onmouseover=“beimHerueberfahren ();“

Somit könen wir im Javascript die Funktion ansprechen und entsprechend bearbeiten.
Dazu ein Beispeil:


<div id="druecken"  onclick="beimDruecken ();">
<div id="output" style="width: 350px; height: 250px; border: 1px solid #000;"> </div>

Weiterlesen

Transition Color

Transition ist ein beliebtes Styleelement unter HTML5 und CSS3. Älter Browser unterstützen die Funktion leider nicht mehr. Dort wird dann ein einfacher hover-Effekt angezeigt, statt der Transition-Animation.

In diesem Fall möchten wir Transition für die Animation von Textfarbverläufen erklären.

Mit transition:color sprechen wir die Farbe an und können mit der dahinter folgenden Zeitangabe die Effektlänge einstellen. Das dies jedoch funktioniert, müssen wir den Text oder Link mit einem :hover versehen. Erst dann wird der Effekt sichtbar.

CSS3 Code

a{  
  color:#000000;
  text-decoration:none;
}

a:hover{
  color:#ffff00; 
  transition:color 300ms;
}

Beispiel (einfach kopieren und in eure Seite einfügen):

<a href="http://www.sourcecodeblogger.wordpress.com/">Link</a>

Beispiel online