Archiv verlassen und diese Seite im Standarddesign anzeigen : onMouseOver & onMouseOut & ... ?
exweised
28.07.2004, 12:47:11
<table border="0" cellpadding="3" cellspacing="0" bgcolor="#aabbcc">
<tr onMouseOver="style.backgroundColor='#ccbbaa';" onMouseOut="style.backgroundColor='#aabbcc';">
<td onClick="Link('test.htm','')">test</td>
</tr></table>
Wie im Script ersichtlich, ist meine Tabelle ein Menü. Fährt man mit der Maus über den Link "test", ändert sich die Hintergrundfarbe. Fährt er mit der Maus wieder weg, kommt die alte Hintergrundfarbe wieder zum vorschein. Klappt auch soweit wunderbar.
Jetzt möchte ich noch, dass wenn man auf dem Link drauf geklickt hat, dass dann die Farbe von onMouseOver bestehen bleibt. Sozusagen als aktiver Link.
Kann mir da jemand helfen, wie ich das anstelle?
Wie bei phpMyAdmin vermute ich mal, richtig?
Mir fallen da 2 Möglichkeiten ein
a) Beim onmouseover und onmouseout prüfst Du, welche Farbe das Feld aktuell hat. Ist diese Farbe die, die bei onclick vergeben wird, dann soll er nichts machen, sonst einfärben.
Der Nachteil ist: Die Rückgabe des Farbwertes ist bei den unterschiedlichen Browsern unterschiedlich.
b) Du speicherst zu jedem Feld in einer Variable einen Wert, der aussagt, ob das Ding mal beklickt wurde oder nicht. Wenn ja, dann nichts machen, sonst einfärben.
Beim deaktivierenden Klicken (sprich beim erneuten Klick auf ein Feld) muss dieser Wert angepasst werden!
exweised
28.07.2004, 13:30:03
Hoho, wow, jetzt bin ich erst mal platt! Hörst den Zug abrauschen? Das war der von meinem Bahnhof. :D
Ich habe jetzt überhaupt nix verstanden, was du mir erzählt hast. :( Gibt's das auch in Programmieranfängerdeutsch?
Ich will ja einfach nur, ganz easy, den Farbcode lassen, wenn man draufgeklickt hat.
Hörst den Zug abrauschen? Das war der von meinem Bahnhof. hehe, den kannte ich noch nicht! :)
Also ich fand den Text schon eindeutig. Nicht unbedingt leicht verständlich, aber immerhin. Einfach noch einmal durchlesen.
Ich habe Dir damit auch nur Tipps geben wollen. Genauere Anleitungen findest Du unter http://selfhtml.net/javascript/
Kennst/Hast Du phpMyAdmin? Dort wird das auch genutzt. Musst Du Dich halt mal durch deren Quelltexte wühlen...
Viel Spaß! :)
exweised
28.07.2004, 14:22:24
Habe jetzt mal bei phpMyAdmin nachgeschaut und oben die Reiter als Beispiel genommen. Da ist das ja auch so. Der Code dazu sieht so aus:
<table border="0" cellspacing="0" cellpadding="3" width="100%" class="tabs">
<tr>
<td width="8"> </td>
<td bgcolor="#DFDFDF" align="center" width="64" nowrap="nowrap" class="tab">
<nobr><a href="db_details_structure.php?lang=de-iso-8859-1&server=1&db=racecar&goto=db_search.php" style="display:block" ><b>Struktur</b></a></nobr>
</td>
<td width="8"> </td>
<td bgcolor="silver" align="center" width="64" nowrap="nowrap" class="tab">
<nobr><a href="db_details.php?lang=de-iso-8859-1&server=1&db=racecar&goto=db_search.php&db_query_force=1" style="display:block" ><b>SQL</b></a></nobr>
</td>
Der erste Reiter ist der inaktive und trägt den Farbcode "#DFDFDF". Der zweite Reiter ist aktiv und trägt den Farbcode "silver".
Jetzt habe ich auch mal ins CSS geschaut, was denn die Klassen "tab" und "tabs" beinhalten. In beiden geht es nur um den Rahmen. Zu den Farben ist weder was im CSS noch per Javascript enthalten.
yozek
28.07.2004, 14:51:08
So, phpmyadmin macht das folgendermassen.
<script>
/**
* This array is used to remember mark status of rows in browse mode
*/
var marked_row = new Array;
/**
* Sets/unsets the pointer and marker in browse mode
*
* @param object the table row
* @param interger the row number
* @param string the action calling this script (over, out or click)
* @param string the default background color
* @param string the color to use for mouseover
* @param string the color to use for marking a row
*
* @return boolean whether pointer is set or not
*/
function setPointer(theRow, theRowNum, theAction, theDefaultColor, thePointerColor, theMarkColor)
{
var theCells = null;
// 1. Pointer and mark feature are disabled or the browser can't get the
// row -> exits
if ((thePointerColor == '' && theMarkColor == '')
|| typeof(theRow.style) == 'undefined') {
return false;
}
// 2. Gets the current row and exits if the browser can't get it
if (typeof(document.getElementsByTagName) != 'undefined') {
theCells = theRow.getElementsByTagName('td');
}
else if (typeof(theRow.cells) != 'undefined') {
theCells = theRow.cells;
}
else {
return false;
}
// 3. Gets the current color...
var rowCellsCnt = theCells.length;
var domDetect = null;
var currentColor = null;
var newColor = null;
// 3.1 ... with DOM compatible browsers except Opera that does not return
// valid values with "getAttribute"
if (typeof(window.opera) == 'undefined'
&& typeof(theCells[0].getAttribute) != 'undefined') {
currentColor = theCells[0].getAttribute('bgcolor');
domDetect = true;
}
// 3.2 ... with other browsers
else {
currentColor = theCells[0].style.backgroundColor;
domDetect = false;
} // end 3
// 3.3 ... Opera changes colors set via HTML to rgb(r,g,b) format so fix it
if (currentColor.indexOf("rgb") >= 0)
{
var rgbStr = currentColor.slice(currentColor.indexOf('(') + 1,
currentColor.indexOf(')'));
var rgbValues = rgbStr.split(",");
currentColor = "#";
var hexChars = "0123456789ABCDEF";
for (var i = 0; i < 3; i++)
{
var v = rgbValues[i].valueOf();
currentColor += hexChars.charAt(v/16) + hexChars.charAt(v%16);
}
}
// 4. Defines the new color
// 4.1 Current color is the default one
if (currentColor == ''
|| currentColor.toLowerCase() == theDefaultColor.toLowerCase()) {
if (theAction == 'over' && thePointerColor != '') {
newColor = thePointerColor;
}
else if (theAction == 'click' && theMarkColor != '') {
newColor = theMarkColor;
marked_row[theRowNum] = true;
}
}
// 4.1.2 Current color is the pointer one
else if (currentColor.toLowerCase() == thePointerColor.toLowerCase()
&& (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])) {
if (theAction == 'out') {
newColor = theDefaultColor;
}
else if (theAction == 'click' && theMarkColor != '') {
newColor = theMarkColor;
marked_row[theRowNum] = true;
}
}
// 4.1.3 Current color is the marker one
else if (currentColor.toLowerCase() == theMarkColor.toLowerCase()) {
if (theAction == 'click') {
newColor = (thePointerColor != '')
? thePointerColor
: theDefaultColor;
marked_row[theRowNum] = (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])
? true
: null;
}
} // end 4
// 5. Sets the new color...
if (newColor) {
var c = null;
// 5.1 ... with DOM compatible browsers except Opera
if (domDetect) {
for (c = 0; c < rowCellsCnt; c++) {
theCells[c].setAttribute('bgcolor', newColor, 0);
} // end for
}
// 5.2 ... with other browsers
else {
for (c = 0; c < rowCellsCnt; c++) {
theCells[c].style.backgroundColor = newColor;
}
}
} // end 5
return true;
} // end of the 'setPointer()' function
</script>
<table bgcolor="#DDDDDD">
<tr onmouseover="setPointer(this, 0, 'over', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmouseout="setPointer(this, 0, 'out', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmousedown="setPointer(this, 0, 'click', '#DDDDDD', '#CCFFCC', '#FFCC99');">
<td>Link1</td>
</tr>
<tr onmouseover="setPointer(this, 1, 'over', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmouseout="setPointer(this, 1, 'out', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmousedown="setPointer(this, 1, 'click', '#DDDDDD', '#CCFFCC', '#FFCC99');">
<td>Link2</td>
</tr>
<tr onmouseover="setPointer(this, 3, 'over', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmouseout="setPointer(this, 3, 'out', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmousedown="setPointer(this, 3, 'click', '#DDDDDD', '#CCFFCC', '#FFCC99');">
<td>Link3</td>
</tr>
</table>
Ich würde da noch ein wenig verändern und es so einstellen, dass bei klick eines neuen Links alle anderen resetet werden ;)
Vielleicht hilft das ja weiter
exweised
28.07.2004, 15:17:51
Boah, geil. Jetzt lass ich es doch lieber. Da steig ich nicht durch.
Hi,
erstmal danke für das Code-Posting. Versehe ich soweit.
Doch wie kann ich jetzt z.B. die markierten Zellen weiterverarbeiten, z.b. will ich die markieren zellen jetzt auf einer neuen seite darstellen..wie greif ich da zu?
Danke!
vBulletin® v3.8.3, Copyright ©2000-2013, Jelsoft Enterprises Ltd.