Главная Вход в систему Регистрация
Задать вопрос Консультации Пользователи Форум
О системе Помощь
Задать вопрос экспертам
Консультация № 190005
10.11.2016, 16:58
0.00 руб.
1 4 1
Компьютеры Программирование
Здравствуйте! У меня возникли сложности с таким вопросом:
Необходимо с помощью JavaScript создать горизонтальное меню из 7 кнопок с параметрами, указанными на картинке.

Прикрепленные файлы:
cfb7aed1f62c69d052110b7e235cea549a1fcea1.jpg
скачать (274.00 кБ)

Обсуждение

давно
Степанов Иван /REDDS
Посетитель
400537
50
10.11.2016, 18:47
общий
11.11.2016, 13:27
это ответ
Здравствуйте, Sergei V. Moroz / F®ost!
[code lang=html]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=win-1251">
<script language="javascript">
var default_color;
function mouseIn() {//при наведении курсора
default_color = document.changecolorbutton.link1.style.background;
document.changecolorbutton.link1.style.background = "black";//меняем цвет кнопки
document.changecolorbutton.link1.style.color = "white"; //меняем цвет текста
}
function mouseOut() {//отвести мышку
document.changecolorbutton.link1.style.background = "white"; //исходный цвет кнопки
document.changecolorbutton.link1.style.color = "black";//исходный цвет текста
}

function a() {//обьединяем все функции mouseOut в одну для вызова их при загрузке страницы
mouseOut()
mouseOut2()
mouseOut3()
mouseOut4()
mouseOut5()
mouseOut6()
mouseOut7()
;
}


function mouseIn2() {
default_color = document.changecolorbutton2.link2.style.background;
document.changecolorbutton2.link2.style.background = "white";
document.changecolorbutton2.link2.style.color = "black";
}
function mouseOut2() {
document.changecolorbutton2.link2.style.background = "black";
document.changecolorbutton2.link2.style.color = "white";
}

function mouseIn3() {
default_color = document.changecolorbutton3.link3.style.background;
document.changecolorbutton3.link3.style.background = "blue";
document.changecolorbutton3.link3.style.color = "white";
}
function mouseOut3() {
document.changecolorbutton3.link3.style.background = "white";
document.changecolorbutton3.link3.style.color = "red";
}

function mouseIn4() {
default_color = document.changecolorbutton4.link4.style.background;
document.changecolorbutton4.link4.style.background = "yellow";
document.changecolorbutton4.link4.style.color = "black";
}
function mouseOut4() {
document.changecolorbutton4.link4.style.background = "black";
document.changecolorbutton4.link4.style.color = "yellow";
}

function mouseIn5() {
default_color = document.changecolorbutton5.link5.style.background;
document.changecolorbutton5.link5.style.background = "white";
document.changecolorbutton5.link5.style.color = "blue";
}
function mouseOut5() {
document.changecolorbutton5.link5.style.background = "blue";
document.changecolorbutton5.link5.style.color = "yellow";
}

function mouseIn6() {
default_color = document.changecolorbutton6.link6.style.background;
document.changecolorbutton6.link6.style.background = "black";
document.changecolorbutton6.link6.style.color = "yellow";
}
function mouseOut6() {
document.changecolorbutton6.link6.style.background = "yellow";
document.changecolorbutton6.link6.style.color = "black";
}

function mouseIn7() {
default_color = document.changecolorbutton7.link7.style.background;
document.changecolorbutton7.link7.style.background = "yellow";
document.changecolorbutton7.link7.style.color = "red";
}
function mouseOut7() {
document.changecolorbutton7.link7.style.background = "white";
document.changecolorbutton7.link7.style.color = "blue";
}


</script>
<style type="text/css">
.q1{
float:left;

}
</style>


