.class abfragen und onmouseover ändern @ tutorials.de: Tutorials, Forum & Hilfe

juliusk · 16.05.08 21:29

Guten Abend.

Folgender Wunsch:
Ich möchte auf eine komplette Seite bezogen
onMouseOver dem jeweiligen Element einer Klasse
eine andere Klasse zuweisen und onMouseOut
wieder zurück. Also im Prinzip das hier

Code :

1
2
3

class="nichtOver" 
onMouseOver="this.className='jetztOver'"; 
onMouseOut="this.className='nichtOver'";

aber mit einer globalen Funktion auf alle Elemente
der Klasse angewandt. Ist die Frage verständlich?
Ich hatte sowas schonmal, bekomme es aber nicht
mehr hin. Kann mir vielleicht jemand weiterhelfen?

Gruß - Julius.

Sven Mintel · 17.05.08 00:00

Moin,

da überwachst du am Besten die beiden Events fürs Dokument.
Da diese Events ja standardmässig "bubblen"...also an Kindelemente vererbt werden, hast du damit automatisch alle Seitenelemente überwacht

Musst dann nur noch ermitteln, was und wer gefeuert hat und dementsprechend den Klassen-Namen zuweisen...

Code :

<script type="text/javascript">
<!--
document.onmouseout=document.onmouseover=function(e)
{
  e=(window.event)?window.event:e;
  o=(window.event)?e.srcElement:e.target;
  o.className=((e.type=='mouseover')?'jetzt':'nicht')+'Over';
}
//-->
</script>

juliusk · 17.05.08 01:25

Nach einiger Bastelei kann ich nun beruhigt einschlafen.

stephanie-cgn · 17.05.08 13:13

Prima. Gute Nacht

Könnt ihr mir denn sagen, wie das weitergeht?
Ich kappier noch nicht genug, um das selber zu schaffen.
die Steph

Sven Mintel · 17.05.08 22:32

Moin

Was geht wie weiter?
Die Eventüberwachung ist so fertig, du musst das Skript nur noch irgendwo in die Seite tun.

Tu kannst dann für alle beliebigen Elemente für die Selektoren .jetztOver und .nichtOver Formate definieren, somit ein Workaround für die Pseudoklasse :hover in Browsern, welche dies nur in Links interpretieren.

Maik · 17.05.08 22:40

Hi,

und hier noch etwas Quellcode zur Verdeutlichung

Code :

<style type="text/css">
.nichtOver { color:red; }
.jetztOver { color:green; }
</style>

Code :

1	<div class="nichtOver">Textbox, die ihre Schriftfarbe beim Überfahren ändert.</div>

stephanie-cgn · 18.05.08 13:21

Sorry, aber bei mir ändert sich da alles. Wild durcheinander.
Die Box immerDefault bleibt nicht. Also die ändert sich auch.

Code :

 
<html>
 
<head>
 
<script type="text/javascript">
<!--
document.onmouseout=document.onmouseover=function(e)
{
  e=(window.event)?window.event:e;
  o=(window.event)?e.srcElement:e.target;
  o.className=((e.type=='mouseover')?'jetzt':'nicht')+'Over';
}
//-->
</script>
 
<style type="text/css">
<!--
.nichtOver { color:red; }
.jetztOver { color:green; }
-->
</style>
 
</head>
 
<body>
 
<br><div class="nichtOver">Textbox rot-grün-rot</div>
<br><div>Textbox immerDefault</div>
 
</body>
 
</html>

Und ich versteh noch nicht, wie ich damit mehrere
unterschiedliche Klassen bedienen kann.
Also so wie auf die Klassen jetztOver zu nichtOver mit Rot zu Grün
und dann auf die Klassen mitMaus zu ohneMaus mit blau zu gelb.

Aber das krieg ich nicht hin.
Bin ich jetzt richtig doof oder hänge ich nur grad?

Sven Mintel · 18.05.08 23:15

Hat ja auch niemand behauptet, dass sie sich nicht ändern würde....sämtliche Seitenelemente werden von der Funktion erfasst.

Hier mal das Ganze mit ner kleinen Änderung diesbetreffend...es werden jetzt nur noch Elemente berücksichtigt, welche als Klassennamen jetztOver oder nichtOver haben

Code :

<script type="text/javascript">
<!--
document.onmouseout=document.onmouseover=function(e)
{
  
  e=(window.event)?window.event:e;
  o=(window.event)?e.srcElement:e.target;
  if(o.className.match(/(jetzt|nicht)Over/))
    {
      o.className=((e.type=='mouseover')?'jetzt':'nicht')+'Over';
    }
}
//-->
</script>

stephanie-cgn · 19.05.08 12:54

Verstehe. Also zumindest glaub ich das jetzt

Respekt und Dank. Weiß grad nur garnicht, wovon mehr!

stephanie-cgn · 19.05.08 16:29

Wow, das ist ja noch vielbesser als ich dachte!
Jetzt weiß ich auch, warum Du das ganze Dokument

abfragst!

Sven Mintel · 19.05.08 17:22

Na dann viel Spass dabei

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

OnMouseOver value eines Inputs ändern

(Marquee) class ändern

onMouseOver Problem (Hintergrundfarbe ändern)

Textfarbe bei onmouseover ändern

CSS Class ändern per mouse over ?_?

E-Mail:

Abonnieren Abbestellen