Bildaustausch per CSS

[Chrissie]

Hallo,

baue gerade eine Website, die ausschließlich per CSS formatiert wird.
Für die Navi hätte ich gerne eine Bildaustausch bei Mouseover.

Folgendes Problem dabei:
wenn ich die Bilder in der HTML Seite mit <img> einbinde und dann
über das CSS formatiere, dann passt die Position.
Dann kann ich aber keinen Bildaustausch im CSS machen, denn dazu
müssten sie ja folgendermaßen im CSS eingebunden sein:

background-image: url("pics/about_off.jpg");

Wenn ich die Bilder aber so im CSS einbinde, dann passt die
Position nicht mehr:

position:absolute; top:60px; left:350px; width:150px; height:150px;

Auch nicht, wenn ich statt position background-position angebe.

Woran liegt das denn? Kann mir da jemand helfen?

[Matthias Apsel]

Om nah hoo pez nyeetz, Chrissie!

Hintergrundbilder sollten Hintergrundbilder sein und keine <img>, weil sie der Gestaltung dienen.

Artikel zur Positionierung

Verwendung von CSS-Sprites

mehr kann man ohne konkreten Code nicht sagen.

Matthias

[Chrissie]

Wenn ich in Google Bildaustausch CSS eingebe, dann kommen sehr viele
Beiträge mit diesem code:

(das ist jetzt nur EIN BEISPIEL):

.bild
{
  background-image:url(images/bild.gif);
  width:130px;
  height:19px;
  display:block;
}

.bild:hover
{
  background-image:url(images/bild1.gif);
}

hover ist ja doch der Zustand für den aktiven link, oder nicht?
Hier werden die Bilder als background-image eingebunden....
Also falsch und dann doch mit IMG arbeiten??

Das ist der Code in der HTML Datei:

<div id="about"><img src="pics/about_off.jpg" alt="about_off" /></div>

Und hier im CSS:

div#about {
position:absolute; top:60px; left:350px; width:150px; height:150px;
}

Es handelt sich also NICHT um ein Hintergrundbild, sondern um einen Menübutton.

Om nah hoo pez nyeetz, Chrissie!

Hintergrundbilder sollten Hintergrundbilder sein und keine <img>, weil sie der Gestaltung dienen.

Artikel zur Positionierung

Verwendung von CSS-Sprites

mehr kann man ohne konkreten Code nicht sagen.

Matthias

[suit]

Ich greife mal die beiden essentiellen Teile raus:

Es handelt sich also NICHT um ein Hintergrundbild, sondern um einen Menübutton.

Hintergrundbilder sollten Hintergrundbilder sein und keine <img>, weil sie der Gestaltung dienen.

[Chrissie]

Ist das ne Hilfestellung auf meine Frage?

Ich greife mal die beiden essentiellen Teile raus:

Es handelt sich also NICHT um ein Hintergrundbild, sondern um einen Menübutton.

Hintergrundbilder sollten Hintergrundbilder sein und keine <img>, weil sie der Gestaltung dienen.

[Chrissie]

Vielleicht sollte ich die Frage so formulieren, dass sie in solchen Foren verstanden wird.... :
wie kann ich die Buttonbilder einbinden im CSS für einen Austausch-Effekt?

Ist das ne Hilfestellung auf meine Frage?

Ich greife mal die beiden essentiellen Teile raus:

Es handelt sich also NICHT um ein Hintergrundbild, sondern um einen Menübutton.

Hintergrundbilder sollten Hintergrundbilder sein und keine <img>, weil sie der Gestaltung dienen.

[suit]

Vielleicht sollte ich die Frage so formulieren, dass sie in solchen Foren verstanden wird.... :

Nein, das hast du bereits - du bist nur mit der technisch einwandfreien Antwort unzufrieden.

wie kann ich die Buttonbilder einbinden im CSS für einen Austausch-Effekt?

Sinnvollerweise garnicht - du könntest das Bild absolut in den Link positionieren, mit Clip abschneiden ... aber ich will mir diese Katastrophe garnicht ausmalen.

