nicht angemeldet
Hallo,
Warum interpretiert Opera folgendes Mini-Script nicht, wo er doch DOM verstehen müsste?
function change(id,klasse)
{
document.getElementById(id).className = klasse;
}Zur Erklärung: Im Menü wird per CSS-hover die Textfarbe auf die Hintergrundfarbe geändert und per onMouseOver sollte der Hintergrund in die Textfarbe(u.U. auch entsprechend eingefärbtes Bild) konvertiert werden. Das funktioniert in Mozilla, Firebird und IE, der Opera 6.04 ändert aber nur die Textfarbe, wodurch die Links natürlich unsichtbar werden.
Also interpretiert Opera 6.x das Script doch. Das Problem ist hier nicht DOM, sondern die Unfähigkeit der Opera 6.x mit dynamischen Veränderungen von CSS-Hintergründen umzugehen. Sie setzen, soweit ich weiß, bei jeder dynamischen Änderung der CSS-Eigenschaft background, egal ob über background, background-image oder background-color, die background-Werte wieder auf default (-imange:none, -color:transparent).
Ich habe das mal so, mit einer CSS-Weiche, gelöst:
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Test CSS</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="author" content="Axel Richter">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<link rel="stylesheet" href="css/screen.css" media="screen" type="text/css">
<link rel="stylesheet" href="css/print.css" media="print" type="text/css">
<style type="text/css">
<!--
@media screen {
div.m a#home {border:1px solid #007070; border-bottom:0 none; background-color:#F0F0F0;}
}
-->
</style>
</head>
<body>
<p class="va"> </p>
<div class="m">
<a href="#" id="home"><span>heimseite</span></a>
<a href="#" id="doku"><span>dokumente</span></a>
<a href="#" id="mail"><span>kontakt</span></a>
</div>
<div class="i">
<div class="t">
Test
</div>
</div>
</body>
</html>
screen.css:
* {font-family:monospace;}
html, body {height:100%; width:100%; margin:0; padding:0; background-color:#FFF;}
/*Für MSIE5.x, wegen der Unfähigkeit margin:auto zu interpretieren.*/
body {text-align:center;}
div.m {width:632px; height:64px; padding:0 1px 0 0; margin:0 auto 0 auto; background-color:#FFF; text-align:left;}
div.m a {display:block; width:210px; height:64px; text-decoration:none; text-align:left; float:left; color:#007070; margin:0; padding:0; border-bottom:1px solid #007070;}
div.m a:link {color:#007070;}
div.m a:visited {color:#005050;}
/*Für alle, die über @media kommen*/
div.m a:hover {color:#00B0B0; font-weight:bold; background-color:#F0F0F0;}
/*Für CSS2-Browser, speziell Opera6, der bei Änderung des Hintergrundes das Hintergrundbild verschluckt.*/
html>body div.m a:hover {color:#00B0B0; font-weight:bold; background-color:transparent;}
/*Für CSS2-Browser, außer Opera6*/
head:first-child+body div.m a:hover {color:#00B0B0; font-weight:bold; background-color:#F0F0F0;}
div.m a:active {color:#C04040;}
div.m a:focus {color:#00B0B0;}
/*Ausgangszustand*/
div.m a#home {background-image:url(home.gif); background-repeat:no-repeat;}
/*Für alle, die über @media kommen*/
div.m a#home:hover {background-image:url(homehover.gif); background-repeat:no-repeat;}
/*Für CSS2-Browser, speziell Opera6, der bei Änderung des Hintergrundes das Hintergrundbild verschluckt.*/
html>body div.m a#home:hover {background-image:none;}
/*Für CSS2-Browser, außer Opera6*/
head:first-child+body div.m a#home:hover {background-image:url(homehover.gif); background-repeat:no-repeat;}
/*Ausgangszustand*/
div.m a#doku {background-image:url(doku.gif); background-repeat:no-repeat;}
/*Für alle, die über @media kommen*/
div.m a#doku:hover {background-image:url(dokuhover.gif); background-repeat:no-repeat;}
/*Für CSS2-Browser*/
html>body div.m a#doku:hover {background-image:none;}
/*Für CSS2-Browser, außer Opera6*/
head:first-child+body div.m a#doku:hover {background-image:url(dokuhover.gif); background-repeat:no-repeat;}
/*Ausgangszustand*/
div.m a#mail {background-image:url(mail.gif); background-repeat:no-repeat;}
/*Für alle, die über @media kommen*/
div.m a#mail:hover {background-image:url(mailhover.gif); background-repeat:no-repeat;}
/*Für CSS2-Browser*/
html>body div.m a#mail:hover {background-image:none;}
/*Für CSS2-Browser, außer Opera6*/
head:first-child+body div.m a#mail:hover {background-image:url(mailhover.gif); background-repeat:no-repeat;}
div.m a span {display:block; padding:0; padding-top:35px; padding-left:15px; font-size:20px;}
div.i {width:631px; padding:0; margin:0 auto 0 auto; background-color:#F0F0F0; border:1px solid #007070; border-top:0 none; clear:left;}
p.va {padding:0; margin:0; font-size:5px; line-height:5px;}
div.t {padding:10px; text-align:left;}
viele Grüße
Axel