CSS -> Wechsel von Bild zu Tabellen-HG mit Text

[Toxictype]

Ahoi,

schaut doch mal hier herein. Wenn die Seite geöffnet wurde, bitte eine der beiden Flashversionen wählen und dann auf 'Deutsch' und nochmal auf 'Projekte' klicken.
Oben sind Bilder aufgeführt, die bei Mouseover in eine unifarbene Fläche mit Text wechseln. Das ganze ist mit Flash erstellt. Da ich auf 'barrierefreies' Design stehe, versuche ich das ganze in CSS umzusetzen.

Der Anfang paßt, aber leider bleibt der gelbe HG nicht stehen und ich würde gerne wissen, wie ich Text in die Zelle bekomme, der auch erst bei Mouseover zu sehen ist. Könnt ihr mir vielleicht einen Tipp geben, wenn es überhaupt geht.

Meine CSS-Zeilen bis jetzt:

.piclink:link {background-image: url(../grafix/buerogebaeude.jpg); width: 100px; height: 130px; text-decoration: none;}
.piclink:visited {background-image: url(../grafix/buerogebaeude.jpg); width: 100px; height: 130px; text-decoration: none;}
.piclink:active {background-color: yellow; width: 100px; height: 130px; text-decoration: none; font-size: 80%; font-family:Verdana, Arial, Helvetica, sans-serif; color: #CC0000; text-decoration: none;}
.piclink:hover {background-color: yellow; width: 100px; height: 130px; text-decoration: none; font-size: 80%; font-family:Verdana, Arial, Helvetica, sans-serif; color: #CC0000; text-decoration: none;}

 

[dkdenz]

Erstmal die richtige Reihenfolge:
link | visited | hover | active

Man kann keinen Text bei hover einfach anzeigen lassen,
der nicht schon vorher bei den anderen Selektoren drin steht.
Das wäre ja schon dynamisch.

Es gibt zwei Möglichkeiten:
Der Text steht in einem Pic, welches Du dann im hover auswechselst,
oder im hover wird die Textgröße so angegeben wie Du sie willst,
in den anderen aber mit einer Größe von 1px.
Da solltest Du dann aber auch die Schriftfarbe auf die Hintergrundfarbe abstimmen.

 

[Toxictype]

Salve dkdenz,

wenn ich zwei Bilder bzw. Grafiken erstelle, kann ich auch den normalen JS-Mouseover nehmen.
Die Idee, den Text auf 1px bzw. 0px zu setzen finde ich gut und werde sie jetzt mal ausprobieren.

 

[dkdenz]

Salve dkdenz,

wenn ich zwei Bilder bzw. Grafiken erstelle, kann ich auch den normalen JS-Mouseover nehmen.
Die Idee, den Text auf 1px bzw. 0px zu setzen finde ich gut und werde sie jetzt mal ausprobieren.

Salve Toxictype
Natürlich kannst Du auch den normalen JS-Mouseover nehmen.
Ich favorisiere da aber eher CSS...

 

[Toxictype]

Hi again!
Ich habe es ausprobiert!
Leider bleibt der hover, also der HG, nicht stehen!
Er wird nur kurz eingeblendet! Im IE 6

 

[Toxictype]

Ach und der NS 7 tut in diesem Falle so, als ob´s gar kein CSS gäbe!

 

[dkdenz]

Ach ja, Du musst natürlich noch allen Links ein display:block; geben...

 

[Toxictype]

DANKE!
Das sieht schon um Längen besser aus, aber leider bleibt der HG immer noch nicht stehen!
Was genau bewirkt display: blocked? Da gibt es noch 1000 andere Möglichkeiten! Das ist WAHNSINN!
Hier nochmal die Zeilen:

.piclink:link {background-image: url(../grafix/buerogebaeude.jpg); width: 100px; height: 130px; text-decoration: none; font-size: 0px; display: block;}
.piclink:visited {background-image: url(../grafix/buerogebaeude.jpg); width: 100px; height: 130px; text-decoration: none; font-size: 0px; display: block;}
.piclink:hover {background-color: E3E3E3; width: 100px; height: 130px; text-decoration: none; font-size: 80%; font-family:Verdana, Arial, Helvetica, sans-serif; color: #333333; display:block;}
.piclink:active {background-color: E3E3E3; width: 100px; height: 130px; text-decoration: none; font-size: 80%; font-family:Verdana, Arial, Helvetica, sans-serif; color: #333333; display:block;}

 

[dkdenz]

DANKE!
Das sieht schon um Längen besser aus, aber leider bleibt der HG immer noch nicht stehen!

Hover bedeutet, das sich der Hintergrund nur ändert,
solange Du mit dem Cursor darüber bist...
Das was Du vorhast, wird so nicht gehen, fällt mir grade mal so ein.

Und display:block; bewirkt,
das der Bereich des Links auf die angegebene Pixelzahl anklickbar wird und nicht nur die Schrift.

 

[bine]

und was ist mit

.piclink:focus {background-color: E3E3E3; width: 100px; height: 130px; text-decoration: none; font-size: 80%; font-family:Verdana, Arial, Helvetica, sans-serif; color: #333333; display:block;}

:focus = für Verweise, die den Fokus erhalten

Ich habs noch nicht ausprobiert, aber vielleicht ist das so möglich!?

http://www.divers.art-stylers.de/css_toxic.html