Hover text-bmp ohne Weissen Hintergrund anzeigen

Computer: Software & Programmierung HTML & CSS
1

Hallo zusammen,

ich habe ein Problem, bei dem ich nicht weiterkomme…
und Google liefert mir auch nicht das was ich brauche.

Ich Programmiere gerade an einer Homepage.
und auf der Index.htm sollen die einzelnen Links in einem Kreis angeordnet sein.
Und um einen schönen Effekt zu erzielen habe ich mit Photoshop den Text „Gästebuch“ mit durchsichtigem Hintergrund geschrieben.
und als „gb-off.bmp“ abgespeichert.
danach habe ich den Schriftzug noch mit einem Schein versehen und diese Datei als „gb-on.bmp“ abgespeichert.

HTM-Code:

link-test

#wechsel a {
background: url(gb-on.bmp) no-repeat;
display:block; width:200px;
}
#wechsel img {
display:block; width:200px; height:70px; border:0;
}
#wechsel a:hover img {
visibility: hidden;
}
#wechsel a:hover {
border:0;
}
* html #wechsel a {
margin-right:1px;
}
* html #wechsel a:hover {
width:107px; margin-right:0;
}

CSS-Code:

body {

background-image: url(„gold.jpg“);
background-repeat: no-repeat;
}

ich hab also ein Hintergrundbild für die ganze Seite und Eine Schaltfläche die ich mit a:hover Durchsichtig mache wenn die Maus darüber geht.

Mein Problem nun ist das Der Text „Gästebuch“ in einem weißem Kasten ist, das macht natürlich den ganzen Effekt zunichte.
daher wollte ich fragen ob es nur mit CSS und HTML
realisierbar ist das nur der Text „Gästebuch“ auf dem Hintergrundbild erscheint?

Vielen Dank

2

Hallo,

ganz kapiert habe ich es nicht, so ohne Datei zum anschauen. Aber ein bmp kann mW keine Transparenz haben. Und fürs Web ist es auch nicht so wahnsinnig geeignet. Warum machst du es überhaupt als bmp?

Grüße

3

Moin,

Ich Programmiere gerade an einer Homepage.

Naja, das was Du derzeit tust, hat nicht viel mit Programmieren zu tun, aber egal.

und auf der Index.htm sollen die einzelnen Links in einem
Kreis angeordnet sein.

Wenn ich Dich richtig verstehe, ist das irrelevant für Deine Frage.

HTM-Code:

Die Sprache heißt HTML*L*.
Hast Du das auch als Link? Dann wird es IMHO einfacher, Dein Problem zu verstehen.

ich hab also ein Hintergrundbild für die ganze Seite und Eine
Schaltfläche die ich mit a:hover Durchsichtig mache wenn die
Maus darüber geht.

Davon sehe ich nichts. Wenn Du mit der Maus drüber gehst, blendest Du das Bild aus, aber durchsichtig (transparent) machst Du nichts.

Mein Problem nun ist das Der Text „Gästebuch“ in einem weißem
Kasten ist

Woher kommt der Kasten?
In dem Code kann ich keinen weißen Kasten erkennen.
Deswegen wäre es angebracht, einen Link zur Seite zu posten.

das macht natürlich den ganzen Effekt zunichte.

Dann mach den weißen Kasten weg :wink:

daher wollte ich fragen ob es nur mit CSS und HTML
realisierbar ist das nur der Text „Gästebuch“ auf dem
Hintergrundbild erscheint?

Gästebuch
lässt einen Text auf einem Hintergrundbild erscheinen.

Ich versteh Dich nicht ganz. Vielleicht wird es klarer, wenn Du den Link einstellst.

LG,
-Efchen

4

Hallo Stodla,

Und um einen schönen Effekt zu erzielen habe ich mit Photoshop
den Text „Gästebuch“ mit durchsichtigem Hintergrund
geschrieben.
und als „gb-off.bmp“ abgespeichert.

Du verwendest mit einer bitmap das falsche Grafikformat - die Browser können für gewöhnlich mit dem Alphakanal einer bitmap nichts anfangen, daher werden diese Bereiche nicht wie gewünscht transparent dargestellt. Speichere Deine Bilder im Grafikformat .gif, dann müsste es gehen.

Noch ein Tipp am Rande: Dein Quelltext ist nicht ganz korrekt (Tags unsinnig oder nicht geschlossen). Du solltest auf jeden Fall von einen Validator bemühen (http://validator.w3.org/)

Schöne Grüße
Yasmin

5

gewünscht transparent dargestellt. Speichere Deine Bilder im
Grafikformat .gif, dann müsste es gehen.

gif mit transparenz
(bei Photoshop dann für Webseite Speichern , sonst wird es auch noch das falsche gif format, was eben nicht im browser angezeigt werden kann.)

6

Tach,

Noch ein Tipp am Rande: Dein Quelltext ist nicht ganz korrekt
(Tags unsinnig oder nicht geschlossen). Du solltest auf jeden
Fall von einen Validator bemühen (http://validator.w3.org/)

Wenn man das schon anspricht, dann könnte man auch auf die zahlreichen anderen Fehler und Hässlichkeiten hinweisen. :smile:

  • gehört nicht in den body.
  • Geschlossenes script, obwohl nicht offen.
  • Geschlossenes a, obwohl nicht offen.
  • Verwendung von Attributen zur physischen Inhaltsauszeichnung.
  • Unsinnige Verwendung eines div.
  • div öffnen, ohne es zu schließen.
  • Großschreibung von Elementen in XHTML.
  • Ungültige URL bei Verlinkung des Stylesheets.
  • Verwendung eines Stylebereichs statt eines externen Stylesheets.
  • Seltsamer und unlogischer Alternativtext des Images.

SCNR,
-Efchen