✔ Bild verschieben

[vandamp]

Hallo,

ich frage mich gerade, ob es möglich ist ein Bild per css zu "verschieben"
Anbei ein Beispielbild, ich will, dass bei hover das Bild praktisch erst ab Pixel 32(die untere Hälfte) angezeigt wird.

vielleicht kennt sich ja einer damit aus und könnte mir ein kleines Beispiel erstellen bzw. nen Link zu der CSS-Eigenschaft, die ich dazu brauche Posten.
Danke

 

[pHyro]

Hi,

du könntest das Bild als Hintergrund eines Elements definieren und per background-position die Position ändern.

Bsp:

CSS:

button#button {
width: 94px; //Länge des Bildes
height: 32px; //Hälfte der Höhe des Bildes
background-image: url('pic.jpg');
background-position: top left;
}
button#button:hover {
background-position: bottom left;
}

HTML:

<button id='button' />

Gruß

 

[vandamp]

ah background-position: danke, funktioniert perfekt.

ne andere Frage ist es überhaupt gescheit so etwas zu verbauen?
oder wäre es besser jedes Bild extra?

meine überlegung dazu ist, dass je weniger Bilder desto schneller ist doch die seit geladen.
Die paar byte, die ich spare wenn ich die Bilder so an einander hänge machen es denk ich nicht aus aber es werden weniger lese Zugriffe benötigt und dadurch trägt es zu einem schnelleren Seitenaufbau bei.

 

[Maik]

Hi,

diese bewährte Technik hat einen Namen: CSS Sprites

In meinem CSS-Tutorial CSS-Rollover stelle ich sie "im kleinen Maßstab" vor, und auch hier im Forum setzen wir sie an diversen Stellen ein.

• http://style.tutorials.de/v6/images/37/map_.png
• http://style.tutorials.de/v6/images/37/map_y_.png
• http://style.tutorials.de/v6/images/37/map_menu_.png

... um mal drei Beispiele genannt zu haben.

mfg Maik

 

[sight011]

Nicht nur Maik:


http://www.google.de/images/srpr/nav_logo13.png





EDIT: Scheint etwas weiter verbreitet zu sein

 

[Maik]

Nicht nur Maik:


http://www.google.de/images/srpr/nav_logo13.png

Der Maik ist nicht tutorials.de :suspekt:

mfg Maik

 

[sight011]

Ups, sorry ... aber mit über 30.000 Beiträgen, auch nicht gerade unbeteiligt

*sorry offtopic*

 

[Maik]

Ups, sorry ... aber mit über 30.000 Beiträgen, auch nicht gerade unbeteiligt

Jo

Design by Mark, CSS by Maik & Sven Mintel

mfg Maik