Onmouseover Onmouseout ist ein link und style ist mit css?

[Christoph]

Hallo liebe selfHTML gemeinde!!!

Zunächst mal hier an die MODs admins und all jenen die sich beteiligt haben um so ein dickes Tutorial frei für alle zu machen, ein mehr als nur großes danke und *hofknick´s* meiner seits habt ihr wirklich sehr genial gemacht!!!

So dann mal zu meinem problemchen...

Wie oben schon thema betreffend beschrieben möchte ich...
Einen Table die jeweiligen TDs als link, diese sollen mit einer hintergrund farbe die variabl ist und durch OnmouseOver bzw. onmouseout sich ändert, das klappt auch da ich mir ja brav euere tut´s lese so wie hier <http://de.selfhtml.org/javascript/sprache/objekte.htm@title=Javascript Objekte>
Die function lässt sich ja problemlos aktivieren durch "onmouseover bzw. onmouseout" aber die veränderbare Schrift die ich in CSS STYLE formatiere macht andscheinend probleme "denke ich aber ich hab eben keine ahnung mehr weshalb" denn wenn ich die schrifft nicht mit css formatiere und z.b. leerzeichen dafür einsetze geht es nur ist es ja das was ich nicht möchte.
Die schrifft soll durch ein weiteres oder das selbe onmouseover-onmouseout... sich verändern wie hier unten im beiliegenden code von mir.

so ich hoffe ihr könnt den verhau was ich da unten angehangen hab nachvollziehen, wenn ihr fragen bzgl. irgendwas habt, ich schau das ich alles so gut wie möglich euch erkläre, wobei ich davon ausgeh das dieser gedanke von mir sinnfrei ist wenn ich euch schon um hilfe anfleh ;)

Falls es geht bitte helft mir auf die sprünge weshalb es nicht geht und sollte es mit javascript so nicht gehn dann wäre es super mir kurz und knapp zu sagen "einfach nen link wo ich selbst lesen kann" mit was ich sowas lösen kann.

Ach was wichtig ist, das ist, soll "lach schon selbst" eine Navbar werden, die ich mit include in die jeweilige seite "php" einfüge, damit sich so gesehn immer der content von seite zu seite ändert.

Danke euch schonmal...

  
<script type="text/javascript">  
/* das ist die function für den ERSTEN WÜRFEL */  
function Farbe (R, G, B) {  
  this.R = R;  
  this.G = G;  
  this.B = B;  
  this.hex = "#";  
}  
  
function HintergrundWechseln () {  
  var Hintergrund = new Farbe("00", "80", "7F");  
  wuerfel.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;  
}  
function Farbe1 (R, G, B) {  
  this.R = R;  
  this.G = G;  
  this.B = B;  
  this.hex = "#";  
}  
  
function HintergrundWechseln1 () {  
  var Hintergrund = new Farbe1("00", "B0", "7F");  
  wuerfel.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;  
}  
/* das ist die function für den ACHTEN WÜRFEL */  
function Farbe2 (R, G, B) {  
  this.R = R;  
  this.G = G;  
  this.B = B;  
  this.hex = "#";  
}  
  
function HintergrundWechseln2 () {  
  var Hintergrund = new Farbe2("FF", "80", "D0");  
  wuerfel1.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;  
}  
function Farbe3 (R, G, B) {  
  this.R = R;  
  this.G = G;  
  this.B = B;  
  this.hex = "#";  
}  
  
function HintergrundWechseln3 () {  
  var Hintergrund = new Farbe3("FF", "50", "D0");  
  wuerfel1.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;  
}  
</script>  
<style type="text/css">  
h3 {color:white;  
    font-family:Lucida sans unicode;  
    font-style:normal;  
    font-size:45%; }  
h2 {color:white;  
          font-family:Lucida sans unicode;  
          font-style:normal;  
          font-size:80%; }  
