Mouseover in Tabelle

[Tokala]

Hallo zusammen =)

ich habe ein etwas seltsames Problem, das ich überhaupt nicht verstehe.
Ich habe zwei super funktionierende Codes, einen Tabellencode und einen Mouseovercode. Wenn ich aber diesen mouseover-Effekt in meine Tabelle einfügen will, funktioniert er plötzlich nicht mehr.

 <center><table border="1" cellspacing="3" cellpadding="0">
<tr><td width="185"><p align=center><a href="http://www.sternenwinde.de.tf"
onmouseover="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaMit.jpg';" 
onmouseout="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaOhne.jpg';" 
<img src="http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaOhne.jpg" border=0 name=Eingang></a></p><p align=center><a href="http://www.sternenwinde.de.tf"
onmouseover="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamBansheeMit.jpg';" 
onmouseout="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamBansheeOhne.jpg';" 
<img src="http://sternenwinde.lima-city.de/ForumSternis/TeamBansheeOhne.jpg"
border=0 name=Eingang></a></p><br>
<p align=center><a href="http://www.sternenwinde.de.tf" 
onmouseover="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamKaedeMit.jpg';" 
onmouseout="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamKaedeOhne.jpg';" 
<img src="http://sternenwinde.lima-city.de/ForumSternis/TeamKaedeOhne.jpg" border=0 name=Eingang></a></p><p align=center><a href="http://www.sternenwinde.de.tf" 
onmouseover="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamFaceMit.jpg';" 
onmouseout="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamFaceOhne.jpg';" 
<img src="http://sternenwinde.lima-city.de/ForumSternis/TeamFaceOhne.jpg" border=0 name=Eingang></a></p></td>
<td width="185"><center><font size=1>folgt</font></center></td>
<td width="185"><center><font size=1>folgt</font></center></td>
</tr></table>

Was habe ich falsch gemacht? Warum geht mein mouseover-Effekt in der Tabelle verloren? Übrigens nicht nur in der Tabelle - alle mouseover-Bilder auf der Seite verlieren diesen Effekt, kaum füge ich eine Tabelle ein.

Vielen Dank vorab für die Hilfe,
Tokala

 

[Bernhard]

Hallo zusammen =)

ich habe ein etwas seltsames Problem, das ich überhaupt nicht verstehe.
Ich habe zwei super funktionierende Codes, einen Tabellencode und einen Mouseovercode. Wenn ich aber diesen mouseover-Effekt in meine Tabelle einfügen will, funktioniert er plötzlich nicht mehr.

 <center><table border="1" cellspacing="3" cellpadding="0">
<tr><td width="185"><p align=center><a href="http://www.sternenwinde.de.tf"
onmouseover="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaMit.jpg';" 
onmouseout="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaOhne.jpg';" 
<img src="http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaOhne.jpg" border=0 name=Eingang></a></p><p align=center><a href="http://www.sternenwinde.de.tf"
onmouseover="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamBansheeMit.jpg';" 
onmouseout="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamBansheeOhne.jpg';" 
<img src="http://sternenwinde.lima-city.de/ForumSternis/TeamBansheeOhne.jpg"
border=0 name=Eingang></a></p><br>
<p align=center><a href="http://www.sternenwinde.de.tf" 
onmouseover="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamKaedeMit.jpg';" 
onmouseout="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamKaedeOhne.jpg';" 
<img src="http://sternenwinde.lima-city.de/ForumSternis/TeamKaedeOhne.jpg" border=0 name=Eingang></a></p><p align=center><a href="http://www.sternenwinde.de.tf" 
onmouseover="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamFaceMit.jpg';" 
onmouseout="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamFaceOhne.jpg';" 
<img src="http://sternenwinde.lima-city.de/ForumSternis/TeamFaceOhne.jpg" border=0 name=Eingang></a></p></td>
<td width="185"><center><font size=1>folgt</font></center></td>
<td width="185"><center><font size=1>folgt</font></center></td>
</tr></table>

Was habe ich falsch gemacht? Warum geht mein mouseover-Effekt in der Tabelle verloren? Übrigens nicht nur in der Tabelle - alle mouseover-Bilder auf der Seite verlieren diesen Effekt, kaum füge ich eine Tabelle ein.

Vielen Dank vorab für die Hilfe,
Tokala

Hallo Tokala,

