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:
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?
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?
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.
... 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.
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:
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.
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;
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.
Zitieren