body {color:white;  
        font-family:Lucida sans unicode;  
        font-size:100%;  
         }  
A:link {text-decoration:none;}  
A:visited {text-decoration:none;}  
A:active {text-decoration:none;}  
A:hover {text-decoration:none;}  
a:focus {text-decoration:none;}  
</style>  
<!-- Kommentar: WÜRFEL eins MIT LINK -->  
<TABLE><tr><td><a href="home.php">  
<table id="wuerfel" bgcolor="#00807F" width="95" height="95" align="center"  
onmouseover="javascript:HintergrundWechseln()"  
onmouseout="javascript:HintergrundWechseln1()">  
<tr>  
<td width="95" height="95" align="center" font color="#FFFFFF"  
 onmouseover="this.innerHTML = '<h2>HOME</h2>'"  
 onmouseout="this.innerHTML = '<h3>HOME</h3>'"  
 ><h3>HOME</h3></td>  
</tr>  
</table></a></td>  
<!-- Kommentar: ENDE WÜRFEL eins MIT LINK -->  
<!-- Kommentar: WÜRFEL zwei MIT LINK -->  
<td><a href="programm.php">  
<table id="wuerfel1" bgcolor="#50E0FF" width="95" height="95" align="center"  
onmouseover="javascript:HintergrundWechseln2()"  
onmouseout="javascript:HintergrundWechseln3()">  
<tr>  
<td width="95" height="95" align="center" font color="#FFFFFF"  
 onmouseover="this.innerHTML = '<h2>PROGRAMM</h2>'"  
 onmouseout="this.innerHTML = '<h3>PROGRAMM</h3>'"  
 ><h3>PROGRAMM</h3></td>  
</tr></table>  
</a>  
</td></table>

MfG

[Christoph]

Ach was ich grad noch sehe. sorry!!!

Die variablen vom 2 würfel passen nicht, da ich nicht die kommplette Navbar posten wollte und vergessen hatte die variablen der function von den letzten würfel "wie man auch am kommentar lesen kann" verändert hab.

MfG Christoph

[JürgenB]

Hallo Christoph,

auf die Schnelle:

Man darf eine Funktion auch mehr als einmal aufrufen Farbe1,2,3 sind doch identisch. Außerdem überflüssig:

wuerfel.bgColor = "+00807f;"

Besser wäre es, hier "style" zu ändern.

Tabellen haben in Links nichts zu suchen. Bring das HTML in Ordnung (du kennst den Validator?), dann kann man weitersehen.

Gruß, Jürgen

[JürgenB]

Hallo,

warum sieht die Rechtschreibkontrolle so etwas nicht?

wuerfel.bgColor = "+00807f;"

"#00807f";

Gruß, Jürgen

[Christoph]

Hallo,

warum sieht die Rechtschreibkontrolle so etwas nicht?

wuerfel.bgColor = "+00807f;"
                     "#00807f";

Gruß, Jürgen

»»

Zunächst mal euch beiden ein großen Dank!!! ;) ging ja fix!!!

Ich hab das ganze jetzt wie folgt gelöst, da fehlt dann ja nur noch das es middle ist und center...

Wäre super wenn ihr dazu noch kurz eure Meinung schreibt ob das so okay ist!? also gehn würde es...

ja das mit den funktionen lass ich mal lieber, hab mich da so sehr aufregen müssen und keinen plan gehabt... ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Horizontale Navigationsleiste zentriert</title>  
<style type="text/css">  
div#home { position:fixed;  
        font-family:Lucida sans unicode;  
        font-style:normal;  
        color:FFFFFF;  
        top:215px;  
        left:305px;  
        width:95px;  
        height:95px;  
        border:0px;  
        background-color:409010;  
        }  
  
div#home a { text-decoration: none;  
                font-family:Lucida sans unicode;  
                font-style:normal;  
                font-size:70%;  
                color:FFFFFF;  
                position:fixed;  
                top:215px; left:305px;  
                width:95px;  
                height:95px;  
                border:0px;  
                background-color:409010;  
                }  
  
