[CSS] Hover-Effekt mit zwei Grafiken?

[Kate]

Morgen. http://www.multimediaxis.de/images/smilies/old/s_065.gif


Ich habe folgendes Problemchen:

Ich brauche einen Hover-Effekt fuer diese Navigation:

Klick. (http://www.v-the-series.com/drug/index.html)

Ich habe fuer jeden der Links in der Navigationsleiste jeweils eine blaue und eine orange Grafik. Die orangen Grafik sollen zum Einsatz kommen, wenn man den jeweiligen Link hovert, während die blaue Grafik generell statisch Verwendung findet.

Ich wollte es erst ähnlich wie hier versuchen:


.navi a {
display:block;
width:100;
height:25px;
background: transparent url(img.jpg) no-repeat;
}

.navi a:hover {
background-position: -100px 0;
}

Es wird eine Grafik als background-image genutzt, in der beide zu verwendenden Grafiken abgebildet sind. Wird der Link gehovert, wird die Hintergrundgrafik quasi um minus 100 Pixel nach rechts verschoben, also effektiv 100 Pixel nach links.

Das Problem ist nur, dass die Grafiken nicht alle gleich breit sind. Ich habe aber das Selbe schon mal irgendwie hinbekommen, nur mit uebereinander liegenden Grafiken. Wie ich das hinbekommen hab, weiss ich allerdings nicht mehr.

Hat vielleicht jemand 'ne Idee, wie ich den gewuenschten Effekt sonst noch ohne JavaScript hinkriegen könnte?

Danke schon mal im Voraus! :]

[Spark Amandil]

3 Vorschläge:
1. Naja in der Höhe sind sie ja identisch. Warum verschiebst du sie nicht einfach vertikal anstatt horizontal?
2. Oder mach die Grafik breiter bis zu einem Wert von dem du dir sicher sein kannst dass jeder Button sie erreicht.
3.Ansonsten klassisch zwei Bilder nehmen
a background:url(img1.jpg);
a:hover background:url(img2.jpg);

btw, sollte n png nicht bessere Qualität und kleinere Dateigröße bieten in diesem Fall?

[Whiz-zarD]

btw, sollte n png nicht bessere Qualität und kleinere Dateigröße bieten in diesem Fall?

Bessere Qualität ja, weil png verlustlos ist.
Kleinere Datei größe vielleicht. Müsste getestet werden.

Da die blauen nicht die selbe Größe haben, wäre die simpelste Methode, sie auf die Größe der orangenen Buttons anzugleichen und da oben einfach die orangenen Strich zeichnen und fertig.

Andere Möglichkeit:
Die orangenen Buttons an die blauen Buttons anpassen und den orangenen Strich mittels CSS zeichnen.

[Kate]

3 Vorschläge:
1. Naja in der Höhe sind sie ja identisch. Warum verschiebst du sie nicht einfach vertikal anstatt horizontal?

Genau das möchte ich ja, aber ich weiss nicht mehr, wie. :p


2. Oder mach die Grafik breiter bis zu einem Wert von dem du dir sicher sein kannst dass jeder Button sie erreicht.

Geht leider nicht - ich möchte sie alle in exakt der Breite behalten, die sie jetzt haben.


3.Ansonsten klassisch zwei Bilder nehmen
a background:url(img1.jpg);
a:hover background:url(img2.jpg);

Dann muesste ich fuer jeden einzelnen Link eine eigene ID bereitstellen und ihm diese zuweisen. Ist nicht schön.


@ Whiz: As said, ich möchte die Breite so wie sie momentan ist beibehalten.^^


Danke euch beiden aber schon mal! :)

[Whiz-zarD]

@ Whiz: As said, ich möchte die Breite so wie sie momentan ist beibehalten.^^


Hat das einen besonderen Grund?

[Kate]

Ja, Optik.

[Whiz-zarD]

das Resultat sieht doch identisch aus O_o

[Kate]

Eh..., nein. :D

Die Grafiken sind alle (bis auf eine) unterschiedlich breit. Und so soll's auch bleiben. :]

[Whiz-zarD]

Eh..., nein. :D

Eh...doch ...

[Kate]

... Moment. Ich glaube, du hast da was falsch verstanden, weshalb ich dich widerum falsch verstanden habe.

Die jeweils zum Link gehörenden blauen Grafiken sind genauso breit wie die zum Link gehörenden orangen Grafiken. Die sind nicht verschieden breit. Ergo muss ich da nicht irgendwelche blauen Grafiken an die orangen Grafiken anpassen.

<- Verwirrt. :/

[Whiz-zarD]

Die jeweils zum Link gehörenden blauen Grafiken sind genauso breit wie die zum Link gehörenden orangen Grafiken.


Ich meine auch nicht die Breite, sondern die Höhe.

[Kate]

Dann sag doch auch Höhe und nicht Grösse. :p Diese ist uebrigens schon bei jeder Grafik gleich, muss also nichts angepasst werden.

[Whiz-zarD]

Dann sag doch auch Höhe und nicht Grösse. :p Diese ist uebrigens schon bei jeder Grafik gleich, muss also nichts angepasst werden.

Irgendwie kapier ich einfach nicht, was du willst.
Ich hab mir nochmal deinen oberen Beitrag durchgelesen und versteh nur Bahnhof.

Blau ist die normale Farbe des Buttons. Orange, wenns gehovert wird.

Warum willst du denn nun die Grafik um 100 Pixel nach Links oder Rechts verschieben? Das macht absolut keinen Sinn O_o

[Kate]

Aaaaaaaaaaaalso.

Ich habe beide Grafiken in einer Grafik:

http://npshare.de/files/52148a2e/about.png

Es wird so als Hintergrundgrafik z.B. eines mit display:block; definierten <a> mit einer Breite von 64px gesetzt. So sieht man also nur diesen Bereich:

http://v-the-series.com/drug/about.png

Versetzt man nun mittels background-position: -64px 0; die Hintergrundgrafik 64 Pixel weiter nach links, so sieht man beim Hovern nur noch den Bereich ab dem 65. Pixel in Breite, also nur noch den blauen Bereich der Grafik.

Das kann ich aber leider nicht machen, da jede Grafik verschieden breit ist bzw. auch jeder Link seine eigene Grafik hat und ich somit jedem Link eine einzelne ID definieren und zuweisen muesste.

Die Grafiken haben alle die selbe Höhe, also möchte ich den selben Effekt ueber die selbe Technik erzielen, nur eben ueber die Höhe.

[Indy]

Dann modifziere die Button-Grafik so, dass die unterschiedlichen Buttonformen untereinander stehen und mach das selbe wie bisher, nur dass die background-position beim :hover eben vertikal geändert wird.

Was ist das Problem dabei?

Edit: Alternativ ginge wohl auch folgendes zur Positionsbestimmung:

.navi a:
background: transparent url(img.jpg) no-repeat top left;

.navi a:hover:
background: transparent url(img.jpg) no-repeat bottom right;

[justgotowned]

sorry for OT, aber kann mir mal wer erklären wie ich in einer Grafik Datei die Position des Dateiteils den ich als Background haben will bestimmen kann?
Hab das shcon oft gesehen und fands sehr merkwürdig dachte gar nicht das das mit html geht scheinbar doch, hab nur noch nie gesehen wie das funzt :).

Wäre sehr nett, ein hilfreicher Link wäre auch i.O.

[WeTa]

Sowas hier?
http://www.alistapart.com/articles/sprites

[Whiz-zarD]

ich glaub, er meint wohl sowas hier:
http://www.css4you.de/background-position.html