</head>
<body onload="a();" >
<form name = "changecolorbutton">
<input type="button" name="link1" class="q1" value="link1" onclick='location.href="http://ссылка page1/"' onMouseOver="mouseIn()" onMouseOut="mouseOut()">
</form>
<form name = "changecolorbutton2">
<input type="button" name="link2" class="q1" value="link2" onclick='location.href="http://ссылка page2/"' onMouseOver="mouseIn2()" onMouseOut="mouseOut2()">
</form>
<form name = "changecolorbutton3">
<input type="button" name="link3" class="q1" value="link3" onclick='location.href="http://ссылка page3/"' onMouseOver="mouseIn3()" onMouseOut="mouseOut3()">
</form>
<form name = "changecolorbutton4">
<input type="button" name="link4" class="q1" value="link4" onclick='location.href="http://ссылка page3/"' onMouseOver="mouseIn4()" onMouseOut="mouseOut4()">
</form>
<form name = "changecolorbutton5">
<input type="button" name="link5" class="q1" value="link5" onclick='location.href="http://ссылка page5/"' onMouseOver="mouseIn5()" onMouseOut="mouseOut5()">
</form>
<form name = "changecolorbutton6">
<input type="button" name="link6" class="q1" value="link6" onclick='location.href="http://ссылка page3/"' onMouseOver="mouseIn6()" onMouseOut="mouseOut6()">
</form>
<form name = "changecolorbutton7">
<input type="button" name="link7" class="q1" value="link7" onclick='location.href="http://ссылка page3/"' onMouseOver="mouseIn7()" onMouseOut="mouseOut7()">
</form>


</body>
</html>[/code]
5
Спасибо.
Об авторе:
Твое внимание станет мой энергией
в сети
Сергей Фрост
Управляющий
143894
2148
11.11.2016, 11:38
общий
11.11.2016, 21:46
Адресаты:
Ваш код не соответствует заданию.
Претензий к переключению цветов при наведении курсора нет, и после ухода курсора цвета возвращаются нормально.
Претензия к исходным цветам.
В задании указаны исходные цвета кнопок и текста, у вас же исходные цвета кнопок СЕРЫЙ, а текста - ЧЕРНЫЙ (см. рисунок -верхний ряд). А в задании указаны совсем другие цвета кнопок и текста (см. рисунок нижний ряд). Эти исходные цвета должны быть изначально на кнопках, а не только после ухода с них курсора.

Сможете исправить (переделать) код?
Прикрепленные файлы:
e46cfbbf58f1285eece9d272061b1f3f.jpg
скачать (36.00 кБ)
Об авторе:
Устав – есть устав! Если ты устав – то отдыхай!
давно
Степанов Иван /REDDS
Посетитель
400537
50
11.11.2016, 13:22
общий
Цитата: Сергей Фрост
Сможете исправить (переделать) код?

Немного дописал код теперь при загрузке страницы кнопки нужного цвета
Код:
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=win-1251">
 <script language="javascript">
var default_color;
function mouseIn() {//при наведении курсора
  default_color = document.changecolorbutton.link1.style.background;
  document.changecolorbutton.link1.style.background = "black";//меняем цвет кнопки
  document.changecolorbutton.link1.style.color = "white"; //меняем цвет текста
}
function mouseOut() {//отвести мышку 
 document.changecolorbutton.link1.style.background = "white"; //исходный цвет кнопки
document.changecolorbutton.link1.style.color = "black";//исходный цвет текста
}

 function a() {//обьединяем все функции  mouseOut в одну для вызова их при загрузке страницы
    mouseOut()
    mouseOut2()
	mouseOut3()
	mouseOut4()
	mouseOut5()
	mouseOut6()
	mouseOut7()
	;
  }


function mouseIn2() {
  default_color = document.changecolorbutton2.link2.style.background;
     document.changecolorbutton2.link2.style.background = "white";
document.changecolorbutton2.link2.style.color = "black";
}
function mouseOut2() {
document.changecolorbutton2.link2.style.background = "black";
  document.changecolorbutton2.link2.style.color = "white";
}

