Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Смена фона header при наведении курсора в навигации (https://javascript.ru/forum/misc/16561-smena-fona-header-pri-navedenii-kursora-v-navigacii.html)

k0missar 12.04.2011 23:45

Смена фона header при наведении курсора в навигации
 
Есть меню
<style type="text/css">
ul.cssmenu {
   padding: 0;
   margin: 0;
   list-style: none;
   width: 150px;
} 
ul.cssmenu li {
   float: left;
} 
ul.cssmenu li a, ul.cssmenu li a:visited {
   display: block;
   padding: 5px;
   margin-bottom: 1px;
   color: #FAFAD2;
   background-color: #4682B4;
   width: 150px;
}
ul.cssmenu li a:hover {
   color: #4682B4;
   background-color: #FAFAD2;
}
</style>

<ul class="cssmenu">
   <li><a href="#">пункт первый</a></li>
   <li><a href="#">пункт второй</a></li>
   <li><a href="#">пункт третий</a></li>
</ul>

Нужно чтобы при нахождении допустим в первый пункте в хедере шаблона отоброжалась картинка 1, при наведении мыши на втрой пункт в хидере менялась картинка на 2, если отвести мышу то снова появлялась картинка 1, а при переходе по меню в пункт 2 то там уже постоянной картинкой была картинка 2.... как то так :write:

ksa 13.04.2011 10:17

Цитата:

Сообщение от k0missar
в хедере шаблона отоброжалась картинка

Т.е. твой пример какой-то неполный?

Цитата:

Сообщение от k0missar
если отвести мышу то снова появлялась картинка 1, а при переходе по меню в пункт 2 то там уже постоянной картинкой была картинка 2

Серверный язык какой-то есть?

k0missar 13.04.2011 10:25

Цитата:

Сообщение от ksa (Сообщение 100449)
Т.е. твой пример какой-то неполный?


Серверный язык какой-то есть?

есть пхп если я правильно понял:agree:

ну для начала можно решить таким образом проблему, чтоб у каждого пункта меню была своя картинка в хидере, т.е если я нахожусь сейчас в пунке 1, то картинка была 1, если в пункте 2, то картинка соответственно 2 и т.д. И если допустим я нахожусь в пункте 2 подпункте 1 то кортинка родительская 2. Если изъяснился не понятно то напишите нарисую скришотами.

ksa 13.04.2011 10:37

Сама "проблема" понятна...
Как вариант иметь на странице скрытую переменную куда серверный скрипт запишет "базовую" картинку для страницы...
А смену картинки при наведении/убирании будет решать клиентский скрипт, используюя события onmouseover и onmouseout.

k0missar 13.04.2011 10:46

и как сложно это реализовать
вот кстати пример http://www.predgor-ray.ru

ksa 13.04.2011 10:51

Цитата:

Сообщение от k0missar
и как сложно это реализовать

Степень сложности задачи определяется уровнем подготовки её реализатора... :)
Считаю что задачка состоит из трёх букварских задачь по JS:
- смена изображения при наведении курсора
- смена изображения при убирании курсора
- чтение данных из поля

Писать данные в скрытое поле можно и руками при создании страницы. Х/з как они там у тебя делаются...

Johny 13.04.2011 10:55

При наведении можно использовать css hover, а при нахождении в данном пункте указывать или также в css картинку, если сделано без шаблонов, или брать текущую директорию и в зависимости от пункта подставлять также в css картинку. Как-то так. В js не вижу смысла.

ksa 13.04.2011 11:22

Цитата:

Сообщение от Johny
При наведении можно использовать css hover
...
В js не вижу смысла.

Интересно как ты будешь при помощи цсс делать "в хедере шаблона отоброжалась картинка 1", при наведении на пункт в меню?

k0missar 13.04.2011 11:35

Цитата:

Сообщение от ksa (Сообщение 100468)
Степень сложности задачи определяется уровнем подготовки её реализатора... :)
Считаю что задачка состоит из трёх букварских задачь по JS:
- смена изображения при наведении курсора
- смена изображения при убирании курсора
- чтение данных из поля

Писать данные в скрытое поле можно и руками при создании страницы. Х/з как они там у тебя делаются...

Я только начинаю учить js и пока знаю только переменные, массивы и условия. Единственное на что меня хватило это на тот кусок кода который привел, т.е. ксс и меню еще немного получилось реализовать т.е. при наведении на пункт меню у меня в хидере шапка изменялась но когда я убирл мышь она там остовалась пока я не навиду на другую строчку меню и самая большая проблема в том что при переходе в меню оставалась картинка по дефолту... если в этот пример нужно вложит пару вмз то так и скажите ибо мне нужно решить проблему седня/завтра :cray:

ksa 13.04.2011 11:43

Цитата:

Сообщение от k0missar
если в этот пример нужно вложит пару вмз то так и скажите

Помогу за $10...


Часовой пояс GMT +3, время: 20:37.