Zmiana menu obrazkowego po najechaniu zmieniają się wszystkie elementy

[i1335 (Zamorski)]

Witam,

 

Mam problem z Menu. Może trochę nietypowy, albo raczej wynikający z nie wiedzy Javascript…

Potrzebuję zrobić menu obrazkowe w taki sposób aby najechany element zmieniał obrazek najechany myszką oraz wszystkie pozostałem elementy menu tak jak jest to tutaj:

http://www.flashxml.net/blur-menu.html#swmi-free-install

 

Próbowałem coś zrobić, ale utknąłem…

Proszę o pomoc

Z góry bardzo dziękuję!

 

 

<script  type="text/javascript">
function change1(nam)
{
   var obiekty = document.getElementsByName(nam);
     obiekty[0].src = '1a.jpg';
     obiekty[1].src = '2a.jpg';
}
 
function change2(nam)
{
   var obiekty = document.getElementsByName(nam);
     obiekty[0].src = '1.jpg';
     obiekty[1].src = '2.jpg';
}
</script>
 
<div class="menu">
<ul id="menu">
<li><a href="index.html" name="as" onmouseover="change1('as')" onmouseout="change2('as')"><img src="1.jpg" name="as" alt=""></a></li>
<li><a href="misja.html" name="as" onmouseover="change1('as')" onmouseout="change2('as')"><img src="2.jpg" name="as" alt=""></a></li>
<li><a href="zajecia.html"><img src="3.jpg" alt=""></a>
<li><a href="rekrutacja.html"><img src="4.jpg" alt=""></a></li>
<li><a href="kadra.html"><img src="5.jpg" alt=""></a></li>
<li><a href="lokalizacja.html"><img src="6.jpg" alt=""></a></li>
</ul>
</div>

[Jim1961]

A po co Ci do tego JS ??

 

http://jsfiddle.net/W2yf8/1/

[i1335 (Zamorski)]

A po co Ci do tego JS ??   http://jsfiddle.net/W2yf8/1/

 

 

W kodzie CSS powyżej byłoby ok… ale najechany element nie zmienia się, tylko zmienia pozostałe.

Jak zrobić żeby wstawić jeszcze zmianę najechanego elementu obrazkiem jpg

 

Tak jak w tym linku: http://www.flashxml…mi-free-install

Przykład 4.

Bardzo dziękuję

[grzelix]

Zrobiłem update powyższego skryptu.

 

http://jsfiddle.net/W2yf8/2/

[i1335 (Zamorski)]

No tak… wszystko super, ale jeśli mam cały czas widoczny jednolity napisy: jeden dwa trzy.

 

 

[grzelix]

Możesz zmienić font napisu, albo kolor napisu. to nie wystarczy?

[i1335 (Zamorski)]

Aby uzyskać cień pod napisem oraz rozmazanie napisu to font i kolor raczej nie wystarczy. Dlatego też myślę ze JavaScript będzie tutaj pomocna. Ale jeśli zrobi się to na stylach CSS to też będzie git. Tyle że za pomocą pociętych obrazków tła

[Jim1961]

Napisałeś, że masz problem z JS, więc przeniosłem Twoją logikę za pomocą CSSa. Niezależnie czy chcesz uzyskać inny kolor, cień czy tło obrazkowe, logika pozostaje ta sama, a temat rozwiązany i do zamknięcia.

 

Cień zrobisz za pomocą http://css3gen.com/text-shadow/ Co do obrazków, polecam http://blog.eduweb.pl/przyspiesz-swoja-strone-z-css-sprites/

[grzelix]

http://jsfiddle.net/W2yf8/3/

 

wszystko za ciebie nie zrobimy. Podaliśmy ci już chyba wszystkie niezbędne opcje w css. Metodą prób i błędów dojdziesz do wyniku jak oczekujesz.

[i1335 (Zamorski)]

Napisałeś, że masz problem z JS, więc przeniosłem Twoją logikę za pomocą CSSa. Niezależnie czy chcesz uzyskać inny kolor, cień czy tło obrazkowe, logika pozostaje ta sama, a temat rozwiązany i do zamknięcia. Cień zrobisz za pomocą http://css3gen.com/text-shadow/ Co do obrazków, polecam http://blog.eduweb.pl/przyspiesz-swoja-strone-z-css-sprites/

Co do linku text-shadow wielkie dzięki super generator Pobawię się tym.

http://jsfiddle.net/W2yf8/3/ wszystko za ciebie nie zrobimy. Podaliśmy ci już chyba wszystkie niezbędne opcje w css. Metodą prób i błędów dojdziesz do wyniku jak oczekujesz.

Wielkie dzięki dodam text-shadow do Twojego dzieła i gotowe.

Dziękuję za POMOC

Mógłby mi ktoś jeszcze podpowiedzieć odnośnie tematu u góry.

Doszedłem do takiego miejsca:

http://jsfiddle.net/DarSay/6MPZ9/

I nie potrafię sobie poradzić z rozmyciem pozycji których nie zaznaczam w poziomym menu. Po dodaniu przeze mnie a href… napisy na pozostałych polach zostają czytelne. A powinny mieć postać takie jak te w menu pionowym.

