nicht angemeldet
SPALTE farbig abhängig von Mausposition
0 0 0 0 0 0
0
SPALTE farbig abhängig von Mausposition
Hallo zusammen,
im Intranet lasse ich via PHP eine Tabelle mit über 1200 kleinen Zellen generieren. <TH> und Spalte 1 enthalten entsprechende Zeilen- und Spaltenköpfe, der Rest repräsentiert eine Matrix aus diesen.
Zur besseren Navigation in der Tabelle möchte ich die jeweilige Zeile und Spalte unter dem Mauszeiger farbig hervorheben. Mit der Zeile ist das kein mit CSS und tr.normal {background-color:#FFFFFF}; kein Problem. Wie könnte ich soetwas mit der Spalte realsieren?
Durch das Intranet bin in der glücklichen Lage einheitlich den IE6 vorzufinden und habe alle Möglichkeiten der Server- oder Clientkonfiguration. Ein onclick-Lösung ist ebenso denkbar wie eine mouseover-Geschichte.
Hat jemand einen Lösungsansatz?
Grüße
Rolf
-
Hallo Rolf Bensch,
ein Ansatz wäre es, allen Zellen eindeutige IDs zu verpassen, z.B. z[zeilennr.]s[spaltennr.], konkret also z.B. z3s10 (für die 10. Spalte der 3. Zeile). Dann könntest du bei MouseOver eine JS-Funktion aufrufen, der du als Parameter this.id übergibst. In der Funktion gehst du dann mittels For-Schlaufe alle TD-Elemente durch und veränderst bei jenen, welche in der gleichen Spalte wie die gehoverte stehen (also gleiche Zahl nach dem s haben), die Hintergrundfarbe.
Wie performant das ganze bei 1200 Zellen ist, weiss ich spontan leider nicht. Vielleicht hilfts aber als Ansatz.
Gruss aus Luzern,
Daniel -
Hallo,
Zur besseren Navigation in der Tabelle möchte ich die jeweilige Zeile und Spalte unter dem Mauszeiger farbig hervorheben. Mit der Zeile ist das kein mit CSS und tr.normal {background-color:#FFFFFF}; kein Problem. Wie könnte ich soetwas mit der Spalte realsieren?
Eine Lösungsmöglichkeit wäre, alle TD-nodes in der Tabelle in einem JavaScript-Object zu sammeln, deren omouseover und onmouseout Eigenschaften zu setzen und dann auszuwerten.
Diskussionsgrundlage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabelle mit hover</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
th, td {width:100px;}
-->
</style>
<script type="text/javascript">
<!--
var rows = null;
var cells = new Object();function getMyTable() {
var tab = document.getElementById("myTable");
rows = tab.getElementsByTagName("TR");
cells["c0"] = new Array();
cells["c1"] = new Array();
cells["c2"] = new Array();
cells["c3"] = new Array();
for (var i=1; i<rows.length; i++) {
cells["c0"][i] = rows[i].getElementsByTagName("TD")[0];
cells["c0"][i].row = i;
cells["c0"][i].col = 0;
cells["c0"][i].onmouseover = function() {crossoverOver(this)};
cells["c0"][i].onmouseout = function() {crossoverOut(this)};cells["c1"][i] = rows[i].getElementsByTagName("TD")[1];
cells["c1"][i].row = i;
cells["c1"][i].col = 1;
cells["c1"][i].onmouseover = function() {crossoverOver(this)};
cells["c1"][i].onmouseout = function() {crossoverOut(this)};cells["c2"][i] = rows[i].getElementsByTagName("TD")[2];
cells["c2"][i].row = i;
cells["c2"][i].col = 2;
cells["c2"][i].onmouseover = function() {crossoverOver(this)};
cells["c2"][i].onmouseout = function() {crossoverOut(this)};cells["c3"][i] = rows[i].getElementsByTagName("TD")[3];
cells["c3"][i].row = i;
cells["c3"][i].col = 3;
cells["c3"][i].onmouseover = function() {crossoverOver(this)};
cells["c3"][i].onmouseout = function() {crossoverOut(this)};
}
}
function crossoverOver(obj) {
var r = obj.row;
var c = obj.col;
for (var i=1; i<rows.length; i++) {
cells["c"+c][i].style.backgroundColor="red";
}
for (var i=0; i<4; i++) {
cells["c"+i][r].style.backgroundColor="red";
}
}
function crossoverOut(obj) {
var r = obj.row;
var c = obj.col;
for (var i=1; i<rows.length; i++) {
cells["c"+c][i].style.backgroundColor="transparent";
}
for (var i=0; i<4; i++) {
cells["c"+i][r].style.backgroundColor="transparent";
}
}
//-->
</script>
</head>
<body onload="getMyTable();">
<table border="1" id="myTable">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>viele Grüße
Axel
-
Hi,
Hat jemand einen Lösungsansatz?
Nur mit Javascript. Verwende eine Id fuer jede Zelle, die sich aus Reihe und Spalte zusammensetzt, z. B. "td_1_1". Merke Dir die maximale Anzahl von Reihen/Spalten. Rufe onmouseover eine Funktion, der Du Reihen,- und Spaltennummer uebergibst (all diese Dinge lassen sich ja problemlos beim dynamischen erzeugen einer Tabelle einsetzen). Lasse nun eine Schleife bis zur maximalen Anzahl Reihen ueber alle id's mit der uebergebenen Spaltennummern laufen.
Die Reihe kannst Du ja mit einem eigenen Mouseover versehen und komplett wechseln, dass spart Dir die Schleife ueber alle Spalten in einer Reihe.Gruesse, Joachim
--
Am Ende wird alles gut.-
Hallo Joachim,
Hat jemand einen Lösungsansatz?
Nur mit Javascript. Verwende eine Id fuer jede Zelle, die sich aus Reihe und Spalte zusammensetzt, z. B. "td_1_1". Merke Dir die maximale Anzahl von Reihen/Spalten. Rufe onmouseover eine Funktion, der Du Reihen,- und Spaltennummer uebergibst (all diese Dinge lassen sich ja problemlos beim dynamischen erzeugen einer Tabelle einsetzen). Lasse nun eine Schleife bis zur maximalen Anzahl Reihen ueber alle id's mit der uebergebenen Spaltennummern laufen.
Die Reihe kannst Du ja mit einem eigenen Mouseover versehen und komplett wechseln, dass spart Dir die Schleife ueber alle Spalten in einer Reihe.Da geht das mit PHP und CSS wesentlich besser, als wenn man im Nachhinein mit JavaScript die Farbe ändert.
Jede erste Tabellenzelle in einer Zeile bekommt ein Attribut
class="firstCellInLine"
zugewiesen.Mit einer einfachen CSS-Eigenschaft kann man für all diese Tabellenzellen die Farbe (im Beispiel rot) einstellen:
.firstCellInLine{
color:#ff0000;
}Das ist einer nachträglichen Einfärbung mit JavaScript doch wirklich vorzuziehen, und funktioniert auch wenn der User JavaScript deaktiviert hat.
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
--
Linux is like a wigwam - no windows, no gates and an Apache inside!
SELFCode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
http://emmanuel.dammerer.at/selfcode.html-
Hallo Marc,
Die Reihe kannst Du ja mit einem eigenen Mouseover versehen und komplett wechseln, dass spart Dir die Schleife ueber alle Spalten in einer Reihe.
Da geht das mit PHP und CSS wesentlich besser, als wenn man im Nachhinein mit JavaScript die Farbe ändert.
die Lösungsansätze von Joachim und vor allem Axel sind das,
was der OP benötigt. Er will doch nicht bei der Anzeige im
Browser (einheitlich IE!) ständig die Seite neu laden, wenn
er die Maus über eine andere Spalte bewegt. Eine clientseitige
Lösung ist hier genau richtig.Das ist einer nachträglichen Einfärbung mit JavaScript doch wirklich vorzuziehen, und funktioniert auch wenn der User JavaScript deaktiviert hat.
Es ist eine Intranetlösung und der OP hat die volle Kontrolle über
die Clientkonfiguration. Somit stellt Javascript kein Problem dar.
Hier wäre sogar eine Lösung mit VB-Skript denkbar.Freundliche Grüsse,
Vinzenz
-
Hallo Vinzenz,
Da geht das mit PHP und CSS wesentlich besser, als wenn man im Nachhinein mit JavaScript die Farbe ändert.
die Lösungsansätze von Joachim und vor allem Axel sind das,
was der OP benötigt. Er will doch nicht bei der Anzeige im
Browser (einheitlich IE!) ständig die Seite neu laden, wenn
er die Maus über eine andere Spalte bewegt. Eine clientseitige
Lösung ist hier genau richtig.Stimmt, du hast recht. Habe ich mich da doch mal glatt wieder eine eingefangen! ;-)
Mittlerweile habe ich sein Vorhaben auch komplett verstanden, das onmouseover hatte ich leider übersehen.Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
--
Linux is like a wigwam - no windows, no gates and an Apache inside!
SELFCode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
http://emmanuel.dammerer.at/selfcode.html
-
-
Hi,
Da geht das mit PHP und CSS wesentlich besser, als wenn man im Nachhinein mit JavaScript die Farbe ändert.
hm. so wie ich das verstanden habe geht es um einen mouseover Effekt. Da hilft allenfalls hover, aber wie man das mit css ueber eine _Spalte_ (also _mehrere_ unterneinander stehenden tds) realisieren soll... vielleicht irre ich mich auch...
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hallo,
hm. so wie ich das verstanden habe geht es um einen mouseover Effekt. Da hilft allenfalls hover, aber wie man das mit css ueber eine _Spalte_ (also _mehrere_ unterneinander stehenden tds) realisieren soll... vielleicht irre ich mich auch...
Das HTML-Element hierfür existiert. Es könnte gehen, wenn COL:hover akzeptiert werden würde. Laut CSS-Spezifikation ist :hover für alle Elemente möglich, die einen mit dem Mauscursor überfahrbaren Block bilden. Warum auch die besseren Browser das bei COL nicht unterstützen, weiß ich nicht. TR:hover funktioniert jedenfalls in vielen Browsern.
<style type="text/css">
<!--
col {width:100px; background-color:yellow;}
col:hover {background-color:red;}
/*
tr {background-color:yellow;}
tr:hover {background-color:red;}
*/
-->
</style><table>
<colgroup>
<col>
<col>
</colgroup>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>Frage in die Runde:
Gibt es einen Grund, warum Firefox nur width und weder background-color noch :hover für das COL-Element umsetzt. Wo ist der Unterschied zum TR-Element?
viele Grüße
Axel
-
Hallo Axel,
Das HTML-Element hierfür existiert. Es könnte gehen, wenn COL:hover akzeptiert werden würde. Laut CSS-Spezifikation ist :hover für alle Elemente möglich, die einen mit dem Mauscursor überfahrbaren Block bilden. Warum auch die besseren Browser das bei COL nicht unterstützen, weiß ich nicht. TR:hover funktioniert jedenfalls in vielen Browsern.
Frage in die Runde:
Gibt es einen Grund, warum Firefox nur width und weder background-color noch :hover für das COL-Element umsetzt. Wo ist der Unterschied zum TR-Element?
Dass Firefox background leider nicht umsetzt, habe ich auch einmal
festgestellt, siehe </archiv/2004/7/t83780/#m489949>.
Nach meinen Tests ist width die einzige Eigenschaft aus der Liste
der anwendbaren Eigenschaften, die überhaupt unterstützt wird.Freundliche Grüsse,
Vinzenz
-
Hallo,
Dass Firefox background leider nicht umsetzt, habe ich auch einmal
festgestellt, siehe </archiv/2004/7/t83780/#m489949>.
Nach meinen Tests ist width die einzige Eigenschaft aus der Liste
der anwendbaren Eigenschaften, die überhaupt unterstützt wird.Ja, und das im Firefox _immer_ noch, schon seit http://forum.de.selfhtml.org/archiv/2003/11/t62591/#m354153[1]. In diesem Thread gibt es übrigens eine Lösung für das COL - background Problem.
viele Grüße
Axel
[1] Wie war das? Microsoft ist seit Jahren nicht in der Lage ... ;-))
-
Hallo Axel,
Ja, und das im Firefox _immer_ noch, schon seit http://forum.de.selfhtml.org/archiv/2003/11/t62591/#m354153[1]. In diesem Thread gibt es übrigens eine Lösung für das COL - background Problem.
Den Thread muss ich verpasst haben. *g*
[1] Wie war das? Microsoft ist seit Jahren nicht in der Lage ... ;-))
andere Entwickler offensichtlich ebenfalls nicht.
Ich zitiere Theo Lingen: "Traurig, traurig, traurig..."Freundliche Grüsse,
Vinzenz
-
-
-
Hi,
Das HTML-Element hierfür existiert. Es könnte gehen, wenn COL:hover akzeptiert werden würde.
Naja, soweit die Theorie. Da er das aber explizit fuer IE braucht denke ich, dass er um js nicht herumkommt.
Gruesse, Joachim
--
Am Ende wird alles gut.
-
-
-
-
-
-
Probiere mal dieses
...
das sind die Sachen die dieses Medium so wertvoll machen. An dieser Stelle, stellvertretend für alle aus diesem Thread, herzlichen Dank für die Anregungen. Damit ist mir richtig gut geholfen.
Grüße aus Wiesbaden
Rolf
-