Появление/исчезание подсветки в кнопке при клике по ней

Gamer · April 6, 2009

Здравствуйте!

Есть 3 блока, 3 кнопки и скрипт.

При нажатии по кнопке появляется/убирается блок (каждой кнопке свой блок). У тех же кнопок есть подсветка при наведении (то бишь просто смена изображения).

Теперь также нужно, чтобы при нажатии по кнопке не только появлялся блок, но и оставалась подсветка до тех пор, пока снова не нажмут на кнопку.

Подскажите, пожалуйста, как такое можно провернуть?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link type="text/css" rel="StyleSheet" href="http://site/Test.css">
<style type="text/css">
* {padding:0px;margin:0px;outline: none}
img {border:none;}
</style>
<script type="text/javascript">

function show(id){
 display = document.getElementById(id).style.visibility;
 if(display == 'hidden'){
 document.getElementById(id).style.visibility='visible';
}else{
 document.getElementById(id).style.visibility='hidden';

 }
}

</script>
</head>

<body>

<div id="pl" style="visibility:hidden;">1</div>
<div id="chatt" style="visibility:hidden;">2</div>
<div id="news" style="visibility:hidden;">3</div>

<div><a href="#" onmouseout="document.Pil.src = 'http://site/img4.png';" onmouseover="document.Pil.src = 'http://site/img2.png';" onclick="show('pl'); return false;"><img src="http://site/img4.png';" name="Pil"></a></div>
<div><a href="#" onmouseout="document.NewsL.src = 'http://site/img1.png';" onmouseover="document.NewsL.src = 'http://site/img2.png';" onclick="show('news'); return false;"><img src="http://site/img1.png';" name="NewsL"></a></div>
<div><a href="#" onmouseout="document.Chat.src = 'http://site/img3.png';" onmouseover="document.Chat.src = 'http://site/img2.png';" onclick="show('chatt'); return false;"><img src="http://site/img3.png';" name="Chat"></a></div>

</body>
</html>

Edited April 6, 2009 by Gamer

s0rr0w · April 6, 2009

Здравствуйте!
Есть 3 блока, 3 кнопки и скрипт.
При нажатии по кнопке появляется/убирается блок (каждой кнопке свой блок). У тех же кнопок есть подсветка при наведении (то бишь просто смена изображения).
Теперь также нужно, чтобы при нажатии по кнопке не только появлялся блок, но и оставалась подсветка до тех пор, пока снова не нажмут на кнопку.
Подскажите, пожалуйста, как такое можно провернуть?

Примитивная задача для StateController'а

Посмотрите примеры в соседней ветке. Если не сможете разобраться, я подскажу.

Gamer · April 8, 2009

Примитивная задача для StateController'а

Да, вы правы

С помощью вашей технологии я легко реализовал то, что хотел:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>...</title>
<link type="text/css" rel="StyleSheet" href="http://site/Test.css">
<style type="text/css">
* {padding:0px;margin:0px;outline: none}
img {border:none;}
.hiddenBlock {display:none;}
</style>

<script type="text/javascript" src="http://site/stateController.js"></script>
<script type="text/javascript" src="http://site/scHandlers.js"></script>
<script type="text/javascript" src="http://site/lib.js"></script>

</head>

<body>

<div id="buttonP"><a href="#" onmouseout="document.Pilots.src = 'http://site/ASP.png';" onmouseover="document.Pilots.src = 'http://site/ASPA.png';" onclick="GSC_setValAndLaunch('pl', true, 'buttonP'); GSC_setValAndLaunch('pl2', true, 'pilotslist'); return false;" SC="sc_hide_node:pl"><img src="http://site/ASP.png" name="Pilots"></a><a href="#" onclick="GSC_setValAndLaunch('pl', false, 'buttonP'); GSC_setValAndLaunch('pl2', false, 'pilotslist'); return false;" SC="sc_show_node:pl" class="hiddenBlock"><img src="http://site/ASPA.png"></a></div>

<div id="buttonC"><a href="#" onmouseout="document.Chat.src = 'http://site/Chat.png';" onmouseover="document.Chat.src = 'http://site/ChatA.png';" onclick="GSC_setValAndLaunch('ch', true, 'buttonC'); GSC_setValAndLaunch('ch2', true, 'chatt'); return false;" SC="sc_hide_node:ch"><img src="http://site/Chat.png" name="Chat"></a><a href="#" onclick="GSC_setValAndLaunch('ch', false, 'buttonC'); GSC_setValAndLaunch('ch2', false, 'chatt'); return false;" SC="sc_show_node:ch" class="hiddenBlock"><img src="http://site/ChatA.png"></a></div>