warum machst Du das Hover nicht einfach mit CSS?
So wie das momentan aussieht, ist es unvollständiges JavaScript und dürfte
wohl auch ohne Tabelle nicht funktionieren.

Abgesehen davon verwendest Du eine Tabelle, obwohl es gar keine tabellarischen
Daten gibt. Für ein Menü ist eine Liste sinnvoller.

Grüße
Bernhard

 

[Tokala]

Hallo Bernhard,

ich muss zugeben, dass ich den CSS-Code für mouseover einfach nicht verstanden habe ^^''' Daher habe ich die andere Methode gewählt, die eigentlich auch funktioniert. Tatsächlich auch ohne Tabelle - ich habe es zuerst ohne ausprobiert. Könntest du mir helfen, das Java Script zu vervollständigen? Oder funktioniert das nicht? Muss ich doch den CSS-Code benutzen? Wie?

Die Tabelle ist beabsichtigt, da ich sie als Design-Element benutzen möchte.

Fragen über Fragen, ich hoffe, ich frag nicht zu viel ^^''

LG
Tokala

 

[Tokala]

*hochpost* bräuchte wirklich Hilfe ._.

 

[Bernhard]

Hallo Bernhard,

ich muss zugeben, dass ich den CSS-Code für mouseover einfach nicht verstanden habe ^^''' Daher habe ich die andere Methode gewählt, die eigentlich auch funktioniert. Tatsächlich auch ohne Tabelle - ich habe es zuerst ohne ausprobiert. Könntest du mir helfen, das Java Script zu vervollständigen? Oder funktioniert das nicht? Muss ich doch den CSS-Code benutzen? Wie?

Die Tabelle ist beabsichtigt, da ich sie als Design-Element benutzen möchte.

Fragen über Fragen, ich hoffe, ich frag nicht zu viel ^^''

LG
Tokala

*hochpost* bräuchte wirklich Hilfe ._.

Hallo Tokala,

eigentlich ganz einfach:
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="navigation">
     <li><a href="#" class="aktiv">aktiver Link</a></li>
     <li><a href="impressum.html">Link</a></li>
</ul>
</body>
</html>

CSS:

ul#navigation {
float:left;
margin:0;
padding:0;
list-style-type:none;
}
ul#navigation li {
margin:0 0 0 30px;
padding:0;
}
ul#navigation li a {
display:block;
width:11.0em;
height:1.5em;
text-decoration:none;
margin:0 0 10px 0;
padding:0;
color:#0000ff;
}
ul#navigation li a.aktiv {
color:#00ff00;
}
ul#navigation li a:hover {
color:#ff0000;
}

Die CSS-Datei speicherst Du unter dem Namen style.css und legst sie in den
gleichen Ordner, in dem auch das HTML-Dokument liegt => fertig.

Damit bist Du auch gleich die Tabelle los...

Grüße
Bernhard

 

[Tokala]

Hallo Bernhard,

jetzt bin ich endgültig total verwirrt. Die Codes, die du mir gegeben hast, haben doch nichts mit Mouseover zu tun, oder bin ich einfach doof? Zumindest der HTML-Code erzeugt einfach eine Navigationsleiste mit verschobenem Link. Aber das will ich doch gar nicht? Oder will ich das und verstehe nur nicht, wie ich das auf mein Problem übertragen kann?
Vielleicht habe ich mich mit Mouseover auch einfach falsch ausgedrückt. Ich meine ein Bild, das, kaum fährt man mit der Maus darüber, zu einem anderen Bild wird (und noch dazu verlinkt ist). Wie packe ich das in deinen Code? Oder haben wir einfach an einander vorbei geredet?
Mein direkter Code für das Mouseover ist dieser:

<a href="http://www.sternenwinde.de.tf"
onmouseover="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaMit.jpg';" 
onmouseout="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaOhne.jpg';"> 
<img src="http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaOhne.jpg" border=0 name=Eingang></a>

Der nun wirklich keinerlei Ähnlichkeiten mit deinem hat. Ist meiner einfach rettungslos verloren, weil total falsch?

Liebe Grüße,
Tokala

 

[Bernhard]

Hallo Bernhard,

