Css: Event-Handler auf div-Tag anwenden

Computer: Software & Programmierung HTML & CSS
#1

Hallo,
ich möchte eine per css für ein div-Tag gesetzte Eigenschaft durch einen Event-Handler verändern. Eigentlich eine ganz einfache Sache dachte ich. Ich bin Anfänger und habe bald echt keine Lust mehr.
Jetzt zum Problem.
Ich habe zum Beispiel folgenden div Bereich:
#kasten1
{
background-color:#ccffcc;
position:absolute;
top:220px; left:200px;
visibility:visible;
color:blue;
z-index:4;
}

Dieser Kasten wird jetzt im body des documents benutzt.

Hier steht jetzt jede Menge Text. Kasten 1

Jetzt hatte ich vor durch ein Event Ereignis eines der Eigenschaften zu ändern.
Ich hoffte erst dies direkt beim div-Tag erledigen zu können.
Ungefähr so:

und im div-Tag aufgrerufen, so etwa:

Alles mit leicht verschiedenen Schreibweisen ausprobiert.Kein Erfolg.
Wer kann helfen? Mache ich einen grundsätzlichen Fehler, oder liegt es an der Schreibweise?
Vielen Dank

#2

Hi Klaus,

dein erster Versuch funktioniert doch schon, allerdings fehlt ein Anführungszeichen:

Hier steht jetzt jede Menge Text. Kasten 1

LG, piranja

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#3

Danke, aber es flackert leider
Vielen Dank,
jetzt klappt es.
Allerdings flackert der Bereich meistens sehr stark beim rüberfahren mit der Maus. Ebenfalls mit onMousemove. So ist es eigentlich nicht akzeptabel. Der stabile Zustand ohne flackern kommt zwar auch vor, aber manchmal erst nach ein paar Versuchen. Ich probiere es noch ein bißchen. Falls es nicht klappt, schreibe ich nachher hier den kurzen Code mal rein.
Vielen, vielen Dank

Hi Klaus,

dein erster Versuch funktioniert doch schon, allerdings fehlt
ein Anführungszeichen:

Hier steht
jetzt jede Menge Text. Kasten 1

LG, piranja

#4

es flackert. Hier mit Codebeispiel
Hallo piranja,
ich möchte das ein div-Bereich mittels der Eigenschaften visible und hidden unsichtbar wird bzw. erscheint. Über Event-Handler soll dies verwirklicht werden.
Dein Tipp war richtig.
Leider flackert der div-Bereich. Das heißt, wenn ich mit dem Mauszeiger über den Bereich streiche ist der Bereich mal zu sehen und mal nicht. Dies in schneller Folge. Mit etwas probieren bekommt man auch mal einen stabilen Zustand hin.
Ich habe es mit onMouseover und onMousemove ausprobiert und beiden zusammen.

#kasten1
{
background-color:#ccffcc;
position:absolute;
top:220px; left:200px;
visibility:visible;
color:blue;
width:100; height:150;
}
Hier steht jetzt jede Menge Text. Kasten 1

Danke

Hi Klaus,

dein erster Versuch funktioniert doch schon, allerdings fehlt
ein Anführungszeichen:

Hier steht
jetzt jede Menge Text. Kasten 1

LG, piranja

#5

es flackert, warum? Beispielseite mit Methoden()
Hallo,
leider bleibt der div-Bereich nicht konstant auf ‚hidden‘.
Es flackert zwischen den Eigenschaften hidden und visible.
Ich habe das ganze mal über Methoden, aufgerufen von den Event-Handlern geschrieben. Das ganze ist zu sehen auf einer Testseite:
http://www.thst.de/
Frage, warum flackert Kasten 2 ?
Danke für Eure Mühe

Dieser Artikel bezieht sich auch auf den hier unter. Dort ist der Quelltext allerdings nicht mit Methoden geschrieben. Aber das gleiche Problem.

Hi Klaus,

dein erster Versuch funktioniert doch schon, allerdings fehlt
ein Anführungszeichen:

Hier steht
jetzt jede Menge Text. Kasten 1

LG, piranja

#6

Hi Klaus,
ich muss dich enttäuschen - ich hab’s leider auch nicht hingekriegt.
Vielleicht weiß sonst jemand Rat …?

LG, piranja

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#7

Hi,

Ich hab auch mal ein bisschen rumprobiert,

Wenn man die event handler aus kasten2 nach kasten3 kopiert, flackert es seltsamerweise nicht. Ich mein damit, wenn ich mit der Maus dann auf Kasten3 gehe verschwindet kasten2, wenn ich mit der Maus aus Kasten3 herausfahre erscheint kasten2 wieder. Zeigt zumindest, das es eigentlich so funktionieren müsste.
Ich könnt mir vorstellen, das es daran liegt das die eventhandler das versteckte Objekt „nicht sehen“. Wenn man z.B. Kasten2 gleich beim Laden versteckt passiert gar nichts mehr beim Überfahren des Kastens.
Wenn du also Kasten2 versteckst und dann die Maus bewegst, „reagiert“ der eventhandler onmouseout, da das Objekt „nicht mehr da ist“, die Maus hat sich also „quasi“ aus dem Feld herausbewegt…
Vielleicht gehts, wenn du zwei kästen definierst- einen weissen, etwas größeren im Hintergrund und in diesen die eventhandler reinpackst…

Gruß

Sebastian

#8

Hi, ist zwar etwas umständl. aber so gehts z.B.

#kasten1 {
 LEFT: 10px; VISIBILITY: visible; WIDTH: 210px; COLOR: blue; POSITION: absolute; TOP: 10px; HEIGHT: 265px; BACKGROUND-COLOR: #ffffff; z-index:1;
}
#kasten2 {
 LEFT: 20px; VISIBILITY: visible; WIDTH: 190px; COLOR: blue; POSITION: absolute; TOP: 20px; HEIGHT: 250px; BACKGROUND-COLOR: #ccffcc ;z-index:2;
}


....

 
Kasten 2
Beim rüberfahren
mit der Maus flackert der Kasten. Der onMouseout-Befehl wartet nicht bis zum
verlassen des Bereiches, sondern setzt den Kasten bei jeder Mausbewegung in den
sichtbaren Status.
Warum?

Gruß

Sebastian

#9

Hi Klaus

Ich weiß zwar nicht wie Dein Ergebnis aussehen soll, aber so wie es jetzt ist muß es ja flackern.
Wenn Du mit deiner Maus über Kasten 2 fährt wird der Div auf hidden gesetzt. Aber das zählt nun auch für die Maus. Da die Maus nun nicht mehr über den Kasten 2 ist kommt natürlich sofort der Eventhandler onMouseout zum tragen und der Kasten ist wieder da. Bewegst Du nun die Maus …
Aber wann soll denn der Kasten2 nun Da sein und wann nicht?

CU Fr@nkie

The Truth Is Out There … ;o)