<div id="buttonN"><a href="#" onmouseout="document.NewsL.src = 'http://site/News.png';" onmouseover="document.NewsL.src = 'http://site/NewsA.png';" onclick="GSC_setValAndLaunch('nw', true, 'buttonN'); GSC_setValAndLaunch('nw2', true, 'news'); return false;" SC="sc_hide_node:nw"><img src="http://site/News.png" name="NewsL"></a><a href="#" onclick="GSC_setValAndLaunch('nw', false, 'buttonN'); GSC_setValAndLaunch('nw2', false, 'news'); return false;" SC="sc_show_node:nw" class="hiddenBlock"><img src="http://site.png"></a></div>

<div id="pilotslist" SC="sc_show_node:pl2" class="hiddenBlock">1</div>
<div id="chatt" SC="sc_show_node:ch2" class="hiddenBlock">2</div>
<div id="news" SC="sc_show_node:nw2" class="hiddenBlock">3</div>

</body>
</html>

Edited April 8, 2009 by Gamer

s0rr0w · April 8, 2009

Да, вы правы
С помощью вашей технологии я легко реализовал то, что хотел:

А если немного изменить мышление, то вы будете делать это гораздо быстрее и эффективнее.

Вот смотрите, что у вас есть.

Есть кнопка, которая реагирует на наведение мыши. Есть блок (или набор блоков), который реагирует на это же событие.

При нажатии на какую-то кнопку нам нужно запомнить, какая именно кнопка у нас активная, и для активной кнопки не нужно менять состояние.

Вы меняете src у картинки, что не сильно хорошо. Я потом расскажу, как от этого избавиться, чтобы не писать прелоадер на JS.

Весь код у нас будет лежать в одном контейнере (хотя можно и в разных, не суть важно).

Вот так будет выглядеть наш элемент.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>StateController. Пример.</title>
 <link rel="stylesheet" type="text/css" href="../inc/main.css">
 <link rel="stylesheet" type="text/css" href="local.css">

 <script type="text/javascript" src="../StateController/lib.js"></script>

 <script type="text/javascript" src="../StateController/stateController.js"></script>

 <script type="text/javascript" src="../StateController/scHandlers.js"></script>

 <script type="text/javascript">
	var roll = function ( alias, state ) {
		try {
			GSC_setValAndLaunch( "roll", ( state )? alias : -1, "dataContainer" );
		} catch ( e ) {}
	};

	var activate = function ( alias ) {
		try {
			GSC_setValAndLaunch( "active", alias, "dataContainer" );
		} catch ( e ) {}
	};
 </script>


 <style type="text/css">
 	.hover, .active .normal, .activeItem .normal { display: none }
 	.active .hover, .activeItem .hover, .visibleTitle { display: inline }
 	.activeTitle { display: inline !important }

 </style>



</head>
<body>

	<div id="dataContainer">
		<div>
			<a href="#" onmouseover="roll(1, true);" onmouseout="roll(1, false);" onclick="activate(1); return false;" SC="sc_apply_class_by_id:roll:1:active|sc_apply_class_by_id:active:1:activeItem"><span class="normal">Нормальная картинка 1</span><span class="hover">Ненормальная картинка 1</span></a>
			<span SC="sc_apply_class_by_id:roll:1:visibleTitle|sc_apply_class_by_id:active:1:acti
veTitle" class="hiddenBlock">Подпись к картинке 1</span>                                                           
		</div>
		<div>
			<a href="#" onmouseover="roll(2, true);" onmouseout="roll(2, false);" onclick="activate(2); return false;" SC="sc_apply_class_by_id:roll:2:active|sc_apply_class_by_id:active:2:activeItem"><span class="normal">Нормальная картинка 2</span><span class="hover">Ненормальная картинка 2</span></a>
			<span SC="sc_apply_class_by_id:roll:2:visibleTitle|sc_apply_class_by_id:active:2:acti
veTitle" class="hiddenBlock">Подпись к картинке 2</span>
		</div>
		<div>
			<a href="#" onmouseover="roll(3, true);" onmouseout="roll(3, false);" onclick="activate(3); return false;" SC="sc_apply_class_by_id:roll:3:active|sc_apply_class_by_id:active:3:activeItem"><span class="normal">Нормальная картинка 3</span><span class="hover">Ненормальная картинка 3</span></a>
			<span SC="sc_apply_class_by_id:roll:3:visibleTitle|sc_apply_class_by_id:active:3:acti
veTitle" class="hiddenBlock">Подпись к картинке 3</span>
		</div>
	</div>

</body>
</html>

Sign In

Появление/исчезание подсветки в кнопке при клике по ней

Question

Gamer

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

Gamer

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information