Кнопка и ее 3 основных состояния

[john1992on]

Должен был сделать панель меню с кнопками имеющими 3 состояния link,hover,visited(active) -как в обычном html, но background'ом-спрайтом, т.е. для всех кнопок один файл фона, потому и пришлось пользоваться jQuery. Вот сделать 2 состояния - я смог, но как обработать клик по кнопке и в случае ее нажатия перевести ее в состояние active(оставить кнопку в состояние hover, пока не будет нажата другая)?

Два состояния делал так:

$("#logo1").hover(
		function () {	
		$("#logo1").css('background-position', '-150px 0px');
		}, function () {	
		$("#logo1").css('background-position', '0px 0px');
		});

П.С. Только начал изучать JQuery, вижу не так много русскоязычного материала, потому и сам не могу понять как справится с такой задачей, ибо пока не знаю всех возможностей...

[subzey]

Псевдоклассы css :active и :hover могут применяться и не только к ссылкам. Если Вам особо не нужен IE6, с jQuery можно даже не заморачиваться.

<style type="text/css">
/* обычное состояние */
button {background: lightgrey; border: none 0px;}
/* фокус на элементе */
button:focus {background: aliceblue}
/* курсор наведен */
button:hover {background: yellow}
/* кнопка вжата */
button:active {background: orange}
</style>
<button>Я кнопка</button>

[poorking]

<style type = "text/css">
button{
	border: 1px solid gray;
}

button:hover{
	border-color: red;
}

.hovered{
	border-color: red;
}

</style>
<button id = "#button">button</button>

<script type = "text/javascript">

var button = document.getElementById("#button");

button.onclick = function(){
	this.className = this.className == "" ? "hovered" : "";
}
</script>

UPD
ой я кажется не совсем понял что автор хотел, прошу прощения заранее

[john1992on]

subzey,
poorking,
О таких типах решения я знаю,
но если есть время и знания, хотел бы узнать решение именно моей задачи(т.е. с использованием sprite для фона кнопок).

[poorking]

john1992on,
Ну и что? суть в том что вы будете менять класс, а в классе свой background-position

<style type = "text/css">
button{
	border: 1px solid lime;
	background: url("http://javascript.ru/forum/images/ca_serenity/misc/logo.gif");
	color: white;
	cursor: pointer;
}

button:hover{
	border-color: red;
	background-position: center center;
}

.hovered{
	border-color: red;
	background-position: center center;
}

</style>
<button id = "#button">button</button>

<script type = "text/javascript">

var button = document.getElementById("#button");

button.onclick = function(){
	this.className = this.className == "" ? "hovered" : "";
}
</script>

[john1992on]

poorking,
А что если кнопок 3...? При изменение класса первой и нажатие на вторую - первая останется с измененным class.
Понимаю, что у вас позиция - не использовать jQuery, но все же... может поможете с ответом на именно мой вопрос?

[poorking]

john1992on,
Вот набыдлокодил вам по-быстренькому

<div id = "#wrapper"></div>
<style type = "text/css">

.normal{
	color: gray;
}

.hvr{
	color: green;
}

.act{
	color: red;
}
</style>

<script type = "text/javascript">
function Tumbler(elem, quantity, pacific, hovered, active){
	if(!elem) return;
	
	quantity || (quantity = 1);
	pacific || (pacific = "");
	hovered || (hovered = "");
	active || (active = "");
	
	var elems = this.elems = [];
	
	function makeHovered(){
		if(!(this.className == active)){
			this.className = hovered;
		}
	}
	
	function removeHovered(){
		if(!(this.className == active)){
			this.className = pacific;
		}
	}
	
	function makeActive(){
		this.className = this.className == hovered ? active : hovered;
		for(var i = 0, l = elems.length; i < l; i ++){
			if(elems[i] === this){
				continue;
			}
			if(elems[i].className == active){
				elems[i].className = pacific;
			}
		}
	}
	
	for(var i = 0; i < quantity; i ++){
		this.elems[i] = document.createElement(elem);
		this.elems[i].className = pacific;
		this.elems[i].onmouseover = makeHovered;
		this.elems[i].onmouseout = removeHovered;
		this.elems[i].onclick = makeActive;
	}
}