div#home a:hover { text-decoration: none;  
                font-family:Lucida sans unicode;  
                font-style:normal;  
                font-size:100%;  
                color:FFFFFF;  
                position:fixed;  
                top:215px; left:305px;  
                width:95px;  
                height:95px;  
                border:0px;  
                background-color:FF0030;  
                }  
  
</style>  
</head>  
<body>  
  
  <div id="home"><a href="home.php">HOME</a></div>  
  
</body>  
</html>

MfG Christoph

[Benjamin Buxbaum]

Hi Christoph!

da fehlt dann ja nur noch das es middle ist und center...

Was?

Wäre super wenn ihr dazu noch kurz eure Meinung schreibt ob das so okay ist!? also gehn würde es...

Bei mir sieht das noch nicht so aus, wie Du dir das vorstellst.
(Das ist irgendwie ein lustiger Satz. :D)

Das position:fixed und die top und left Angaben musst Du nur für div#home angeben, das reicht. Alle untergeordneten Elemente erben die Eigenschaften. Das gleiche gilt für die Angaben zur Schriftart und Schriftfarbe. Bei Deinen Farbangaben fehlt die Raute -> Farbe wird zumindest im Firefox nicht angezeigt. Die Breite und Höhe verwendest Du auch redundant. Ich würde es so machen, dass nur div#home a eine Breite und Höhe bekommt und noch ein display:block verpasst kriegt. Dann klappt das auch, dass der ganze "Würfel" die Hintergrundfarbe bekommt.

Dein CSS sieht dann entschlackt so aus:

div#home { position:fixed;  
        font-family:Lucida sans unicode;  
        font-style:normal;  
        top:215px;  
        left:305px;  
        }  
  
div#home a { 	display:block;  
				text-decoration: none;  
                font-size:70%;  
                color:#FFFFFF;  
                width:95px;  
                height:95px;  
                border:0px;  
                background-color:#409010;  
                }  
  
div#home a:hover {  
                font-size:100%;  
                border:0px;  
                background-color:#FF0030;  
                }

mfG
Benjamin

[Benjamin Buxbaum]

Hi Christoph!

function Farbe (R, G, B) {
  this.R = R;
  this.G = G;
  this.B = B;
  this.hex = "#";
}
function Farbe1 (R, G, B) {
  this.R = R;
  this.G = G;
  this.B = B;
  this.hex = "#";
}
function Farbe2 (R, G, B) {
  this.R = R;
  this.G = G;
  this.B = B;
  this.hex = "#";
}
function Farbe3 (R, G, B) {
  this.R = R;
  this.G = G;
  this.B = B;
  this.hex = "#";
}

Das sind _vier_ Funktionen/Klassen die exakt identisch sind. Warum?

function HintergrundWechseln () {
  var Hintergrund = new Farbe("00", "80", "7F");
  wuerfel.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;
}

function HintergrundWechseln1 () {
(...)

Hier wäre es geschickter, die Farbe per Parameter zu setzen und den extrem redundanten Code zu entsorgen.

<TABLE><tr><td><a href="home.php">
<table id="wuerfel" bgcolor="#00807F" width="95" height="95" align="center"
onmouseover="javascript:HintergrundWechseln()"
onmouseout="javascript:HintergrundWechseln1()">
<tr>
(...)

Brauchst Du _wirklich_ verschachtelte Tabellen, um ein paar Links darzustellen? Das würde ich nochmal überdenken. Das würde sich wunderbar mit einer per CSS formatierten Linkliste machen lassen. Du könntest dann auch das Javascript weglassen und den Wechsel von Hintergrundfarbe und Schriftgröße per :hover ändern.
Der Missbrauch von Überschrift-Tags wie <h2 /> zur Schriftformatierung ist auch nicht unbedingt gern gesehen.

mfG
Benjamin