Смена картинки при переходе в навигации

Тема в разделе "Веб-дизайн", создана пользователем k0missar, 5 апр 2011.

Модераторы: zek24
  1. k0missar

    k0missar

    Регистр.:
    20 сен 2008
    Сообщения:
    200
    Симпатии:
    25
    Есть навигация (приведен скриншот)
    Есть несколько мени
    например упс1, упс2, упс3 и упс4 (спадающие)
    нужно чтоб при наведении мыши на упс1 отображалась большая картинка с одним изображение при наведении на упс2 с другим и так далее...
    посмотрев на скриншот думаю поймете что я хотел бы реализовать!
    Код меню
    Код:
    <ul id="menu">
    	<li><a href="#">Oops 1</a></li>
    	<li>
    		<a href="#">Oops №2</a>
    		<ul>
    			<li><a href="#">Oops №1</a></li>
    			<li><a href="#">Oops №2</a></li>
    			<li><a href="#">Oops №3</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">Oops №3</a>
    		<ul>
    			<li><a href="#">Oops №1</a></li>
    			<li><a href="#">Oops №2</a></li>
    			<li><a href="#">Oops №3</a></li>
    			<li><a href="#">Oops №4</a></li>
    			<li><a href="#">Oops №5</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">Oops №4</a>
    		<ul>
    			<li><a href="#">Oops №1</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">Пункт №5</a>
    		<ul>
    			<li><a href="#">Oops №1</a></li>
    			<li><a href="#">Oops №2</a></li>
    			<li><a href="#">Oops №3</a></li>
    			<li><a href="#">Oops №4</a></li>
    			<li><a href="#">Oops №5</a></li>
    		</ul>
    	</li>
    </ul>
    Код CSS
    Код:
    #menu {
    	padding: 0;
    	margin: 0;
    	font-size: 100%;
    	font-family: Georgia;
    	}
    #menu li {
    	list-style: none;
    	float: left;
    	height: 33px;
    	padding: 0;
    	margin: 0;
    	width: 150px;
    	text-align: center;
    	background: #171717;
    	position: relative;
    	padding-top: 12px;
    	}
    #menu li ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	width: 150px;
    	display: none;
    	position: absolute;
    	left: 0;
    	top: 45px;
    	}
    #menu li ul li {
    	float: none;
    	height: 33px;
    	margin: 0;
    	width: 150px;
    	text-align: center;
    	background: #7F7F7F;
    	}
    #menu li a {
    	display: block;
    	width: 150px;
    	height: 33px;
    	color: #fff;
    	text-decoration: none;
    	}
    #menu li:hover ul, #menu li.jshover ul {
    	display: block;
    	}
    #menu li:hover, #menu li.jshover {
    	background: #424242;
    	}
     

    Вложения:

    • menu.png
      menu.png
      Размер файла:
      61,6 КБ
      Просмотров:
      3
  2. Dr.Sheff

    Dr.Sheff

    Регистр.:
    20 ноя 2010
    Сообщения:
    175
    Симпатии:
    26
    Вставляешь теги ссылкам :
    PHP:
    onMouseOver="document.getElementById('id').style.zIndex = 100;"
    onMouseOut="document.getElementById('id').style.zIndex = 1;"
    Где id название индификатора изображения (#id)
    Можно так
    PHP:
    onMouseOver="document.getElementById('id').style.display='none';"
    onMouseOut="document.getElementById('id').style.display='block';"
    сделать ещё.
     
  3. k0missar

    k0missar

    Регистр.:
    20 сен 2008
    Сообщения:
    200
    Симпатии:
    25
    А можно по подробней, я пока 0 в php
     
  4. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Похоже на правду... Это и не РНР вовсе :D Тут речь о html и js.
    Нужна функция которая в слое с определенным id будет выставлять соответствующую картинку в качестве фона, при наведении курсора на пункты меню. сюда за примером.
    Можно еще вот так менять:
    Код:
    document.images["pic1"].src = "pic/pic-1-on.gif";
    В общем вариантов много, осталось только выбрать подходящий и написать. Информацию выдал - там в статье есть все что нужно, может кто ради накрутки сообщений и напишет работающий код. Успехофф ;)
     
    asAlbert нравится это.
  5. k0missar

    k0missar

    Регистр.:
    20 сен 2008
    Сообщения:
    200
    Симпатии:
    25
    какбЭ могу отличит php от js, просто создал в тем с php, американец мля :tut:
     
  6. Dr.Sheff

    Dr.Sheff

    Регистр.:
    20 ноя 2010
    Сообщения:
    175
    Симпатии:
    26
    С нулевыми знаниями за работу нельзя браться. Скачайте книгу и почитайте хотя бы про HTML + основы программирования. А если программированием заниматься не планируете введите непонятные Вам термины в гугл и почитайте , что они значат. Подробней тут не объяснить.
     
  7. trooll

    trooll PHP кодер

    Регистр.:
    22 дек 2008
    Сообщения:
    503
    Симпатии:
    116
    PHP здесь второстепенный элемент, то что вам необходимо делается на связке CSS+HTML, +PHP для определения текущего пункта меню, Ну эта связка используется если вам нужна статичная реализация.

    Если же вы староник прогресса, и так же как и я считаете что современный пользователь должен иметь в браузере поддержку JS, а если ее у него нет он либо бот, либо что то "плохое замыслил". Еще кончено есть вариант что пользователь сидит со специального оборудования, типа телефон, ну это отдельная история.
    Ну так вот если вас это все не смущает, можно воспользоваться JS скриптом, что будет на много интереснее. Если интересно то исследуйте выдачу ПС по следующим ключевым и смежным запросам:
    Код:
    jquery выпадающее меню