• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Menu drzewkowe, OnMouseOver, Hover after i before, jQuery, JavaScript, CSS?

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
238 wizyt
pytanie zadane 13 lipca 2018 w JavaScript przez fezzy Nowicjusz (240 p.)

Witam,

Próbuję osiągnąć taki efekt jak przedstawiłem poniżej, czyli żeby po najechaniu kursorem na link "Balon 1" znajdujący się w menu katalogu Balony pojawił się obrazek przedstawiający balon np. w kolorze czarnym, a na link "Balon 2" w kolorze niebieskim..

Udzielono mi dwie różne wskazówki, jedna to taka, że najlepiej będzie to zrobić w CSS, a druga w jQuery, sam skrypt menu to JavaScript oraz CSS. No i pojawiają się problemy. Docelowo tych katalogów i linków w menu będzie znacznie więcej, więc w CSS byłoby to dużo kodowania, ale spróbowałem na początek tym sposobem. Niestety nie wychodzi mi to, robię gdzieś błędy. Efekt jest taki jak widać niżej, po najechaniu kursorem na link obrazka nie widać, a kursor, nazwa linku oraz czarne okienko w którym powinien być obrazek znika i pojawia się co chwilę.

Postanowiłem poczytać trochę o jQuery i jest to dla mnie skomplikowane. Znalazłem na forum pewien skrypt, który działa w ten sposób, że wyświetla prawidłowo obrazek po najechaniu kursorem na link, lecz jest to osobny skrypt, którego nie potrafię zastosować w tym skrypcie z menu.

> Uwaga <

Ponieważ do menu wykorzystano obrazki ciężko jest zademonstrować całość wklejając sam kod źródłowy, więc spakowałem wszystkie pliki w archiwum zip i podaję linki do pobrania. Mam prośbę do administracji o nie usuwanie ich.

Wersja z CSS

Wersja z jQuery

Proszę o pomoc. Za wszelkie wskazówki jestem ogromnie wdzięczny.

Pozdrawiam
 

komentarz 13 lipca 2018 przez Tnifey Pasjonat (24,190 p.)
wrzuć to na jakiegoś codepena, jsbina albo coś w tym stylu :P nie po to mam windows defendera żeby pobierać .zipy z for internetowych :P
komentarz 13 lipca 2018 przez Tomek Sochacki Ekspert (227,490 p.)
Jeśli obrazki masz tylko lokalnie u siebie to daj w codepen po prostu jakieś linki do innych obrazków w sieci, chodzi tylko o testowanie.

Ale sam powiedziałeś, że masz gotowy skrypt, to pewnie wystarczy tylko odpowiednio zmienić referencję DOM na jakiej ten skrypt operuje.

1 odpowiedź

0 głosów
odpowiedź 14 lipca 2018 przez fezzy Nowicjusz (240 p.)

Rozumiem wasze obawy przed pobieraniem archiwów z internetu, ja też tak miewam, ale proszę wierzcie mi nie mam złych zamiarów. angel Wrzuciłem obrazki na FTP, dopisałem w kodzie linki do tych obrazków, całą resztę wrzuciłem na CodePen, a nawet na jsbin i niestety nie wyświetla się nic, nie wiem dlaczego i myślę, że nie ma sensu do tego teraz dochodzić. frown Pomyślałem, że szybciej będzie jak podam linki bezpośrednio do plików na FTP:

http://files.cba.pl/index.htm

http://files.cba.pl/tree.css

http://files.cba.pl/tree.js

http://files.cba.pl/jpg/balon1.jpg

http://files.cba.pl/jpg/balon2.jpg

http://files.cba.pl/img/plus.gif

http://files.cba.pl/img/plusbottom.gif

http://files.cba.pl/img/minus.gif

http://files.cba.pl/img/minusbottom.gif

http://files.cba.pl/img/folder.gif

http://files.cba.pl/img/folderopen.gif

http://files.cba.pl/img/base.gif

http://files.cba.pl/img/line.gif

http://files.cba.pl/img/empty.gif

http://files.cba.pl/img/joinbottom.gif

http://files.cba.pl/img/join.gif

http://files.cba.pl/img/page.gif

Podobne pytania

0 głosów
3 odpowiedzi 236 wizyt
pytanie zadane 10 sierpnia 2018 w HTML i CSS przez Paweł. Początkujący (380 p.)
0 głosów
1 odpowiedź 196 wizyt
pytanie zadane 26 maja 2018 w HTML i CSS przez niezalogowany
0 głosów
0 odpowiedzi 175 wizyt
pytanie zadane 5 listopada 2017 w PHP przez hoktaur Pasjonat (22,250 p.)

93,096 zapytań

142,059 odpowiedzi

321,513 komentarzy

62,441 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...