Zmiana menu obrazkowego po najechaniu zmieniają się wszystkie elementy


(Zamorski) #1

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 :slight_smile:

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) #2

A po co Ci do tego JS ??

 

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


(Zamorski) #3

 

 

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ę :slight_smile:


(Grzelix) #4

Zrobiłem update powyższego skryptu.

 

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


(Zamorski) #5

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

 

  przyklad.jpg


(Grzelix) #6

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


(Zamorski) #7

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 :slight_smile:


(Jim1961) #8

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) #9

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.


(Zamorski) #10

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

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

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ę :confused:

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


(Jim1961) #11

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ł :stuck_out_tongue:


(Zamorski) #12

 

chyba byłem już zmęczony wczoraj :wink: dodawałem a tylko w tym pierwszym i główkowałem :confused: 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) #13

@i1335


(Zamorski) #14

 

 

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ł :confused:

Gubię się coś w tym menu :/ 

Dzięki wielkie. 


(Jim1961) #15

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

 

Masz spore braki w wiedzy i doświadczeniu w CSSie :stuck_out_tongue:

 

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.


(Zamorski) #16

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

 

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


(Jim1961) #17

Czytaj ze zrozumieniem, spacje mają znaczenie. Dodaj


(Zamorski) #18

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) #19

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


(Zamorski) #20

 

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ść :confused: masakra jakaś...

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

 

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