Witam

nie wiem czy piszę w dobrej grupie tematycznej. Tak więc z góry za to
przepraszam

mam pewien mały problem z przesuwaniem tła w CSS

mam taki kod

<div id="pierwszy" style="bacground-position:35px 0px">
<div id="drugi" style="bacground-position:95px 0px">
<div id="trzeci" style="bacground-position:135px 0px">
<div id="czwarty" style="bacground-position:195px 0px">
.....
.....
itd. do około 100 pozycji

Chcę aby po najechaniu na DIV myszą tło przesunęło się w osi Y o 35px lecz
nie modyfikowało przy tym pozycji osi X, czyli chciałbym zamienić 0px na
35px

napisałem skrypt w jQuery:
<script language="javascript" type="text/javascript">
$("#menu_top li").mouseover(function(){
$(this).css("background-position", "+=0px 36px");
}).mouseleave(function(){
$(this).css("background-position", "+=0px 0px");
});
</script>

ale to nie za bardzo chce działać

może ktoś z tej grupy naprowadzić mnie na właściwe tory i podpowiedzieć
troszkę jak mam tego dokonać.

--
Używam klienta poczty Opera Mail: http://www.opera.com/mail/

do góry

Mateusz Krzysiak wrote:
> Witam
>
> nie wiem czy piszę w dobrej grupie tematycznej. Tak więc z góry za to
> przepraszam
>
> mam pewien mały problem z przesuwaniem tła w CSS
>
> mam taki kod
>
> <div id="pierwszy" style="bacground-position:35px 0px">
> <div id="drugi" style="bacground-position:95px 0px">
> <div id="trzeci" style="bacground-position:135px 0px">
> <div id="czwarty" style="bacground-position:195px 0px">
> .....
> .....
> itd. do około 100 pozycji
>
> Chcę aby po najechaniu na DIV myszą tło przesunęło się w osi Y o 35px lecz
> nie modyfikowało przy tym pozycji osi X, czyli chciałbym zamienić 0px na
> 35px

Nie wystarczy CSS?

#pierwszy:hover {
background-position: 35px 35px;
}

--
Z pozdrowieniami,
Krzysztof Mitko

do góry

W dniu 2011-12-15 15:43, Mateusz Krzysiak pisze:
> mam taki kod
>
> <div id="pierwszy" style="bacground-position:35px 0px">
> <div id="drugi" style="bacground-position:95px 0px">
> <div id="trzeci" style="bacground-position:135px 0px">
> <div id="czwarty" style="bacground-position:195px 0px">
> .....
> .....
> itd. do około 100 pozycji
>
> Chcę aby po najechaniu na DIV myszą tło przesunęło się w osi Y o 35px
> lecz nie modyfikowało przy tym pozycji osi X, czyli chciałbym zamienić
> 0px na 35px

Ech nie Ty jeden byś tak chciał, ale chłopaki się zatransitionowali w
animacje i takie pierdoły jak background-position-y im nie w głowie :/
Najłatwiej - podziel sobie ten obrazek na dwa i po prostu na hover
zmieniaj sam obrazek. Czyli masz teraz:
+---+---+---+ 0
| A | B | C | ta część jest widoczna normalnie
+---+---+---+ 35px
| a | b | c | tę chcesz pokazywać przy :hover
+---+---+---+
podziel to na dwa osobne pliki:
pierwszy:
+---+---+---+
| A | B | C | ta część jest widoczna normalnie
+---+---+---+
drugi:
+---+---+---+
| a | b | c | tę chcesz pokazywać przy :hover
+---+---+---+
i potem lecisz w stylach:
.ikona.A { background-position:0 0; }
.ikona.B { background-position:35px 0; }
.ikona.C { background-position:95px 0; }
i tak aż do tej setki, a na końcu:
.ikona{ background-image:url(pierwszy); }
.ikona:hover { background-image:url(drugi); }

> napisałem skrypt w jQuery:
> <script language="javascript" type="text/javascript">

Samo <script> wystarczy.

> $("#menu_top li").mouseover(function(){
> $(this).css("background-position", "+=0px 36px");
> }).mouseleave(function(){
> $(this).css("background-position", "+=0px 0px");
> });
> </script>
>
> ale to nie za bardzo chce działać

Witaj w świecie jQuery (to już bardziej pl.comp.lang.javascript, albo
pl.pregierz ;))

> może ktoś z tej grupy naprowadzić mnie na właściwe tory i podpowiedzieć
> troszkę jak mam tego dokonać.

"Na szczęście" metoda css przyjmuje jako parametr również funkcję, więc:
$(this).css("background-position",function(i,s){retu
rn s.replace( /
0px/,' 35px')});
i z powrotem:
$(this).css("background-position",function(i,s){retu
rn s.replace( /
35px/, ' 0px')});


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

Dziękuje Panie Pawle troszkę mnie naprowadziłeś dzięki czemu dziś udało mi
się wykonać zamierzony efekt bez dzielenia pliku tła.

oto mój skrypt:
<script language="javascript" type="text/javascript">
$("#menu_top li").mouseover(function(){
var wartosc = $(this).css('background-position');
var arr = wartosc.split(' ');
var over = arr[0]+' 36px';
$(this).css("background-position", over);
}).mouseleave(function(){
var wartosc = $(this).css('background-position');
var arr = wartosc.split(' ');
var out = arr[0]+' 0px';
$(this).css("background-position", out);
});
</script>

Dnia 15.12.2011 o 22:40 napisał(a):

> function(i,s){return s.replace( / 35px/, ' 0px')}


--
Używam klienta poczty Opera Mail: http://www.opera.com/mail/

do góry