A ponadto jeśli najadę z boku menu pionowego czy poziomego, to rozmywa mi wszystkie teksty w menu na raz. A powinien dopiero wówczas jak któryś z nich zaznaczę

Proszę o podpowiedz… Z góry dziękuję.

[Jim1961]

http://jsfiddle.net/6MPZ9/1/

 

Należało zmienić element, który chcesz rozmywać. W tym wypadku, gdy masz tam znacznik A, do ostatnich dwóch grup w CSSie dodałem “a” … banał

[i1335 (Zamorski)]

http://jsfiddle.net/6MPZ9/1/   Należało zmienić element, który chcesz rozmywać. W tym wypadku, gdy masz tam znacznik A, do ostatnich dwóch grup w CSSie dodałem “a” … banał

 

chyba byłem już zmęczony wczoraj dodawałem a tylko w tym pierwszym i główkowałem Dziękuję

A może podpowiesz mi dlaczego jak najeżdżam z lewej strony obok Home i z prawej obok gggg to rozmazuje mi wszystkie na raz ? 

Chodzi o szerokość diva? 

[Jim1961]

@i1335

    A może podpowiesz mi dlaczego jak najeżdżam z lewej strony obok Home i z prawej obok gggg to rozmazuje mi wszystkie na raz ? Chodzi o szerokość diva? Chodzi bardziej o szerokość elementu UL, który to ma zdarzenie “hover”, robiące rozmycie. Ustal sobie szerokość UL, tak aby tylko wszystkie elementy LI się mieściły, nie szersze.

[i1335 (Zamorski)]

@i1335 Chodzi bardziej o szerokość elementu UL, który to ma zdarzenie “hover”, robiące rozmycie. Ustal sobie szerokość UL, tak aby tylko wszystkie elementy LI się mieściły, nie szersze.

 

 

No właśnie ustalam… i nic :/ 

http://jsfiddle.net/6MPZ9/1/

Możesz zerknąć jeszcze?  

w tej linijce też dodawałem i nic:

 

/* najechanie na całą listę - zmiana wszystkich li tagów */

ul:hover li a{

   color: transparent;

   text-shadow: 0 0 5px rgba(0,0,0,0.9);

  width: 500px;

}

W pionowym menu też są miejsca gdzie po najechaniu rozmywa mi całość… oszaleć można hehe

 

Poza tym nie mogę wyśrodkować tekstu w przyciskach i ustalenie ich szerokości. padding mam na 20px i tym ustaliłem odstępy między nimi, ale text-align: center; nie dział

Gubię się coś w tym menu :/ 

Dzięki wielkie. 

[Jim1961]

http://jsfiddle.net/6MPZ9/3/

 

Masz spore braki w wiedzy i doświadczeniu w CSSie

 

Elementy, które mają “display” ustawione na “inline”, są jednymi z bardziej “niezrozumiałych” na newbies. Nie można nadawać im szerokości oraz spacje (pomiędzy znacznikami LI) mają znaczenie. Jednym z rozwiązań (to zastosowałem) jest ustawienie rozmiaru fonta na zero dla całego menu (UL), a następnie ustawienie rozmiaru już dla samego A.

 

Na przyszłość, jak już bawisz się elementami typu inline, zdefiniuj im tymczasowo border albo outline … a najlepiej to zacznij używać debugerów; większość przeglądarek to ma … nawet IE :]

 

Na teraz (do przemyślenia); jeżeli uczysz się stylować, żeby kiedyś to robić na codzień, ok - każdy kiedyś zaczynał. Ale czasem warto zainteresować się gotowymi frameworkami: bootstrap, foundation, metro … i jeszcze w ciul innych … żeby nie wymyślać koła na nowo.

[i1335 (Zamorski)]

Ustawiłem padding na 0, i dodałem border, ale widać  że nie schodzą się ze sobą… jakiś horror

 

http://jsfiddle.net/DarSay/6MPZ9/4/

[Jim1961]

Ustawiłem padding na 0, i dodałem border, ale widać  że nie schodzą się ze sobą… jakiś horror   http://jsfiddle.net/DarSay/6MPZ9/4/

Czytaj ze zrozumieniem, spacje mają znaczenie. Dodaj

[i1335 (Zamorski)]

  Czytaj ze zrozumieniem, spacje mają znaczenie. Dodaj

Zgadza się. Nie wiedziałem o tych spacjach, ale nie rozumie tego “ustawienie rozmiaru fonta na zero dla całego menu (UL)”

Możesz mnie naprowadzić?

 

http://jsfiddle.net/6MPZ9/5/

[Jim1961]

Coś mi ucięło wypowiedź … dodaj margin left: -3px dla “#menu_1 LI”

[i1335 (Zamorski)]

Coś mi ucięło wypowiedź … dodaj margin left: -3px dla “#menu_1 LI”

 

To jest ok, Zmieniłem też z padding na margin 0 15px 0 0;  Ale i tak nie dają mi spokoju ta 1 rzecz::

 

Teraz jak najadę pomiędzy pola oraz z lewej i z prawej… rozmywa mi całość masakra jakaś…

Pomoże ktoś i przeprowadzi przez ten straszny las mojej CSSowej niewiedzy

 

http://jsfiddle.net/DarSay/6MPZ9/7/