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

HTML EDITORen im Kurztest

Heute sind zwei HTML-Editoren im Test, die ich auch selber sehr gerne nutze. Beide Varianten sind kostenlos. Die Downloadlinks findet ihr weiter unten. Los geht’s!

Aptana

Bietet eine vollen Funktionsumfang für HTML, CSS3, Javascript, PHP und vieles mehr an. Mit mehr als 6-Millionen Downloads ist das Programm auch einer der beliebtesten HTML-Editoren. 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