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>

oder


<div id="beiHover"  onmouseover="beimHerueberfahren ();">
<div id="output" style="width: 350px; height: 250px; border: 1px solid #000;"> </div>

Jetzt muss die entsprechende Javascript-Funktion in der HTML Vorlage angesprochen werden. Dazu öffnen wir ein <script> und fügen darin unsere funktion ein. Das kann direkt im HTML-Code geschehen oder auf einer externen Javascript (.js) Datei.

<script> funktion </script>

Kommen wir zur eigentlichen Funktion. Diese wird mit „function“ geöffnet. Anschließend sprechen wir die in der HTML Vorlage gebildetete Funktion an, also function beimDruecken() bzw. function beimHerueberfahren(). Nun können wir mit Hilfe der „id“ die <div> Elemente ansprechen. Dafür nutzen wir die Funktion „documentGetElementById“!
Ein Beispiel

function beimDruecken()
{
document.getElementById('druecken')
}

bzw.


function beimHerueberfahren()
{
document.getElementById('beiHover')
}

Damit der Hintergrund getauscht werden kann, muss nach dem lesen der „id“ des ersten <div> Elementes, die Ausgabe in das zweite <div> Element verlegt werden.  Hierfür nutzen wir wieder die Funktion „documentGetElementById“ und fügen hinten noch einen Zusatz ein, so dass in dem zweiten <div> Element der Hintergrund bzw. die Hintergrundfarbe getauscht wird.
Beispiel

function beimHerueberfahren()
{
  if (document.getElementById('beiHover')){
  document.getElementById("output").style.backgroundImage="url('http://webcamsdemexico.net/cancun1/live.jpg')";
 }
}

bzw. für das ändern der Hintergrundfarbe

function beimHerueberfahren()
{
  if (document.getElementById('beiHover')){
  document.getElementById('output2').style.backgroundColor='grey';
  }
}

Nun können wir dynamisch den Hintergrund einer zweiten Div Box ändern, versucht es selber in der Demo zum bearbeiten!

Gesamtes Beispiel online

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s