function mouseIn3() {
  default_color = document.changecolorbutton3.link3.style.background;
     document.changecolorbutton3.link3.style.background = "blue";
document.changecolorbutton3.link3.style.color = "white";
}
function mouseOut3() {
document.changecolorbutton3.link3.style.background = "white";
  document.changecolorbutton3.link3.style.color = "red";
}

function mouseIn4() {
  default_color = document.changecolorbutton4.link4.style.background;
     document.changecolorbutton4.link4.style.background = "yellow";
document.changecolorbutton4.link4.style.color = "black";
}
function mouseOut4() {
document.changecolorbutton4.link4.style.background = "black";
  document.changecolorbutton4.link4.style.color = "yellow";
}

function mouseIn5() {
  default_color = document.changecolorbutton5.link5.style.background;
     document.changecolorbutton5.link5.style.background = "white";
document.changecolorbutton5.link5.style.color = "blue";
}
function mouseOut5() {
document.changecolorbutton5.link5.style.background = "blue";
  document.changecolorbutton5.link5.style.color = "yellow";
}

function mouseIn6() {
  default_color = document.changecolorbutton6.link6.style.background;
     document.changecolorbutton6.link6.style.background = "black";
document.changecolorbutton6.link6.style.color = "yellow";
}
function mouseOut6() {
document.changecolorbutton6.link6.style.background = "yellow";
  document.changecolorbutton6.link6.style.color = "black";
}

function mouseIn7() {
  default_color = document.changecolorbutton7.link7.style.background;
     document.changecolorbutton7.link7.style.background = "yellow";
document.changecolorbutton7.link7.style.color = "red";
}
function mouseOut7() {
document.changecolorbutton7.link7.style.background = "white";
  document.changecolorbutton7.link7.style.color = "blue";
}


</script>
  <style type="text/css">
.q1{
float:left;

}
  </style>


</head>
<body  onload="a();" >
<form name = "changecolorbutton">
  <input type="button" name="link1" class="q1"  value="link1" onclick='location.href="http://ссылка page1/"' onMouseOver="mouseIn()" onMouseOut="mouseOut()">
</form>
<form name = "changecolorbutton2">
  <input type="button" name="link2"  class="q1" value="link2" onclick='location.href="http://ссылка page2/"' onMouseOver="mouseIn2()" onMouseOut="mouseOut2()">
</form>
<form name = "changecolorbutton3">
  <input type="button" name="link3" class="q1" value="link3" onclick='location.href="http://ссылка page3/"' onMouseOver="mouseIn3()" onMouseOut="mouseOut3()">
</form>
<form name = "changecolorbutton4">
  <input type="button" name="link4" class="q1" value="link4" onclick='location.href="http://ссылка page3/"' onMouseOver="mouseIn4()" onMouseOut="mouseOut4()">
</form>
<form name = "changecolorbutton5">
  <input type="button" name="link5" class="q1" value="link5" onclick='location.href="http://ссылка page5/"' onMouseOver="mouseIn5()" onMouseOut="mouseOut5()">
</form>
<form name = "changecolorbutton6">
  <input type="button" name="link6" class="q1" value="link6" onclick='location.href="http://ссылка page3/"' onMouseOver="mouseIn6()" onMouseOut="mouseOut6()">
</form>
<form name = "changecolorbutton7">
  <input type="button" name="link7"  class="q1" value="link7" onclick='location.href="http://ссылка page3/"' onMouseOver="mouseIn7()" onMouseOut="mouseOut7()">
</form>


</body>
</html>
Об авторе:
Твое внимание станет мой энергией
в сети
Сергей Фрост
Управляющий
143894
2148
11.11.2016, 14:50
общий
Адресаты:
Спасибо, сейчас все корректно работает.
Об авторе:
Устав – есть устав! Если ты устав – то отдыхай!
Форма ответа