Bereich aus Bild ausschneiden

[Puccini]

Hi!

ich wollt gern ein einziges Bild verwenden, um mein Menü zu gestallten

dabei sollen alle Grafiken in diesem Bild vorhanden sein

Ich hab zb einen Link:

<a href="index.php" class="buttonMenu" id="buttonLogin"></a>

Jetz wollte ich gern das dieser 2 unterschiedliche grafiken erhält (einam normal und einmal hover)

so sieht mein CSS dafür aus:

a.buttonMenu{
    width: 140px;
    height: 30px;
    margin: 0px 0px 0px 0px;
    display: inline-block;
    text-decoration: none;
    color: black;
    position: relative;
    padding-bottom: 0px;
    background: no-repeat;
    background: url(../gfx/menu/menu_buttons.png);
}
#buttonLogin{
    clip: rect(0px 140px 30px 0px);
}
#buttonLogin:hover{ 
    clip: rect(0px 280px 30px 140px);
}

Sollte mir doch eigentlich einen teil des Bildes ausschneiden oder?? :<

wie stell ich das sonst an?

 

[prm]

Hilft dir das, Ziffer 2 weiter?

 

[Puccini]

ich wollt vermeiden für jeden button eine eigene grafi anlegen zu müssen!

Ich wollt halt gern alle kompackt in einer grafik ;)

Quasi alle Links untereinander und das jeweilige Hoverbild rechts daneben
und dann halt immer den passenden ausschnit mittels css anlegen..

:< hatte gehoft das es geht.

 

[SimonRue]

background: url(../gfx/menu/menu_buttons.png) vertikal horizonzal no-repeat;

Für vertikal bzw. horizontal die Anzahl der Pixel +px angeben um die das Bild verschoben werden soll.
negative Werte verschieben das Bild nach oben bzw. nach links.

 

[Puccini]

Leider klappt dies auch nicht, es ändert sich nix wenn ich über den Link fahre:

#buttonLogin{
    background: url(../gfx/menu/menu_buttons.png) 0 0 no-repeat;
}
#buttonLogin:hover{ 
    background: url(../gfx/menu/menu_buttons.png) 140 0 no-repeat;
}

und es ist horizontal vertikal ;)

Ich weis auch net was da nich gehen soll :<

 

[prm]

Du kannst auch eine Grafik verwenden, auf der all deine unterschiedlichen Buttons und Hover-Buttons abgebildet sind.
Damit dann der richtige angezeigt wird, musst du jeden Link per Klasse so definieren, damit durch entsprechende Angaben bei "background-position" der jeweilige Button-Teil angezeigt wird.
Dieses Prinzip findest du stark vereinfacht hier erklärt. Nach dem gleichen System kannst du eine ganze Liste von Buttons mit nur einer Grafik darstellen.

 

[Puccini]

das weis ich ja ;)

das hab ich auch versucht!

Ich hab es jetzt jedoch lösen können

hier meine Lösung:

#buttonLogout{
    background: url(../gfx/menu/menu_buttons_login.png) left -360px no-repeat;
}
#buttonLogout:hover{ 
    background: url(../gfx/menu/menu_buttons_login.png) right -360px no-repeat;
}

Damit gings wunderbar.

(siehe RageWars auf meiner Seite)