Bildaustausch mit reinem CSS??

[Mel]

Hallo,

habe schon wieder ne Frage zu CSS.
Ich will eine Website bauen die komplett auf Tabellen verzichtet und auf reinem CSS aufgebaut ist.
So wie ich das bisher überblicke, gibt es die Möglichkeit Bilder auf meiner Seite zu platzieren ohne dass ich die Grafiken mit einem <img src> in die Seite laden muss.

Nun will ich aber bei Buttons einen Bildaustausch haben (klassischer Mouseover). Geht das denn wenn ich die Bilder NICHT auf die "übliche" Art einfüge sondern per css??? Ich habe Seiten gesehen die das anscheinen können...(http://www.mezzoblue.com z.b.)
Also falls es möglich ist: WIE GEHT DAS?

Danke Euch schon mal sehr für Eure Hilfe

lg Mel

[Fabian St.]

Hi!

Hallo,

habe schon wieder ne Frage zu CSS.
Ich will eine Website bauen die komplett auf Tabellen verzichtet und auf reinem CSS aufgebaut ist.

Schon mal ein guter Anfang :-)

So wie ich das bisher überblicke, gibt es die Möglichkeit Bilder auf meiner Seite zu platzieren ohne dass ich die Grafiken mit einem <img src> in die Seite laden muss.

Ja, indem du sie mit CSS als Hintergrundbilder[background-image:url("foobar.png")] definierst.

