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

Advertisements

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