nicht angemeldet
Tabellenhintergrund bei OnMouseOut bei Opera funktioniert nicht
0 0 0 0 0 Nachtrag
Tabellenhintergrund bei OnMouseOut bei Opera funktioniert nicht
Hallo,
Ich habe folgende 2 Funktionen :
function mouseover(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = "#444400";
}
function mouseout(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = "";
}
Wenn ich über eine Link fahre, ändert sich die Farbe der Tabellenzelle, in der sich der Link befindet, und verschwindet wieder, wenn ich mit der Mouse den Link verlasse.
Bei Opera funktioniert nur onMouseOver. onMouseOut würde funktionieren, wenn ich bei der Funktion "mouseout" eine Farbe am Schluss einsetzen würde, aber das will ich nicht.
Ich habe auch schon versucht irgerndwie mit Eigenschaften zu arbeiten, zB :
document.getElementsByTagName("td")[position].style.backgroundColor.visibility = "hidden";
aber da habe ich überall entweder keinen OnMouseOut Effekt, oder wenn ich :
document.getElementsByTagName("td")[position].style.visibility = "hidden";
verwende, verschwinden alle Links, nachdem ich den Link mit der Maus wieder verlasse.
Was kann ich da tun ?
$xNeTworKx
-
Hallo,
Ich habe folgende 2 Funktionen :
function mouseover(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = "#444400";
}
function mouseout(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = "";
}laut W3C Recommendation ist die Initial-Value von background-color "transparent".
http://www.w3.org/TR/REC-CSS1#background-colorProbier mal:
function mouseout(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = "transparent";Gruß
Axel
-
Hallo,
Probier mal:
function mouseout(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = "transparent";Sorry, das nimmt Opera auch nicht an, der onMouseOut Effekt tritt bei ihm nicht ein.
$xNeTworKx.
-
Hallo,
Probier mal:
function mouseout(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = "transparent";Sorry,
wofür? _Ich_ hab mich doch geirrt ;-)
das nimmt Opera auch nicht an, der onMouseOut Effekt tritt bei ihm nicht ein.
Ja. Bisher hatte ich keinen Opera. Hab ihn gerade mal installiert. Der macht das wirklich nicht. Das onmouseout schon, aber nicht das Zurücksetzen von style.backgroundColor auf transparent.
Lösungsvorschläge:
1. Eine feste Farbangabe für "normal" bzw. bei mouseout. z. B.:
function mouseout(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = "#FFFFFF";
}2. Auf JavaScript verzichten. Folgendes macht auch der Opera:
<html>
<head>
<title></title>
<style type="text/css">
<!--
a {text-decoration:none; display:block;}
a:hover {background-color:#444400;}
-->
</style>
</head>
<body>
<table border="1">
<tr>
<td><a href="#">Zelle0</a></td>
<td><a href="#">Zelle 1</a></td>
</tr>
<tr>
<td><a href="#">zweite Zeile Zelle 0</a></td>
<td><a href="#">zweite Zeile Zelle 1</a></td>
</tr>
</table>
</body>
</html>Gruß
Axel
-
Hi,
<html>
<head>
<title></title>
<style type="text/css">
<!--
a {text-decoration:none; display:block;}
a:hover {background-color:#444400;}
-->
</style>
</head>
<body>
<table border="1">
<tr>
<td><a href="#">Zelle0</a></td>
<td><a href="#">Zelle 1</a></td>
</tr>
<tr>
<td><a href="#">zweite Zeile Zelle 0</a></td>
<td><a href="#">zweite Zeile Zelle 1</a></td>
</tr>
</table>
</body>
</html>Danke für die Hilfe. Das Problem ist nur, dass sich der Background nur dort verändert, wo der Link zu sehen ist. Die Backgroundcolor des Links erstreckt sich zwar bis zur Tabellenzellengrenze, aber ist nur so hoch, wie der Link. Meine Tabellenzellen sind etwas höher als der Links selbst, somit habe ich nur einen schmalen Streifen, der eben aus und eingeblendet wird.
$xNeTworKx.
-
Hi,
Danke für die Hilfe. Das Problem ist nur, dass sich der Background nur dort verändert, wo der Link zu sehen ist. Die Backgroundcolor des Links erstreckt sich zwar bis zur Tabellenzellengrenze, aber ist nur so hoch, wie der Link. Meine Tabellenzellen sind etwas höher als der Links selbst, somit habe ich nur einen schmalen Streifen, der eben aus und eingeblendet wird.
a {text-decoration:none; display:block; line-height:50px;}
a:hover {background-color:#444400;}
td {height:50px;}Das sollte Dein Problem lösen?
Gruß
Axel
-
Hallo,
a {text-decoration:none; display:block; line-height:50px;}
a:hover {background-color:#444400;}
td {height:50px;}Es sieht im Mozilla und IE genauso aus, wie es soll. Im Mozilla erhalte ich sogar den gewünschten Effekt, den ich noch dazu haben wollte, mit dem ich die Links sogar beim überfahren der Tabellenzelle klicken kann. Im Opera bezieht sich zwar die Hintergrundfarbe nur auf die Links, aber zumindest bleibt der Hintergrund, wie bei Javascript nicht mehr hängen, danke.
Ich habe auch display:block nicht global für a definieren können, da mir Opera die Links ganz seltsam "zerschießt". Die Unterstriche der LInks, werden plötzlich ein paar Pixel über den LInks dargestellt, aber ich habe display:block überall dort gesetzt, wo es notwenig war.$xNeTworKx.
-
-
-
-
-
-
Hi,
ich weiß nicht ob dir das was hilft,
aber ich habe aus verlässlichen Quellen gehört, dass der Opera mit Java-Script, an einigen Stellen massive Probleme hat.
Ich würde mich mit dieser Problematik nicht zu lange aufhalten, denn soviele Operas sind nicht unterwegs, als das es sich lohnen würde, sich dafür den Wolf zu Scripten. Oder will ein Kunde das?Gruß
ZAB-
Hi,
ich weiß nicht ob dir das was hilft,
aber ich habe aus verlässlichen Quellen gehört, dass der Opera mit Java-Script, an einigen Stellen massive Probleme hat.
Ich würde mich mit dieser Problematik nicht zu lange aufhalten, denn soviele Operas sind nicht unterwegs, als das es sich lohnen würde, sich dafür den Wolf zu Scripten. Oder will ein Kunde das?Nein, aber es stört mich sehr, weil es eigentlich nichts großartiges ist, aber Opera es trotzdem nicht auf die Reihe kriegt.
Darauf verzichten will ich auch nicht, weil es soll die Topiclinks eines selbsgemachten Boards damit hervorheben, und zufällig kenne ich Leute, die Opera benutzen, und deswegen hätte ich es schon gerne funktionstüchtig.$xNeTworKx.
-
-
Hi,
function mouseover(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = "#444400";
}
function mouseout(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = "";
}Bei Opera funktioniert nur onMouseOver. onMouseOut würde funktionieren, wenn ich bei der Funktion "mouseout" eine Farbe am Schluss einsetzen würde, aber das will ich nicht.
Nachdem sowohl 'transparent' als auch 'inherit' nicht funktionieren (AFAIK ist dieser Opera-Bug bekannt, jedenfalls habe ich von ähnlichen mouseout-Problemen schon mehrmals gehört), empfehle ich eine Lösung nach folgendem Muster:
function mouseover(position) {
bg = document.getElementsByTagName("td")[position].style.backgroundColor;
document.getElementsByTagName("td")[position].style.backgroundColor = "#444400";
}function mouseout(position) {
document.getElementsByTagName("td")[position].style.backgroundColor = bg;
}Du speicherst einfach die Hintergrundfarbe der Zelle vor dem mouseover in "bg" und änderst sie beim mouseout wieder auf diesen Wert zurück. Ich habe diese Variante nicht getestet, aber
<td onmouseover="bg=this.style.backgroundColor; this.style.backgroundColor = '#444400';" onmouseout="this.style.backgroundColor = bg;">bla</td>
funktioniert.
LG Roland
-
Hi,
danke für den Tip. Werds morgen ausprobieren. Allerdings würde ich mit Javascript das Feature des Mozilla wieder verlieren, welches mir ermöglicht, die Links schon beim berühren der Tabellenzellen zu klicken :)$xNeTworKx.
-
Hi nochmal.
hab es doch noch ausprobiert, aber es funktioniert im Opera trotzdem nicht. Der gleiche Effekt wie vorher =(
$xNeTworKx.
-
-