Nun will ich aber bei Buttons einen Bildaustausch haben (klassischer Mouseover). Geht das denn wenn ich die Bilder NICHT auf die "übliche" Art einfüge sondern per css??? Ich habe Seiten gesehen die das anscheinen können...(http://www.mezzoblue.com z.b.)
Also falls es möglich ist: WIE GEHT DAS?

Schau dir mal hierzu die CSS Pseudoklasse :link, :active, und insbesondere :hover an. Der IE kann jedoch :hover nur auf Links anwenden!

lg Mel

Grüße,
Fabian St.

[Mel]

Hallo Fabian,

Nun will ich aber bei Buttons einen Bildaustausch haben (klassischer Mouseover). Geht das denn wenn ich die Bilder NICHT auf die "übliche" Art einfüge sondern per css??? Ich habe Seiten gesehen die das anscheinen können...(http://www.mezzoblue.com z.b.)
Also falls es möglich ist: WIE GEHT DAS?

Schau dir mal hierzu die CSS Pseudoklasse :link, :active, und insbesondere :hover an. Der IE kann jedoch :hover nur auf Links anwenden!

Das ist schon mal ein wertvoller Tipp.
Bei mir ist das so: Ich habe Grafiken, die Buttons darstellen. Diese sollen als link funktionieren. Und ein Mouseovereffekt soll auch noch dabei sein.
Ich frage mich gerade ob das überhaupt funktionieren kann, wenn ich die Grafiken per CSS reinlade (also als background-image).
Wie soll ich die denn verlinken?

Hmm ich hänge da grade fest...
So sieht die CSS aus:

#presse
{ background-image: url(nwt_button_presse.gif);
background-repeat: no-repeat;
background-position: center; text-align: center;
position: relative; width: 80px; height: 18px }

Mit <div id = "presse"></div> habe ich also die Grafik platziert.
Kann ich die dann überhaupt verlinken?? Wenn ja WIE?
Und wie binde ich dann a:link und a:hover ein...?

Vielen Dank für Deine Hilfe,

Mel

[Danny]

Hi Mel,

hier zwei interessante Links für Dich (u.a. CSS-Rollover):

http://www.alistapart.com/topics/css/
http://cssvault.com/cat_image_techniques.php

<div id = "presse"></div>

Es ist ein weit verbreiteter Irrtum, dass CSS / Positionierung nur mit <div> möglich ist... Du kannst in Deinem Fall auch <img> direkt verwenden, was sinnvolleres Markup ergibt:

<img id="presse" alt=""></img>

freundlichen Gruß
Danny

[Mel]

Hi Danny,

hier zwei interessante Links für Dich (u.a. CSS-Rollover):

http://www.alistapart.com/topics/css/
http://cssvault.com/cat_image_techniques.php

Vielen Dank, die links sind in der Tag ziemlich genial, hab schon einiges gefunden dass mir gefehlt hat>>

Was mein ursprüngliches Problem betrifft:
ich glaube ich habe da nen logischen Denkfehler.
Wie gesagt ich will komplett darauf verzichten ein <img src> Tag auf die Seite zu laden >> nur wie soll der Button dann verlinkt werden wenn er nur mit css erscheint? Geht ja irgendwie nicht oder?

Bin grad blockiert....

Grüsse Mel

[Danny]

Bitteschön!

will komplett darauf verzichten ein <img src> Tag auf die Seite zu laden

Das img-Tag würde ich schon noch verwenden aber das src-Attribut brauchst Du (meines Wissens nach) nicht unbedingt. Und wenn es für valides HTML nötig ist, dann kannst Du src="" schreiben. Die Verlinkung kann allein im CSS über die URL des Hintergrundbildes erfolgen.

freundlichen Gruß
Danny

[Mel]

Das img-Tag würde ich schon noch verwenden aber das src-Attribut brauchst Du (meines Wissens nach) nicht unbedingt. Und wenn es für valides HTML nötig ist, dann kannst Du src="" schreiben. Die Verlinkung kann allein im CSS über die URL des Hintergrundbildes erfolgen.

Hi Danny

hmm das würde dann im Quelltext wohl so aussehen:
<a href ="dummy1.html"><img src="" id="presse" border="0"></a>

Ziemlich cool das funktioniert tatsächlich. Nur ist die Darstellung im IE ein bisschen seltsam....sieht fast so aus als würder IE versuchen ein bild darzustellen dass er nicht findet ;(((

Ist es eigentlich geschickt von mir das so zu lösen? Oder würdest Du die Grafik lieber ganz normal in die Seite laden...?

Vielen Dank, Mel

[wahsaga]

hi,

hmm das würde dann im Quelltext wohl so aussehen:
<a href ="dummy1.html"><img src="" id="presse" border="0"></a>

Ziemlich cool das funktioniert tatsächlich. Nur ist die Darstellung im IE ein bisschen seltsam....sieht fast so aus als würder IE versuchen ein bild darzustellen dass er nicht findet ;(((

Ist es eigentlich geschickt von mir das so zu lösen?

nein.
warum ein <img>, wenn es gar kein bild geben soll?

formatiere den link als block level element, damit du ihm eine breite zuweisen kannst - und gebe dann direkt dem link das hintergrundbild.

gruß,
wahsaga

[Fabian St.]

Hi Mel!

hmm das würde dann im Quelltext wohl so aussehen:
<a href ="dummy1.html"><img src="" id="presse" border="0"></a>

Ziemlich cool das funktioniert tatsächlich. Nur ist die Darstellung im IE ein bisschen seltsam....sieht fast so aus als würder IE versuchen ein bild darzustellen dass er nicht findet ;(((

In diesem Fall ist das Verhalten des IE's sogar richtig. Du befiehlst ihm ein Bild darzustellen, das es gar nicht nicht gibt, wodurch er es auch nicht darstellen kann.

Ist es eigentlich geschickt von mir das so zu lösen? Oder würdest Du die Grafik lieber ganz normal in die Seite laden...?

Ich würde das persönlich auf gar keinen Fall so lösen. Von der Syntax mag es ja richtig sein, aber semantisch falsch. Mach lieber das <a></a> zum Blockelement mit [display:block], damit du ihm eine Höhe und Breite zuweisen kannst, definiere das Bild als Hintergrund, der sich dann z.B. bei :hover ändert:

<style type="text/css">

a#presse{
         display:block;
         height:30px;  /*
         width: 70px;   * Beispiel-Größen */
         background-image:url("image-normal.png");
        }

a#presse:hover{
         display:block;
         height:30px;  /*
         width: 70px;   * Beispiel-Größen */
         background-image:url("image-onmouseover.png"); /* bild bei
                                                       *onmouseover */
         }

</style>

Grüße,
Fabian St.

[Mel]

Hi Fabian,

danke für die ausführliche Info>> aber wie sieht das dann im Quelltext aus??

Ich bin eine Anfängerin was komplexere CSS-SAchen betrifft...

Vielen Dank!!!
Mel

[Mel]

Würde das so aussehen?

<a href ="dummy1.html"><div id="presse"></div></a>

...oder wie kann ich das anders lösen als immer wieder ein <div>-Tag zu verwenden?

[Fabian St.]

Hi!

Würde das so aussehen?

Nein :-)

So würde es ausschauen:

<a href="site1.html" id="presse">Mel's erste Seite</a>

Wenn du nun über den Link fährst ändert sich das Hintergrundbild.
Dein Lösung würde schon gar nicht funktionieren, weil kein Block-Element (<div>) in einem inline-Element(<a>) stehen darf.

Grüße,
Fabian St.

[Mel]

So würde es ausschauen:

<a href="site1.html" id="presse">Mel's erste Seite</a>

Wenn du nun über den Link fährst ändert sich das Hintergrundbild.
Dein Lösung würde schon gar nicht funktionieren, weil kein Block-Element (<div>) in einem inline-Element(<a>) stehen darf.

Hi Fabian;))

Hmmm es gibt nur ein Problem...ich muss mich an ein streng vorgegebenes Design halten, ist keine private Seite...

d.h. ich kann also keinen Text wie Du es vorschlägst zwischen <a>-Tags schreiben>> der Button (also die Grafik) soll als link dienen.

Ich glaube ich mache das alles viiiieeel zu umständlich..
ich wollte halt darauf verzichten Grafiken in die Seite zu laden..aber ich habe keine Ahnung ob das dann so geht.

Mel

[wahsaga]

hi,

d.h. ich kann also keinen Text wie Du es vorschlägst zwischen <a>-Tags schreiben>> der Button (also die Grafik) soll als link dienen.

ja dann machst du es halt ohne text ...

(ja, im sinne der barrierefreiheit sollte man natürlich lieber dafür sorgen, dass der linktext zwar da ist, aber eben vom bild verdeckt wird. ein zusätzlicher span, sowie line-height, padding und overflow können dabei helfen.)

gruß,
wahsaga

[Mel]

ja dann machst du es halt ohne text ...

Ahhh..ihr verwirrt mich alle so;)

Wie könnte denn das ohne text aussehen?

(ja, im sinne der barrierefreiheit sollte man natürlich lieber dafür sorgen, dass der linktext zwar da ist, aber eben vom bild verdeckt wird. ein zusätzlicher span, sowie line-height, padding und overflow können dabei helfen.)

Wie ? Was?

*verzweifel*

Mel

[Fabian St.]

Hi Mel!

Hi Fabian;))
Hmmm es gibt nur ein Problem...ich muss mich an ein streng vorgegebenes Design halten, ist keine private Seite...

d.h. ich kann also keinen Text wie Du es vorschlägst zwischen <a>-Tags schreiben>> der Button (also die Grafik) soll als link dienen.

Dann lässt du eben den Text zwischendrin weg. Du solltest dann jedoch
folgende Konstruktion verwenden (was wahsaga mit Barrierefreiheit meinte):

<a href="site1.html" id="presse"><span class="hidden">Mel's erste Seite</span></a>

und zusätzlich im Stylesheet:

span.hidden{
            display:none;
            }

Somit wird es nicht angezeigt, von ScreenReadern aber immernoch vorgelesen.

Grüße,
Fabian St.

[Mel]

Dann lässt du eben den Text zwischendrin weg. Du solltest dann jedoch
folgende Konstruktion verwenden (was wahsaga mit Barrierefreiheit meinte):

<a href="site1.html" id="presse"><span class="hidden">Mel's erste Seite</span></a>

und zusätzlich im Stylesheet:

span.hidden{
            display:none;
            }

Hi Fabian;))))

