Polskie Forum Użytkowników GIMP-a

Witam. Mam pytanie odnośnie poziomego menu przeznaczonego na stronę.
Menu jest stworzone z obrazków(ogólnie div z menu ma szerokość 896px;)i zależy mi na tym aby po najechaniu na obrazek kursorem zmieniał się on(na obrazku wygląda jak podświetlenie)na inny.
Czy istnieje jakiś sposób żeby zrobić to dobrze oraz z możliwością szybkiej edycji? Czytałem dużo poradników i żaden mnie nie zadowalał.

JS odpada raczej z powodów takich że dla jednego buttona potrzeba czterech linijek co z sześcioma buttonami daje 24 linijki. Oczywiście można by było zrobić to w include lecz sam fakt iż jest to JS odciąga mnie od tego pomysłu.

A w CSS sprawa wygląda podobnie :/ Dużo linijek co daje w pliku akrusza stylu dużo bałaganu.

Takie menu potrzebuje ze względu iż robię szablon do systemu zarządzania treścią dla klanów a dokładnie ClanSphere a menu we flashu nie chcę robić ponieważ niektóre moduły będą zmieniane w związku z czym musiał bym co jakiś czas robić nowe menu.

Jeśli ktoś miał podobny problem ale jakoś go rozwiązał i jest z tego zadowolony niech się podzieli tą informacją :)

Pozdrawiam, Bibson.

Wątpię żeby by jakiś inny sposób. Skrypty zazwyczaj zajmują trochę miejsca. W tym wypadku JS zajmował by jedną linijkę do każdego obrazka, plus kilka linijek funkcji - nie widzę problemu.
A co Ci sie nie podoba w JS? To najlepszy sposób na dynamiczne strony.

Nie podoba mi się to to że użytkownik może mieć wyłączoną obsługę JS i nie zobaczy efektu. A czy takie dynamiczne? Przy wolniejszych łączach jeśli użytkownik najechał by na link to obrazek mógł by zniknąć na chwilę aż się załaduje.

Zawsze można zrobić osobny arkusz do samego menu ;)

Właśnie też o tym myślałem i chyba tak zrobię :) To będzie chyba najkorzystniejsze rozwiązanie.

Albo efekt rollover.

Właśnie o tym mówimy :) Można to zrobić za pomocą CSS lub JS właśnie :)
Zrobiłem menu i trochę jest tych linijek lecz mam wszystko w osobnym css'ie więc jakoś normalnie to wygląda.

http://webmaster.helion.pl/kurshtml/skrypt/rollover.htm (http://webmaster.helion.pl/kurshtml/skrypt/rollover.htm) - o ile się nie mylę, to to nie jest ani CSS, ani JS.

To jest raczej JS. Poniżej to samo i jest wyraźnie napisane(w tytule)że jest to JavaScript :)

http://webmade.org/porady/efekt-rollover-js.php

Pozwolę się wtrącić. Chyba o to chodzi: jest taki sposób, jak onmouseover lub onfocus, czyli jak najedziesz na coś myszką, to zamienia się w inny obrazek. Wtedy tylko musiałbyś zrobić grafiki "podświetlone". Nie wiem czy Ci to pomoże, ale to zawsze coś ;)

Dorzucę swoje 3 grosze :P
Czy nie wystarczy stworzyć klasę (ew. id) dla diva, potem korzystając z pseudoklas zmieniać tło przycisku?
przykład : http://filax.ovh.org
np:
.klasa {background-image:url(tlo.png)}
.klasa:hover {background-image:url(tlo1.png)}
.klasa:active {background-image:url(tlo2.png)}

Zakładając, że div ma określone wymiary, zgodne z tłem. Oczywiście można pomyśleć potem o jakimś preloaderze obrazków, żeby nie było migania.

Pozdrawiam Filax.

Już rozwiązałem ten problem :) Efekt można zobaczyć pod tym adresem:
http://91.121.26.196/site/ szablon jest jeszcze nieskończony i ma sporo błędów pewnie bo nawet nie sprawdzałem w walidatorze. Ale chętnie usłyszę propozycje do zmiany grafiki(pewnie od razu wywalić copyright'y z top'a muszę ale na początku nie tak miał wyglądać szablon).

No i obrazek się jednak ładuje - widać szare tło między przejściem.

Tak ładuje się lecz spróbuję zmniejszyć wagę obrazka i efekt szarego tła nie powinien być widoczny. Ale to zawsze lepsze rozwiązanie(przynajmniej wg. mnie)niż JS.

Możesz zrobić jeden obrazek, a potem go w CSS odpowiednio przesunąć ;)