[CSS] Prosta rzecz - czy da się zrobić to inaczej?, Zajrzyj! Opcje

[Przem4S]

Witam mianowicie usiłuję zrobić button w jednym obrazku, zrobiłem to w ten sposób:

Kod

.strona_glowna {
    height:50px;
    width:130px;
    background:url('images/domyslny/strona_glowna.png') no-repeat;
    display:block;
    float:left;
}

.strona_glowna:hover {
    height:50px;
    width:130px;
    padding:50px;
    margin-top:-50px;
    background:url('images/domyslny/strona_glowna.png') no-repeat;
    display:block;
    float:left;
}

Ale czy da się zrobić to w inny sposób?

[ShadowD]

input/type/image wydaje mi się trafniej. Poza tym po co dublujesz atrybuty w hover? Czy na pewno potrzebny Ci display:block?

[Przem4S]

Displayblock wyje (IMG:style_emoticons/default/baaasmiley.gif) lem. Usunąłem też te zbędne powtarzające się atrybutry. Tylko nie wiem jak to inaczej przełożyć. Puki co mam:

Kod

.strona_glowna {
    height:50px;
    width:130px;
    background:url('images/domyslny/strona_glowna.png') no-repeat;
    float:left;
}

.strona_glowna:hover {
    padding:50px;
    margin-top:-50px;
}

Refresz (IMG:style_emoticons/default/closedeyes.gif)

[potreb]

Refresh

Nie wiem co chcesz osiągnąć, po najechaniu zmieniające się tło?

[Przem4S]

Dokładnie tylko jak wykonać to w inny (może lepszy?) sposób?

Obecnie mam coś takiego: klik.

[potreb]

Wg mnie to jest najlepszy sposób, oczywiście masz jeszcze js, co wg mnie rozwiązanie z epoki lodowcowej, ja mam tak, także ten sposób jest jak najbardziej odpowiedni (IMG:style_emoticons/default/smile.gif)

[CSS] pobierz, plaintext 
.submit_button {
	background: url('../images/button1.png')  0px no-repeat #fff;
	height: 26px;
	width: 91px;
	color: #525252;
}
 
.submit_button:hover {
	background: url('../images/button2.png')  0px no-repeat #fff;
	height: 26px;
	width: 91px;
	color: #4c6989;
}
[CSS] pobierz, plaintext 

[Przem4S]

Tylko że chodzi o to żeby uniknąć efektu "przeładowania" obrazka gdy na niego najadę dlatego używam jednego obrazka (przykład: klik). I obecnie każda "pozycja" w menu ma swój obrazek, może da się zrobić to w całości? Po prostu zoptymalizować to.

[potreb]

Twój obrazek menu to około 20 kilobajtów, trochę dużo jak na jeden element, może spróbuj go zoptymilizować w Adobe Fireworks, albo w innym programie

[Damonsson]

Tak to co zrobiłeś jest zajebiste i tak należy to robić, a nie tak jak użytkownik @potreb.
Koniec tematu. Ewentualnie poczytaj sobie lektury o CSS sprites- właśnie tak się nazywa to co zrobiłeś.

[cojack]

To nie jest css sprites.

[Damonsson]

Racja mój błąd, przy css sprites regulujesz background position.

[konole]

CSS Sprites jest najlepszym rozwiązaniem i tego bym się trzymał na Twoim miejscu.

Kod

.strona_glowna {
    height:50px;
    width:130px;
    background:url('images/domyslny/strona_glowna.png') no-repeat;
    float:left;
}

.strona_glowna:hover {
    background-position: -50px 0px;
}