Schmeiss dein img-Element weg und ersetzes es durch ein Hintergrundbild welches du mittels verschieben (oder ersetzen) tauscht.

Das ist nicht ohne Grund Best Practice.

[Chrissie]

Ich habe keine Antwort gelesen, die ICH verstehe.

Nein, das hast du bereits - du bist nur mit der technisch einwandfreien Antwort unzufrieden.

Ich denke ich soll das SO nicht machen??
"Hintergrundbilder sollten Hintergrundbilder sein und keine <img>, weil sie der Gestaltung dienen."
Und es ist ja kein Hintergrundbild.
Ausserdem: es funktioniert ja nicht!!!
Wenn ich das Bild als background-image einbinde, dann stimmt die Formatierung nicht mehr.
Als IMG ist es an der richtigen Stelle, als background-image irgendwo.
Den entsprechenden Code habe ich auch schon eingestellt.

Schmeiss dein img-Element weg und ersetzes es durch ein Hintergrundbild welches du mittels verschieben (oder ersetzen) tauscht.

Das ist nicht ohne Grund Best Practice.

[suit]

Nein, das hast du bereits - du bist nur mit der technisch einwandfreien Antwort unzufrieden.

Ich denke ich soll das SO nicht machen??

Um sämtliche Verwirrungen zu beseitigen:

Du sollst keien IMG-Element verwenden wenn es nur um Verzierung geht - und deine Menüpunktverzierung ist fast 100%ig sicher nur Verzierung.

"Hintergrundbilder sollten Hintergrundbilder sein und keine <img>, weil sie der Gestaltung dienen."

Ja, dein Menüpunkt dient der Gestaltung - der Inhalt selbst ist nicht die Grafik sondern der Ankertext: darum nimm ein Hintergrundbild.

Und es ist ja kein Hintergrundbild.

Und genau das ist unsinn ;)

Ausserdem: es funktioniert ja nicht!!!
Wenn ich das Bild als background-image einbinde, dann stimmt die Formatierung nicht mehr.

Ja, du kannst nicht davon ausgehen, dass die formatierung für ein Hintergrundbild 1:1 mit der eines img-Elements übereinstimmt. Das musst du natürlich korrigieren - mit CSS.

[Chrissie]

Mann, wisst ihr was... lasst es doch!
Immer wieder poste ich hier,  und immer wieder statt Hilfestellung
dumme Antworten!
Mfg und tschüss....!
Und gleich noch mehr TOFU!

Ich habe keine Antwort gelesen, die ICH verstehe.

Nein, das hast du bereits - du bist nur mit der technisch einwandfreien Antwort unzufrieden.

Ich denke ich soll das SO nicht machen??
"Hintergrundbilder sollten Hintergrundbilder sein und keine <img>, weil sie der Gestaltung dienen."
Und es ist ja kein Hintergrundbild.
Ausserdem: es funktioniert ja nicht!!!
Wenn ich das Bild als background-image einbinde, dann stimmt die Formatierung nicht mehr.
Als IMG ist es an der richtigen Stelle, als background-image irgendwo.
Den entsprechenden Code habe ich auch schon eingestellt.

Schmeiss dein img-Element weg und ersetzes es durch ein Hintergrundbild welches du mittels verschieben (oder ersetzen) tauscht.

Das ist nicht ohne Grund Best Practice.

[Der Martin]

Hallo,

.bild
{
  background-image:url(images/bild.gif);
  width:130px;
  height:19px;
  display:block;
}

.bild:hover
{
  background-image:url(images/bild1.gif);
}

das wäre doch schon mal ein guter Ausgangspunkt.

hover ist ja doch der Zustand für den aktiven link, oder nicht?

Nein. Die Pseudoklasse :hover trifft für ein beliebiges Element dann zu, wenn der Mauszeiger darüber verweilt (wenn man auf das Element "zeigt"). Für IE bis Version 6 war das noch nicht so beliebig, der hat :hover tatsächlich nur bei Links angewendet.
Mit dem aktiven Zustand eines Links hat das aber nichts zu tun.

