onclick Feld für Farbe merken

[Adolfó]

Hallo,

ich habe ein Script welches sich beim onclick Event die Hintergrundfarbe rot darstellen soll.

Ich weiß nicht wie ich die Farbe rot merken soll? Mein Problem ist wenn ich den nächsten click mache ist das nächste Feld auch rot aber es soll nur das letzte aktive Feld rot makiert bleiben.

Bei dieser Version ist beim onmouseout die Frabe rot wieder verschwunden. Mein Problem ist ich weiß nicht wie ich beim onmouseout die aktuelle Farbe merken soll und beim nächsten Klick wieder alle anderen wieder lösche?

Was muss ich machen damit es geht? Ich versteh das nicht mehr... :(

So sieht mein Scipt aus:

var aktiv=false;
   function ChangeCol(tab,color,zustand)
   {

if (zustand == true)
    {
    color = 'red';
    }

document.getElementById(tab).style.cursor='hand';

if(tab.id!=aktiv)
     {
     document.getElementById(tab).style.backgroundColor = color;
     }

}

</script>

<table>
   <tr style="background: #cccccc;" onclick="ChangeText('tab1','111'); ChangeLink('tab1','?auswahl=rechnungsdruck&bestell_nr=1'); ChangeCol('tab1','red','j')"
            onmouseover="ChangeCol('tab1','green')"
            onmouseout="ChangeCol('tab1','#cccccc')">
    <td id="tab1">
    1111
    </td>
   </tr>
   <tr style="background: #cccccc" onclick="ChangeText('tab2','222'); ChangeLink('tab2','?auswahl=rechnungsdruck&bestell_nr=2');ChangeCol('tab2','red','j')"
           onmouseover="ChangeCol('tab2','green')"
            onmouseout="ChangeCol('tab2','#cccccc')">
    <td id="tab2">
    2222
    </td>
   </tr>
   <tr style="background: #cccccc;" onclick="ChangeText('tab3','333'); ChangeLink('tab3','?auswahl=rechnungsdruck&bestell_nr=3');ChangeCol('tab3','red','j')"
            onmouseover="ChangeCol('tab3','green')"
            onmouseout="ChangeCol('tab3','#cccccc')">
    <td id="tab3">
    3333
    </td>
   </tr>
   </table>

[XaraX]

Hallo Adolfó,

ich habe ein Script welches sich beim onclick Event die Hintergrundfarbe rot darstellen soll.

Das wäre mit onClick="this.style.backgroundColor='red'" schon mal abgehandelt.

Ich weiß nicht wie ich die Farbe rot merken soll? Mein Problem ist wenn ich den nächsten click mache ist das nächste Feld auch rot aber es soll nur das letzte aktive Feld rot makiert bleiben.

Das brauchst Du Dir nicht zu merken. Mache einfach eine Abfrage:

for(i=0;document.getElementsByTagName('table')[0].getElementsByTagName('td')[i];i++)
   {
   if(document.getElementsByTagName('table')[0].getElementsByTagName('td')[i].style.backgroundColor=='red')
      document.getElementsByTagName('table')[0].getElementsByTagName('td')[i].style.backgroundColor=='#ccc'
   }

Oder aber speichere den Parameter "tab" in

function ChangeCol(tab,color,zustand)
   {
   document.getElementById('merke_dir').style.backgroundColor='#ccc';
   var merke_dir=tab;
   // [...]
   }

ab!

Bei dieser Version ist beim onmouseout die Frabe rot wieder verschwunden. Mein Problem ist ich weiß nicht wie ich beim onmouseout die aktuelle Farbe merken soll und beim nächsten Klick wieder alle anderen wieder lösche?

Variablen sind anders als bei anderen Scripteleien in Javascript soetwas von global, das man sie einer Funktion nicht zu übergeben braucht. Dazu bedarf es dann einer zweiten Funktion, die var merke_dir nicht editiert:

function mouseoutColor(tab,color,zustand)
   {
   if(merke_dir==tab)   document.getElementById('tab').style.backgroundColor='red';
   else                 document.getElementById('tab').style.backgroundColor='#ccc';

Hoffentlich habe ich das alles richtig verstanden.
Gruß aus Berlin!
eddi

[Adolfó]

Das brauchst Du Dir nicht zu merken. Mache einfach eine Abfrage:

[...]

Oder aber speichere den Parameter "tab" in

function ChangeCol(tab,color,zustand)
   {
   document.getElementById('merke_dir').style.backgroundColor='#ccc';
   var merke_dir=tab;
   // [...]
   }

ab!

Bei dieser Version ist beim onmouseout die Frabe rot wieder verschwunden. Mein Problem ist ich weiß nicht wie ich beim onmouseout die aktuelle Farbe merken soll und beim nächsten Klick wieder alle anderen wieder lösche?

Variablen sind anders als bei anderen Scripteleien in Javascript soetwas von global, das man sie einer Funktion nicht zu übergeben braucht. Dazu bedarf es dann einer zweiten Funktion, die var merke_dir nicht editiert:

function mouseoutColor(tab,color,zustand)
   {
   if(merke_dir==tab)   document.getElementById('tab').style.backgroundColor='red';
   else                 document.getElementById('tab').style.backgroundColor='#ccc';

Hallo,

ich verstehe nicht was Du mir sagen willst ich brauch mir die Farbe nicht merken? Ok so weit so gut.

In Deinem code gibt es die document.getElementById('merke_dir').style.backgroundColor='#cccccc';

merke_dir Variable ja aber die gibt es in meinem code gar nicht.

Den Code mit der forschleife kann ich gleich vergessen weil der Code später für meinen eigentlichen Code nicht mehr zu gebrauchen ist. Deswegen habe ich den code hinter dem oder genommen nur weiß ich nicht was Du mir damit sagen willst?

[Adolfó]

Ich habe das nun so gemacht nur weiß ich nicht was oder wie ich nun merke_dir function mouseoutColor übergeben soll. Ich weiß schon wie ich Paramter in funktionen übergebe aber in dem Fall komme ich nicht dahinter?

[...]
   var aktiv=false;
   function ChangeCol(tab,color)
   {

document.getElementById('merke_dir').style.backgroundColor='#cccccc';
      var merke_dir=tab;

document.getElementById(tab).style.cursor='hand';

if(tab.id!=aktiv)
     {
     document.getElementById(tab).style.backgroundColor = color;
     }

}

function mouseoutColor(tab,color)
      {
      if(merke_dir==tab)
   {
    document.getElementById('tab').style.backgroundColor='red';
   }
      else
   {
    document.getElementById('tab').style.backgroundColor='#cccccc';
   }

</script>

<table>
   <tr style="background: #cccccc;" onclick="ChangeText('tab1','111'); ChangeLink('tab1','?auswahl=rechnungsdruck&bestell_nr=1'); this.style.backgroundColor='red'"
            onmouseover="ChangeCol('tab1','green')"
            onmouseout="mouseoutColor('tab1','#cccccc')">
    <td id="tab1">
    1111
    </td>
   </tr>
   <tr style="background: #cccccc" onclick="ChangeText('tab2','222'); ChangeLink('tab2','?auswahl=rechnungsdruck&bestell_nr=2'); this.style.backgroundColor='red'"
           onmouseover="ChangeCol('tab2','green')"
            onmouseout="mouseoutColor('tab2','#cccccc')">
    <td id="tab2">
    2222
    </td>
   </tr>
[...]

[XaraX]

Hallo Adolfó,

Ich habe das nun so gemacht nur weiß ich nicht was oder wie ich nun merke_dir function mouseoutColor übergeben soll.

wer sagt, das Du sie der Funktion mouseoutColor übergeben sollst/mußt? "...Variablen sind anders als bei anderen Scripteleien in Javascript soetwas von global, das man sie einer Funktion nicht zu übergeben braucht..."
Bitte wenigstens die Mühe machen und mitdenken!

[...]
   var aktiv=false;

absolut unnöttig!

function ChangeCol(tab,color)
   {

document.getElementById('merke_dir').style.backgroundColor='#cccccc';
      var merke_dir=tab;

document.getElementById(tab).style.cursor='hand';

if(tab.id!=aktiv)

if(tab.id)

{
     document.getElementById(tab).style.backgroundColor = color;
     }

}

function mouseoutColor(tab,color)
      {
      if(merke_dir==tab)
   {
    document.getElementById('tab').style.backgroundColor='red';
   }
      else
   {
    document.getElementById('tab').style.backgroundColor='#cccccc';
   }

</script>

<table>
   <tr style="background: #cccccc;" onclick="ChangeText('tab1','111'); ChangeLink('tab1','?auswahl=rechnungsdruck&bestell_nr=1'); this.style.backgroundColor='red'"
            onmouseover="ChangeCol('tab1','green')"
            onmouseout="mouseoutColor('tab1','#cccccc')">
    <td id="tab1">
    1111
    </td>
   </tr>
   <tr style="background: #cccccc" onclick="ChangeText('tab2','222'); ChangeLink('tab2','?auswahl=rechnungsdruck&bestell_nr=2'); this.style.backgroundColor='red'"
           onmouseover="ChangeCol('tab2','green')"
            onmouseout="mouseoutColor('tab2','#cccccc')">
    <td id="tab2">
    2222
    </td>
   </tr>
[...]

Gut... Ausgehend von Deinem Ausgangsposting, was nicht wirklich eindeutig Dein Problem beschreibt, habe ich Dir versucht zwei Wege aufzuzeigen, die aber meinerseits wohl ebensowenig verständlich waren.

Also zum Verständnis:

Du möchtest durch onMouseOver() und onMouseout() einen Efekt erzeugen, der a:hover ent-
   spricht und den Hintergrund farblich verändert. Weiterhin willst Du durch onClick() der
   angewählten Tabellenzelle einen festen Farbwert zuordnen. Dieser soll vorrübergehend
   beim Event onMouseover auf einen anderen Farbwert geändert und dauerhaft - durch
   onClick() auf eine andere Tabellenzelle - auf den default-Wert zurückgesetzt werden.

Das Abfragen von CSS-Eigenschaften durch Zugriff auf das style-Objekt:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function mach()
 {
 for(i=0;i<100;i++)
  {
  document.getElementsByTagName("body")[0].innerHTML=document.getElementsByTagName("body")[0].innerHTML+'<div onClick="farbe(this)">'+i+'</div>'
  }
 }
function farbe(v)
 {
 for(i=0;i<100;i++)
  {
  if(document.getElementsByTagName("div")[i].style.backgroundColor=='red') document.getElementsByTagName("div")[i].style.backgroundColor='transparent'
  }
 v.style.backgroundColor='red'
 }
</script>
</head>
<body onLoad="mach()">
</body>
</html>

Bei diesem Beispiel ist es egal, welches Element des Dokuments 'red' als Hintergrund hat. Es werden alle 100 <div> auf Übereinstimmung geprüft. Da  die Farbe aber auch im onMouseover-Fall geändert werden soll, hast Du ja folgerichtig erkannt, daß for() in diesem Beispiel Dir nicht weiter helfen kann.
Daher ist es wohl besser die ID des Elements in einer Variablen (var merke_dir) zu fixieren (Was Du in Deinem geposteten Code schlichtweg vergessen hast - ergo: läuft nicht), um es für die von onMouseout aufgerufenen Funktion vergügbar zu machen. Allerdings ist mir nun noch eine bessere Möglichkeit eingefallen:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function mach()
 {
 for(i=0;i<100;i++)
  {
  document.getElementsByTagName("body")[0].innerHTML=document.getElementsByTagName("body")[0].innerHTML+'<div onClick="farbe(this)" onMouseover="hover(this)" onMouseout="mouseoutColor(this)">'+i+'</div>'
  }
 }
function farbe(v)
 {
 if(document.getElementById("red"))
  {
  document.getElementById("red").style.backgroundColor='transparent'
  document.getElementById("red").id=''
  }
 v.id='red'
 document.getElementById("red").style.backgroundColor='red'
// Aufruf Deiner anderen Funktionen
 }
function hover(v)
 {
 v.style.backgroundColor='#eee'
// Aufruf Deiner anderen Funktionen
 }
function mouseoutColor(v)
 {
 if(v.id=='red') v.style.backgroundColor='red'
 else  v.style.backgroundColor='transparent'
// Aufruf Deiner anderen Funktionen
 }
</script>
</head>
<body onLoad="mach()">
</body>
</html>

Dabei wird ledigleich abgeglichen, ob die ID 'red' ist; und damit Du nicht solche Mehrfachaufrufe in den Events hast, schreibe doch wie oben die Aufrufe in die Funktionen farbe(), hover() und mouseoutColor() direkt hinein.
Desweiteren nutze einfach this - damit ist die Vergabe von IDs im hartencodierten HTML überflüssig.

Gruß aus Berlin!
eddi

[Struppi]

Ich weiß nicht wie ich die Farbe rot merken soll? Mein Problem ist wenn ich den nächsten click mache ist das nächste Feld auch rot aber es soll nur das letzte aktive Feld rot makiert bleiben.

Du kennst die CSS Pseudoklassen :hover, :active?
Die machen im Prinzip genau das was du willst ohne irgendwelche Skripte.

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm

Struppi.

[Adolfó]

Hallo Strupi

Du kennst die CSS Pseudoklassen :hover, :active?
Die machen im Prinzip genau das was du willst ohne irgendwelche Skripte.

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm

Nein darauf bin ich noch nicht gekommen! Das :hover, :active kann ich auch auf einen ganzen <tr> Tag legen?

Wobei das andere wüßte ich auch gerne wenn ich schon mal so weit bin...

Aber das mit den :hover, :active scheint effektiver zu sein - weniger Code

[Adolfó]

Hallo Strupi

Das wird bei mir nicht gehen weil ich in den <tr> Bereich kein <a href=...> gesetzt habe und alle anderen Anker sollen von der Formatierung unberührt bleiben.

Ich muß das irgendwie mit ID lösen... Nur wie?

[Struppi]

Das wird bei mir nicht gehen weil ich in den <tr> Bereich kein <a href=...> gesetzt habe und alle anderen Anker sollen von der Formatierung unberührt bleiben.

seh ich auch gerade, du solltest aber eine so wichtige Funktionalität wie einen Link nicht mit JS lösen, da der IE im Internet ohne JS genutzt werden sollte und die viele diesen unsicheren Browser noch nutzen.

Ich muß das irgendwie mit ID lösen... Nur wie?

Mach einen Link in die Zelle und deklarier diese Links mit display:block zu Blockelementen. Dann klappts auch mmit dem IE.

Struppi.

[Adolfó]

Hallo Struppi

seh ich auch gerade, du solltest aber eine so wichtige Funktionalität wie einen Link nicht mit JS lösen, da der IE im Internet ohne JS genutzt werden sollte und die viele diesen unsicheren Browser noch nutzen.

Ich weiß das aber der Kunde wünscht es so, das heißt diese Funktion wird nur im Admin Bereich sichtbar sein.

Ich muß das irgendwie mit ID lösen... Nur wie?

Mach einen Link in die Zelle und deklarier diese Links mit display:block zu Blockelementen. Dann klappts auch mmit dem IE.

Wieso soll ich display:block nehmen ? Das Blockelement erspart mir das <br> aber was willst Du mir nun damit sagen?

Gruß  Adolfó

[Struppi]

seh ich auch gerade, du solltest aber eine so wichtige Funktionalität wie einen Link nicht mit JS lösen, da der IE im Internet ohne JS genutzt werden sollte und die viele diesen unsicheren Browser noch nutzen.

Ich weiß das aber der Kunde wünscht es so, das heißt diese Funktion wird nur im Admin Bereich sichtbar sein.

Und dein Kunde hat mehr Ahnung als du?

Es ist ja letztlich keine Funktionalität die man nicht ohne JS genauso erreichen könnte, d.h. du nutzt eine unsichere Technik um weniger Benutzer eine Funktion zu Verfügung zu stellen, die (zumindest soweit ich dein Beispiel überblicke) auch ohne diese Technik realisierbar wäre?

Das halte ich für einen Konzeptfehler, zumal er dir noch zusätzliche Arbeit macht.

Mach einen Link in die Zelle und deklarier diese Links mit display:block zu Blockelementen. Dann klappts auch mmit dem IE.

Wieso soll ich display:block nehmen ? Das Blockelement erspart mir das <br> aber was willst Du mir nun damit sagen?

Nein, <br> ist ein Zeilenumbruch, wenn du den Link zu einem Blockelement machst wird er auf die ganze Zelle ausgedehnt.

<tr>
<td>
<a href="xxx">Link</A>
</td>
</tr>

CSS:

td a:link{ display:block;}
td a:hover{ color:#fff;}
td a:focus{ background-color:#ccc;}

Struppi.

[Adolfó]

Hallo

ich hatte bereits schon eine nicht JavaScript konforme Lösung.
Nur ich war hier wohl mit meiner JavaScript Lösung auf den falschen Wege... Ok dann war meine JavaScript Lösung eine schöne nette Übung.

Aber wie ich sehe geht es auch einfacher. Man muss es auch nur erstmal Wissen! Ich habe schon überall gesucht wie ich es wohl machen kann und unter anderem auch hier im Forum nach gefragt wie man es wohl lösen kann?

Ich wußte auch nicht das ich td mit a:link kombinieren kann ich dachte immer das muss so aussehen: a:link

In selfhtml geht dies auch nicht so deutlich hervor.

Kannst Du mir evtl. noch einen Link geben wo ich mir das alles nochmals genau nachlesen kann, wo die CSS Techniken genauer erläutert wird.

<tr>
<td>
<a href="xxx">Link</A>
</td>
</tr>

CSS:

td a:link{ display:block;}
td a:hover{ color:#fff;}
td a:focus{ background-color:#ccc;}

Ich habe das so ausprobiert und das funktioniert! Und alles total einfach da brauch ich mir auch nun kein Kopf mehr zerbrechen :)

Und in welchen Browsern läuft die Technik? Gehört das zu CSS1 CSS2 oder CSS3 das ist ja auch wichtig oder nicht?

Gruß Adolfó

[Struppi]

Nur ich war hier wohl mit meiner JavaScript Lösung auf den falschen Wege... Ok dann war meine JavaScript Lösung eine schöne nette Übung.

und davon kann man ja nicht genug bekommen ;-)

Ich wußte auch nicht das ich td mit a:link kombinieren kann ich dachte immer das muss so aussehen: a:link

In selfhtml geht dies auch nicht so deutlich hervor.

http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente

Kannst Du mir evtl. noch einen Link geben wo ich mir das alles nochmals genau nachlesen kann, wo die CSS Techniken genauer erläutert wird.

Das kommt ganz darauf an, was du weißt.
Ein Einstieg ist, alles lesen was in selfhtml steht (ich muss aber zugeben, dass ich auch eher probiere als zu lesen).

Aber vielleicht hilft dir auch das:
http://www.bjoernsworld.de/css/grundlagen.html
http://jendryschik.de/wsdev/einfuehrung/css/

http://css.maxdesign.com.au/index.htm

Ich habe das so ausprobiert und das funktioniert! Und alles total einfach da brauch ich mir auch nun kein Kopf mehr zerbrechen :)

Und in welchen Browsern läuft die Technik? Gehört das zu CSS1 CSS2 oder CSS3 das ist ja auch wichtig oder nicht?

Ohje nach den Spezifikationen darfst du mich nicht fragen (wenn du Lust hast w3c.org ist die Quelle für sowas).

Wie schon gesagt.

td:hover
td:focus

läuft in allen Browsern (die die Pseudoklassen kennen) ausser dem IE
Der workaround mit dem display block ist also lediglich für den IE notwendig, wobei der im IE 4 nicht funktioniert.

Struppi.

[Adolfó]

Und in welchen Browsern läuft die Technik? Gehört das zu CSS1 CSS2 oder CSS3 das ist ja auch wichtig oder nicht?

Ohje nach den Spezifikationen darfst du mich nicht fragen (wenn du Lust hast w3c.org ist die Quelle für sowas).

Wie schon gesagt.

td:hover
td:focus

läuft in allen Browsern (die die Pseudoklassen kennen) ausser dem IE
Der workaround mit dem display block ist also lediglich für den IE notwendig, wobei der im IE 4 nicht funktioniert.

Hallo Struppi,

ok soweit so gut das was ich für heute schaffen wollte geht wohl heute in die Hose... Aber dafür bessere ich mein Wissen auf, was mir für die Zukunft einiges an Arbeit erleichtert!

Kurz Frage noch was verstehst Du unter Pseudoklassen ?

zB. dies hier? td:hover

oder p:hover

Und Pseudoklassen gibt es bei allen Browsern ausser bei dem IE nicht?
Und was sollen dann die richtigen CSS Klassen in CSS sein?

Die links werde ich mir nun reinziehen mal schauen was ich schon weiß und was nicht... Finde ich auf Deiner Seite auch noch gute Erklärungen?

[Struppi]

ok soweit so gut das was ich für heute schaffen wollte geht wohl heute in die Hose... Aber dafür bessere ich mein Wissen auf, was mir für die Zukunft einiges an Arbeit erleichtert!

Kurz Frage noch was verstehst Du unter Pseudoklassen ?

zB. dies hier? td:hover

oder p:hover

Hab ich Pseudoklassen gesagt?
Das war falsch es muss heißen Pseudoformate, das wird in selfhtml relativ kurz und gut erklärt http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm

Und Pseudoklassen gibt es bei allen Browsern ausser bei dem IE nicht?
Und was sollen dann die richtigen CSS Klassen in CSS sein?

Es sind Quasi Erweiterungen der entsprechenden Elemente.

So drückt es selfhtml aus:
"Pseudoformate können Sie für HTML-Bestandteile definieren, die sich jedoch nicht durch ein eindeutiges HTML-Element ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der "erste Buchstabe eines Absatzes". Zum Definieren solcher Pseudoformate gibt es eine spezielle Syntax."

Struppi.

[Struppi]

Du kennst die CSS Pseudoklassen :hover, :active?
Die machen im Prinzip genau das was du willst ohne irgendwelche Skripte.

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm

du solltest dir auch :focus angucken, ich weiß mnicht was dir leiber ist.

Nein darauf bin ich noch nicht gekommen! Das :hover, :active kann ich auch auf einen ganzen <tr> Tag legen?

Ja mit allen Browser die das können, bis auf eine Ausnahme, der IE kann Pseudoklassen nur auf Links.

Struppi.