Tumbler.prototype.getAll = function(){
	var f = document.createDocumentFragment();
	for(var i = 0, l = this.elems.length; i < l; i ++){
		f.appendChild(this.elems[i]);
	}
	return f;
}

var buttons = new Tumbler("BUTTON", 5, "normal", "hvr", "act");

for(var i = 0, l = buttons.elems.length; i < l; i ++){
	buttons.elems[i].innerHTML = "button " +i; 
}

function byId(id){
	return document.getElementById(id);
}

byId("#wrapper").appendChild(buttons.getAll());
</script>

можете наполнить протитип методами какими вдумается, css-классы свои нарисуйте, а лучше вообще по-своему сделайте, я просто набросал не подумав, если js будет выключен то кнопок не будет) ну или переделайте конструктор чтобы он ел узел или выборку.
И да про JQuery, у меня нет никакого принципа типа Jquery плохо, я считаю это гениальным изобретением, но пользоваться ей не вижу смысла(может, пока-что), и не хочу повторить судьбу тех, кто блестяще запомнил все методы и плюшки в ней, но нативных методов не знает и вообще не представляет как работает все в JS, или задает потом вопросы, а как мне в Jquery Регулярное выражение использовать?,
Вот когда смогу сам такую написать, то буду пользоваться, и то своей.
И наконец )) не знаю я Jquery, так что простите

[john1992on]

poorking,
Лано, спасибо за труд!, Вы действительно профессионал по JS, но думаю, я сделаю по-своему, т.е. на фреймворке jQuery(потому и написал в именно в эту ветку форума), т.к. Ваш вариант можно переделать под мои нужды(использование sprite для фона кнопок), но это лично мне не под силу, да и нет(точнее совсем нет) желания морочить Вам с этим голову.


Если есть человек, хорошо знающий именно jQuery - просьба отозватся, есть пара моментов, которые хотел спросить...

[poorking]

<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.6.1.min.js"></script>
<style type = "text/css">
.mymegabutton{
	color: gray;
}

.hvr{
	color: green;
}

.act{
	color: red !important;
}
</style>
<button class = "mymegabutton">button 1</button>
<button class = "mymegabutton">button 2</button>
<button class = "mymegabutton">button 3</button>
<button class = "mymegabutton">button 4</button>
<button class = "mymegabutton">button 5</button>
<button class = "mymegabutton">button 6</button>
<script type = "text/javascript">
$(".mymegabutton").each(function(i, a){
	$(this).hover(function(){
		$(this).addClass("hvr");
	}).mouseout(function(){
		$(this).removeClass("hvr");
	}).click(function(){
		var that = this;
		$(".mymegabutton").each(function(){
			if(this === that){
				$(this).toggleClass("act");
				return;
			}
			$(this).removeClass("act");
		})		
	})
})

</script>

ну вот jquery, принцип тот же, цсс классы тебе все равно надо написать самому, просто вместо "hvr", "act" свои классы подставь

[john1992on]

poorking,
Я не могу задать всем класы, т.к. у меня для каждой кнопки отдельный стиль изменения позиции фона:

.mymegabutton {
	width:150px;
	height:150px;
	background-image:url(images/book-logo.png);
	margin-top:20px;
}

#mymegabutton1 {
	background-position: 0 0;
}

#mymegabutton2 {
	background-position: -300px 0;
}

#mymegabutton3 {
	background-position: -600px 0;
}

а для act:

$("#mymegabutton1").css('background-position', '-150px 0px');
$("#mymegabutton2").css('background-position', '-450px 0px');
$("#mymegabutton3").css('background-position', '-750px 0px');

т.е. для каждой кнопки - параметр css другой, кнопок всего 3.

Но с вашего кода, я уже вроде начал понимать кое какие непонятные моменты...

П.С. я Ваш должник