jetzt bin ich endgültig total verwirrt. Die Codes, die du mir gegeben hast, haben doch nichts mit Mouseover zu tun, oder bin ich einfach doof? Zumindest der HTML-Code erzeugt einfach eine Navigationsleiste mit verschobenem Link. Aber das will ich doch gar nicht? Oder will ich das und verstehe nur nicht, wie ich das auf mein Problem übertragen kann?
Vielleicht habe ich mich mit Mouseover auch einfach falsch ausgedrückt. Ich meine ein Bild, das, kaum fährt man mit der Maus darüber, zu einem anderen Bild wird (und noch dazu verlinkt ist). Wie packe ich das in deinen Code? Oder haben wir einfach an einander vorbei geredet?
Mein direkter Code für das Mouseover ist dieser:

<a href="http://www.sternenwinde.de.tf"
onmouseover="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaMit.jpg';" 
onmouseout="Eingang.src='http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaOhne.jpg';"> 
<img src="http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaOhne.jpg" border=0 name=Eingang></a>

Der nun wirklich keinerlei Ähnlichkeiten mit deinem hat. Ist meiner einfach rettungslos verloren, weil total falsch?

Liebe Grüße,
Tokala

Hallo Tokala,

hast Du meinen Code ausprobiert? Ich hatte Deinen nicht ausprobiert...
Mein Code erzeugt tatsächlich "nur" eine Navigation, die Du so formatieren kannst,
wie Du lustig bist, ganz ohne Tabelle...

Damit hast Du den ganz großen Vorteil von CSS: stell Dir mal vor, Du hast Dein
Projekt fertig, mit z.B. 100 Seiten, und beschließt dann, dass Du die Navigation
lieber horizontal statt vertikal möchtest... - Mit Tabellen müsstest Du jede Deiner
100 Seiten bearbeiten, mit CSS nur die CSS-Datei...

Das CSS macht den Mouseover:

• die Links sind blau
• der aktive Link ist grün
• beim Drüberfahren mit der Maus ist der Link rot

Das gleiche geht auch mit Hintergrundbildern:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<a href="http://www.sternenwinde.de.tf" class="eingang"><img src="http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaMit.jpg /></a>
</body>
</html>

CSS:

a.eingang {
display:block;
width:70px;
height:87px;
background-repeat:no-repeat;
background-image:url(http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaOhne.jpg);
}
a.eingang img {
visibility:hidden;
 }
a.eingang:hover {
background-image:url(http://sternenwinde.lima-city.de/ForumSternis/TeamNyotaMit.jpg);
 }

Die Codes haben deshalb keinerlei Ähnlichkeit, weil Deins JavaScript ist und meins CSS...

Probier's mal aus.

Hinweis noch, weil es Dich eventuell verwirrt: ich setze das Over-Bild als Vordergrundbild
ein und mache es mit visibility:hidden; unsichtbar, das hat den Vorteil, dass es beim
Laden der Seite mitgeladen wird und nicht erst beim ersten Mouseover nachgeladen
werden muss. Außerdem kannst Du es dann im Print-CSS einfach auf visible setzen
(die meisten Browser drucken Hintergrundbilder in den Standard-Einstellungen nicht mit...).

Grüße
Bernhard

P.S.: die Pfadangaben zu den Bildern sind absolut, nach Möglichkeit solltest Du mit relativen Pfaden arbeiten...

 

[Tokala]

Hallo Bernhard,

danke! Endlich habe ich ein bisschen was verstanden. Zum Beispiel auch, dass ich sowohl den HTML-Code, als auch den CSS-Code brauche ... das war mir vorher irgendwie nicht klar x.x
Dummerweise habe ich deshalb nun trotz deiner schönen Codes ein Problem. Das ganze Mouseoverzeug brauche ich für ein Forum. Es ist eines bei einem kostenlosen Anbieter, der mir jedoch so viel Freiheit gibt, dass ich hemmungslos in den Templates herumcoden darf. Daher wollte ich in eines dieser Templates etwas einfügen, sodass ich im Forum selbst eine Art "Informationszeile" habe. Dafür wollte ich den Mouseovereffekt. Jetzt kannst du dir wohl schon das Problem vorstellen - wohin mit dem CSS-Code? War die ganze Sache doch für die Katz, weil das unter diesen Vorraussetzungen gar nicht funktioniert?
Wobei, für die Katz natürlich nicht, ich hab schon wieder viel gelernt, aber ich fände es sehr schade, wenn es jetzt daran scheitert. Wo du mir schon so viel geholfen hast.

Liebe Grüße,
Tokala