sehr cool>> sowas habe ich gesucht! Dann werd ich es mal ausprobieren ....

bis später vermutlich;))

und 10000mal Danke....
Mel

[Danny]

Äh, sorry wegen meinem Vorschlag mit img. Ich war wohl auf dem falschen Dampfer.
Wie Fabiat und der Wahsaga geschrieben haben, brauchst Du in Deinem Quelltext-Beispiel eigentlich gar kein extra img im HTML anzugeben. Ohne CSS hättest Du es so machen müssen aber mit CSS reicht bereits der einfacher Link mit entspechenden CSS-Eigenschaften aus.

[Struppi]

Nun will ich aber bei Buttons einen Bildaustausch haben (klassischer Mouseover). Geht das denn wenn ich die Bilder NICHT auf die "übliche" Art einfüge sondern per css??? Ich habe Seiten gesehen die das anscheinen können...(http://www.mezzoblue.com z.b.)
Also falls es möglich ist: WIE GEHT DAS?

Da du ja unbedingt auf Bilder verzichten möchtest und vermutlich auch IE Benutzern die Banner nicht vorhenthalten möchtest (es wäre ansonsten einfacher) geht es z.b. so:

.banner
{
width: 120px;
height:80px;
}

.banner a
{
display:block; /* für den IE */
background: url(....) no-repeat 0 0;
}
.banner a:hover
{
background: url(....) no-repeat 0 0;
}

<div class="banner"><a href ="#"></A></div>

Struppi.