Смена фона 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: |
Цитата:
Цитата:
|
Цитата:
ну для начала можно решить таким образом проблему, чтоб у каждого пункта меню была своя картинка в хидере, т.е если я нахожусь сейчас в пунке 1, то картинка была 1, если в пункте 2, то картинка соответственно 2 и т.д. И если допустим я нахожусь в пункте 2 подпункте 1 то кортинка родительская 2. Если изъяснился не понятно то напишите нарисую скришотами. |
Сама "проблема" понятна...
Как вариант иметь на странице скрытую переменную куда серверный скрипт запишет "базовую" картинку для страницы... А смену картинки при наведении/убирании будет решать клиентский скрипт, используюя события onmouseover и onmouseout. |
и как сложно это реализовать
вот кстати пример http://www.predgor-ray.ru |
Цитата:
Считаю что задачка состоит из трёх букварских задачь по JS: - смена изображения при наведении курсора - смена изображения при убирании курсора - чтение данных из поля Писать данные в скрытое поле можно и руками при создании страницы. Х/з как они там у тебя делаются... |
При наведении можно использовать css hover, а при нахождении в данном пункте указывать или также в css картинку, если сделано без шаблонов, или брать текущую директорию и в зависимости от пункта подставлять также в css картинку. Как-то так. В js не вижу смысла.
|
Цитата:
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 00:40. |