Zmiana sposobu rozwijania + podmiana obrazka

[arkadiio]

Cześć Wszystkim!

Jestem tu nowym użytkowikiem i z góry zaznaczam że nie za bardzo się jeszcze orientuję w języku JavaScript,

Przygotowuję pewną stronkę z użyciem tego właśnie języka, potrzebowałem ogólnie skryptu który
po kliknięciu na obrazek rozwinie zawartość tekstową, oraz zmieni kolor obrazka z szarego na czerwony(czyli najprościej go podmienić).

W załączeniu podaję link z kodem który tak okroiłem żeby był widoczny tylko problem bez niepotrzebnej zawartości.
----------------------------------
http://infotest.24tm.pl/
----------------------------------
Na stronie widać rozwijaną zawartość, ale nie następuję to płynnie tak jak oczekiwałem.
Udało mi się co prawda zrobić taki efekt że rozwijał się płynnie ale wtedy wszystkie te klocki mi się rozwijały na raz.

Chcę zrobić tak że dany blok rozwija się po kliknięciu na obrazek niezależnie od innych, do tego płynnie, oraz po rozwinięciu
klocek/obrazek zmienia się z szarego na czerwony co sądzę że najprosciej podmieniając go z podobnym obrazkiem.

Mam pytanie czy można to zrobić w jakiś prosty sposób bo ja niestety pomału zaczynam przygotę dopiero z JavaScript.

Proszę o pomoc bo siedzę nad tym detalem już jakiś czas.

-------------------------------------------------------------------------------------------------------

[mateo]

To pokaż jak wygląda twój kod w tym momencie.

[Kartofelek]

Oj kolego, namąciłeś tak, że aż ciężko to się czyta

W załączniku masz poprawiony kod. Bloki nie powinny być robione jako grafiki, bo tracisz zalety animacji css. W załączniku podsyłam poprawiony kod.

[arkadiio]

Oj kolego, namąciłeś tak, że aż ciężko to się czyta

W załączniku masz poprawiony kod. Bloki nie powinny być robione jako grafiki, bo tracisz zalety animacji css. W załączniku podsyłam poprawiony kod.

Wow :-) Ale ekstra! Dziękuję bardzo, super efekt :-)
Problem generalnie można udać za rozwiązany.

A jeszcze tak zapytam, bo po kliknięciu na element efekt jest super, ale tekst pojawia się pod spodem klocka, a czy była by możliwość żeby po kliknięciu klocek wysuwał się do góry a pod spodem tekst (tak jak z pierwszej linijki klocków z mojej strony którą zamieściłem w forum - z drugą linijką mam również taki zamiar bo coś mi się na niej rozjeżdża).

Gdzie dodać formatowanie warunkowe dla IE żeby cały ten kod mi się nie rozjechał?
Zauważyłem to na IE 9.0

[Kartofelek]

1) dla .box.show dodaj margin-top:-....px
2) dodaj przed gradientami zwyczajny kolor czyli background:#ddd i odpowiednik dla czerwonego. Możesz je pobrać z samych gradientów (patrz kod). Zgodnie z http://shouldiprefix.com/ gradienty zamiast tak:

Kod:

background: -moz-linear-gradient(45deg, #808080 0%, #808080 6%, #c0c0c0 48%, #808080 95%, #808080 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #808080), color-stop(6%, #808080), color-stop(48%, #c0c0c0), color-stop(95%, #808080), color-stop(100%, #808080));
background: -webkit-linear-gradient(45deg, #808080 0%, #808080 6%, #c0c0c0 48%, #808080 95%, #808080 100%);
background: -o-linear-gradient(45deg, #808080 0%, #808080 6%, #c0c0c0 48%, #808080 95%, #808080 100%);
background: -ms-linear-gradient(45deg, #808080 0%, #808080 6%, #c0c0c0 48%, #808080 95%, #808080 100%);
background: linear-gradient(45deg, #808080 0%, #808080 6%, #c0c0c0 48%, #808080 95%, #808080 100%);

zapisz tak:

Kod:

background: #808080;
background: linear-gradient(45deg, #808080 0%, #808080 6%, #c0c0c0 48%, #808080 95%, #808080 100%);

Ten dłuższy kod dla gradientów brałem z generatora gradientów css3, ale nie trzeba tego stosować, chyba że chcesz wspierać super stare firefoxy i chrome (i tak ich nikt nie używa).

Reszta na ie9 działa.

[arkadiio]

Ok, wstawiłem ten kod dla IE i super działa :-)

W zasadzie to jest już wszystko ekstra i ok, ale jeszcze tak zapytam jak w prosty sposób zrobić że po kliknięciu w klocek przesuwa się on do góry a pojawiający się tekst pojawia się w miejscu tego klocka który poszedł do góry - coś w rodzaju efektu jakby się podnosił.

[Kartofelek]

Dla .step {.... dodaj vertical-align:top
Dla .step.show .box {... dodaj margin-top:-50px

[arkadiio]

Dziękuję bardzo :-)
Pomogło, wszystko działa jak należy :-)
Właśnie zostało mi oszczędzone kilka godzin życia na inne przyjemności ;-)