nicht angemeldet
Bildwechsel per Mouseover in Tabelle...
StruppiHallo,
ich habe folgendes Problem:
in einer Tabelle habe ich in verschiedenen Zellen das selbe Bild, welches als Hintergrundgrafik eingebunden ist und bei Mouseover wechseln sollte, was allerdings nur funktioniert, wenn diese Grafik in der aller ersten Zelle steht.
Das kann ich nicht ganz nachvollziehen und finde auch keine Lösung dazu.
Hier ein Beispiel:
<HTML>
<HEAD>
<TITLE>
TEST
</TITLE>
<STYLE TYPE = "text/css">
<!--
#SYMBOL a {
display : block;
background-image : url('Images/Download_1_Frame.gif');}
#SYMBOL a:hover {
background-image : url('Images/Download_animated.gif');}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD
ID = "SYMBOL"
WIDTH = "80"
HEIGHT = "80">
<A HREF = "#">
</A>
</TD>
<TD
ID = "SYMBOL"
WIDTH = "80"
HEIGHT = "80">
<A HREF = "#">
</A>
</TD>
<TD
ID = "SYMBOL"
WIDTH = "80"
HEIGHT = "80">
<A HREF = "#">
</A>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Wenn ich jetzt zum Beispiel die erste Zelle komplett (nicht nur den Inhalt) lösche, dann funktioniert der Bildwechsel in der zweiten Zelle, die dann die erste ist... usw.
An der gleichen ID kann es eigentlich nicht liegen, denn damit habe ich an anderer Stelle bisher keine Probleme gehabt.
-
Ergänzung:
Jetzt habe ich festgestellt, daß es lediglich im MS IE nicht funktioniert, Firefox 2.0 macht es ohne Probleme.
Hat hier vielleicht jemand einen Lösungsansatz oder kann mir erklären, was ich falsch gemacht habe bzw. ändern müßte?
Vielen Dank im Voraus.
-
Hallo,
Ergänzung:
Jetzt habe ich festgestellt, daß es lediglich im MS IE nicht funktioniert, Firefox 2.0 macht es ohne Probleme.
Hat hier vielleicht jemand einen Lösungsansatz oder kann mir erklären, was ich falsch gemacht habe bzw. ändern müßte?
Verwende doch einfach Klassen!
HTML:<td class="symbol"><a href="#">bla...</a></td>
CSS: <style type="text/css">
<!--
td.symbol a {
display : block;
background-image : url('Images/Download_1_Frame.gif');}
td.symbol a:hover {
background-image : url('Images/Download_animated.gif');}
-->
</STYLE>BTW: woher hast du diese merkwürdige Codeschreibweise her?
Grüße,
Willi--
Mein SelfCode: ie:{ fl:| br:> va:) ls:? fo:| rl:? n4:? ss:| de:> js:| ch:? sh:( mo:? zu:}-
Hallo Willi
BTW: woher hast du diese merkwürdige Codeschreibweise her?
Meinst Du mit der Schreibweise die Art der Text-ormatierung oder die Verwendung von IDs?
Ich habe den Quellcode abgeändert und jetzt sieht es bei mir wie folgt aus:
<HTML>
<HEAD>
<TITLE>
TEST
</TITLE>
<STYLE TYPE = "text/css">
<!--
TD.SYMBOL a {
display : block;
background-image : url('Images/Download_1_Frame.gif');}
TD.SYMBOL a:hover {
background-image : url('Images/Download_animated.gif');}
-->
</STYLE>
</HEAD><BODY>
<TABLE>
<TR>
<TD
CLASS = "symbol"
WIDTH = "80"
HEIGHT = "80">
<A HREF = "#">
</A>
</TD>
<TD
CLASS = "symbol"
WIDTH = "80"
HEIGHT = "80">
<A HREF = "#">
</A>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>Es funktioniert trotzdem nur der Bildwechsel-Effekt für Zelle 1.
Bei Zelle 2 tut sich gar nichts.
Weißt Du hier weiter?
Aber erst einmal vielen Dank für den Tipp mit den Klassen.
Gruß,
Miguel-
Moin
du musst eine Schreibweise nutzen: SYMBOL oder symbol
Gruß
rfb-
Moin
du musst eine Schreibweise nutzen: SYMBOL oder symbol
Gruß
rfbHallo,
leider ändert das auch nichts, wenn ich die Groß-/ Kleinschreibung beachte.
Es bleibt unverändert.
Das Problem ist, daß lediglich die erste Zelle das macht, was sie machen soll.
Der Inhalt der zweiten Zelle bleibt selbst bei Anwendung der Klassen-Zuordnung unverändert, wenn man mit der Maus darüberfährt.In anderen Fällen habe ich es umsetzen können, daß Hintergrundfarbe oder andere Eigenschaften geändert werden - und auch mit mehreren Zellen, die die gleiche Klasse verwenden.
Kann es hier mit "background-image" zusammenhängen?Gruß,
Miguel-
Moin
entferne mal die Anführungszeichen bei URL()
Gruß
rfb-
Moin
entferne mal die Anführungszeichen bei URL()
Gruß
rfbHallo,
Die Anführungszeichen setze ich prinzipell, denn bei längeren Dateinamen oder Dateinamen mit Sonder-/ Leerzeichen usw. würde der Dateiname allenfalls unter Windows gefunden und die HTML-Datei lediglich bei lokaler Benutzung korrekt laufen.
Auf Web-Servern muß man da schon sichergehen, daß es dabei keine Probleme gibt.Trotzdem danke für den Tipp.
Die Lösung meines Problems ist übrigens unter folgendem Link nachzulesen:
http://forum.de.selfhtml.org/?t=142095&m=923194Gruß,
Miguel
-
-
Hallo,
In anderen Fällen habe ich es umsetzen können, daß Hintergrundfarbe oder andere Eigenschaften geändert werden - und auch mit mehreren Zellen, die die gleiche Klasse verwenden.
Kann es hier mit "background-image" zusammenhängen?Ehrlich gesagt kann ich dein Problem nicht ganz nachvollziehen. Ich habe in einer Test-Datei einmal genau das eingegeben, dass du auch benutzt, aber bei mir hat es reibungslos geklappt. Ich poste untendran mal den Quellcode, aber ich glaube, dass du es vom Sinn her genauso hast. (Bei mir habe ich noch zusätzlich ein paar Angaben gemacht, dass das ganze etwas besser aussieht, aber vom Thema her ist es dasselbe)
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>Test!</title>
<style type="text/css">
* {margin: 0; padding: 0}
p {font-family: calibri}
img {outline: 5px solid transparent;}
img:hover {outline: 5px solid red;}
a:hover img {outline: 5px solid yellow;}
TD.symbol a {
display: block;
background: url(2.jpg);
width: 200px;
height: 200px;}
TD.symbol a:hover {
background: url(1.jpg);
width: 200px;
height: 200px;}
</style>
</head>
<body>
<TABLE>
<TR>
<TD class="symbol">
<A HREF = "#"><p>nichts^^</p></A>
</TD>
<TD class="symbol">
<A HREF = "#"><p>nichts^^2</p></A>
</TD>
</TR>
</TABLE>--
Mein SelfCode: ie:{ fl:| br:> va:) ls:? fo:| rl:? n4:? ss:| de:> js:| ch:? sh:( mo:? zu:}-
Hallo Willi,
jetzt hab ich es !!! ;-)
Erst einmal vielen Dank, daß Du es selbst ausprobiert hast.
Wie ich eingangs erwähnt hatte, habe ich mein Vorhaben bereits mit anderen Zellen einer Tabelle umsetzen können.
Dies funktionierte auch OHNE Klassen. Und ich wußte auch, daß es geht. Logisch ist es, nur mit Klassen natürlich eleganter. Mit Klassen habe ich noch nie gearbeitet, aber man lernt ja bekanntlich nie aus. Vielen lieben Dank für den Tipp.Nun die Umsetzung von Dir:
Der kopierte Code funktionierte auch bei mir anstandslos. Wäre es nicht der Fall gewesen, hätte ich wohl eher ein anderes Problem als eines mit dem Quelltext...
Naja, ich paßte Deinen Quelltext Stück für Stück an meinen an -> bis es nicht mehr funktionierte...Die Lösung ist: WIDTH aus dem TD-TAG löschen und in die CSS-Definition einbauen. So hast Du es nämlich auch getan.
Also die Lösung habe ich zumindest. Firefox konnte auch mit der Mischung zwischen "Eigenschaften im HTML TAG" und "Eigenschaften per CSS" umgehen. Der MS IE offensichtlich nicht.
Nochmals vilen Dank für die schnelle Hilfe.
Gruß aus München und einen schönen Abend noch.
-
-
-
-
-
-
-
Moin
An der gleichen ID kann es eigentlich nicht liegen, denn damit habe ich an anderer Stelle bisher keine Probleme gehabt.
na, hier schon - und außerdem ist es einfach falsch!
Es genügt aber <table id="SYMBOL"> zu schreiben und stattdessen alle anderen ID="SYMBOL" zu löschen.
Das ist dann eindeutig und der Browser weiß: "für alle a innerhalb dem Element mit der ID SYMBOL gilt {...}" wie du es ja im Stylesheet angibst.Gruß
rfb-
Hallo,
»»na, hier schon - und außerdem ist es einfach falsch!
also daß es GANZ falsch ist, kann nicht sein, denn wie schon erwähnt funktioniert es problemlos mit anderen Zellen.Aber gut...
Das mit <table id="SYMBOL"> kann ich nicht machen, denn es gibt andere Zellen, die ebenfalls ein a-TAG beinhalten und denen ich andere Styles per CSS zuweise.Ich müßte demnach schon die ID der Tabellenzelle zuweisen, wie ich es getan habe.
Oder gibt es hier noch eine andere Möglichkeit?
Gruß,
Miguel
-
-
Hier ein Beispiel:
Wozu die Tabellen, du kannst das ganze auch ohne eine Tabelle machen.
<style type="text/css"> ul.nav { float:left; width:80px; list-style: none; margin: 0; padding: 0; } ul.nav li a { display: block; background-image : url(pic.gif); height:80px; text-decoration:none; } ul.nav li a:hover { background-image : url(pic2.gif); } </style><ul class="nav"> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> </ul>Struppi.
--
Javascript ist toll (Perl auch!)-
Hallo,
die Tabellen benötige ich zwingend für mein Layout.
Es ist sicherlich eine Geschmackssache.Ich habe das eingans erwähnte Problem übrigens schon lösen können.
Trotzdem vielen Dank.
Gruß,
Miguel-
die Tabellen benötige ich zwingend für mein Layout.
Es ist sicherlich eine Geschmackssache.Naja, es ist eher Unkenntniss. Aber mit Tabellen zu arbeiten ist wesentlich schwieriger.
Ich habe das eingans erwähnte Problem übrigens schon lösen können.
ich weiß, ich wollte nur eine einfacheren Weg zeigen.
Struppi.
--
Javascript ist toll (Perl auch!)
-
-