Hier werden die Bilder als background-image eingebunden....
Also falsch und dann doch mit IMG arbeiten??

Nein, im allgemeinen ist ein Hintergrundbild genau richtig.

<div id="about"><img src="pics/about_off.jpg" alt="about_off" /></div>

Wozu das div-Element?

div#about {
position:absolute; top:60px; left:350px; width:150px; height:150px;
}

Du kannst ebensogut das Bild direkt formatieren.

Es handelt sich also NICHT um ein Hintergrundbild, sondern um einen Menübutton.

Aha. Also ist das Bild doch Verzierung. :-)
Und ich hoffe, du meinst keinen Button, sondern einen Link - ein Button wäre ja zumindest bei deaktiviertem Javascript funktionslos.

<a href="linkziel">Hier entlang</a>

a  
 { display: block;  
   width: 10em;  
   height: 1.5em;  
   background-image: url(zustand1.png);  
 }  
a:hover  
 { background-image: url(zustand2.png);  
 }

Dazu noch ein bisschen Design-Anpassung, und fertig ist der Weihnachtsbaum.

Om nah hoo pez nyeetz, Chrissie!
[...]
Matthias

Und nächstes Mal bitte ohne TOFU. Danke.

So long,
 Martin

[Chrissie]

Link, Button, was immmer.... es ist ein Bild, auf das man klickt, um auf einen weiteren Menüpunkt zu kommen.
Ich habe das halt alles mit divs gemacht...bitte keine Verwirrung...ich bin schon froh, dass es so funnktioniert. Ich habe  ja nicht nur Bilder, sondern auch andere Elemente.

Hallo,

.bild
{
  background-image:url(images/bild.gif);
  width:130px;
  height:19px;
  display:block;
}

.bild:hover
{
  background-image:url(images/bild1.gif);
}

das wäre doch schon mal ein guter Ausgangspunkt.

hover ist ja doch der Zustand für den aktiven link, oder nicht?

Nein. Die Pseudoklasse :hover trifft für ein beliebiges Element dann zu, wenn der Mauszeiger darüber verweilt (wenn man auf das Element "zeigt"). Für IE bis Version 6 war das noch nicht so beliebig, der hat :hover tatsächlich nur bei Links angewendet.
Mit dem aktiven Zustand eines Links hat das aber nichts zu tun.

Hier werden die Bilder als background-image eingebunden....
Also falsch und dann doch mit IMG arbeiten??

Nein, im allgemeinen ist ein Hintergrundbild genau richtig.

<div id="about"><img src="pics/about_off.jpg" alt="about_off" /></div>

Wozu das div-Element?

div#about {
position:absolute; top:60px; left:350px; width:150px; height:150px;
}

Du kannst ebensogut das Bild direkt formatieren.

Es handelt sich also NICHT um ein Hintergrundbild, sondern um einen Menübutton.

Aha. Also ist das Bild doch Verzierung. :-)
Und ich hoffe, du meinst keinen Button, sondern einen Link - ein Button wäre ja zumindest bei deaktiviertem Javascript funktionslos.

<a href="linkziel">Hier entlang</a>

a

{ display: block;
   width: 10em;
   height: 1.5em;
   background-image: url(zustand1.png);
}
a:hover
{ background-image: url(zustand2.png);
}

>   
> Dazu noch ein bisschen Design-Anpassung, und fertig ist der Weihnachtsbaum.  
>   
> > > Om nah hoo pez nyeetz, Chrissie!  
> > > [...]  
> > > Matthias  
>   
> Und nächstes Mal bitte ohne [TOFU](http://de.wikipedia.org/wiki/TOFU). Danke.  
>   
> So long,  
>  Martin  
> 

[Gunnar Bittersmann]

@@Chrissie:

nuqneH

Ich habe  ja nicht nur Bilder, sondern auch andere Elemente.

Schön, dass du sie hast. Magst du uns daran teilhaben lassen?

Und welchen Teil von

Und nächstes Mal bitte ohne TOFU. Danke.

hattest du nicht verstanden?

Qapla'