Картинка как кнопка

[DeHver]

Всем доброго вечера, столкнулся с такой проблемкой, сделал кнопки в фотошопе, нужно сделать так, что бы при наведении на 1 картинку выскакивала 2 картика, а при отведении курсора опять выскакивала 1 картика, а при нажатии оставалась бы 2 картинка)Вообщем как-то так!Помогите пожалуйста, реально ли это сделать не через JS, а через html или CSS, hover?:)

[Dim@]

<div id='but' style='width:100px;height:100px;'>
<img src='http://av.li.ru/382/1862382_8829280.jpg' id='but1'>
<img src='http://i033.radikal.ru/0806/0b/48476622145f.gif' id='but2' style='display:none'>
</div>
<script type='text/javascript'>
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
document.getElementById("but").onmouseover = function (){
but1.style.display = "none";
but2.style.display = "block";
}
document.getElementById("but").onmouseout = function (){
but2.style.display = "none";
but1.style.display = "block";
}
document.getElementById("but").onmousedown = function (){
but1.style.display = "none";
but2.style.display = "block";
}
document.onmouseup = function (){
but2.style.display = "none";
but1.style.display = "block";
}

</script>

[Deff]

<br/>
<img src="http://s1.uploads.ru/i/2XExm.png" onclick="Thimg='http://s1.uploads.ru/i/ryGkd.png';this.src=Thimg;" onmouseover="this.src='http://s1.uploads.ru/i/ryGkd.png';Thimg='http://s1.uploads.ru/i/2XExm.png'" onmouseout="this.src=Thimg" />

[Dim@]

Deff,
я знал, я знал - что есть гораздо более легкий способ, просто не додумал :lol:

[Dim@]

Deff,
впрочем - там лучше не надо использовать onclick потому что
->при отводе и отпускании мыши остается - неправильно

[Aetae]

Dim@,
Что за жуть? Что за чудовищный велосипед?

Deff,
Уже лучше, но всё равно прошлый век, и лишние телодвиения.

DeHver,
Да именно так всё и делается, причём желательно с помощью спрайтов, чтобы избежать мигания до загрузки(и в целом ускорить загрузку сайта).
<style>
a.button{
cursor:pointer;
display:block;
width:168px;
height:76px;
background-image:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
}
a.button:hover{
background-position: -168px 0;
}
</style>
<a href="#" class="button"></a>
Соответственно картинка должна быть склеена из 2х(и более).

[Deff]

Deff,
Уже лучше, но всё равно прошлый век, и лишние телодвижения.
:write: А где залипание при клике, - О учитель ?

[Aetae]

Скорее всего это не нужно и оп просто криво выразил свои мысли.
Хотя в принципе и это возможно, но уже ie8+:

<style>
a.button{
cursor:pointer;
display:block;
width:168px;
height:76px;
background-image:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
}
a.button:hover, a.button:focus{
background-position: -168px 0;
}
</style>
<a href="#" class="button" tabindex="1"></a>

[Deff]

Aetae,
devote умудрялся как то переключатель через css делать

[Deff]

<style type="text/css">
#MyKnop {
background:url(http://s1.uploads.ru/i/EFYyv.png) 0 100% no-repeat;
width:91px;
height:22px;
}
#MyKnop:hover {
background-position: 0 0;
}
#MyKnop[alt="#"]{
background:url(http://s1.uploads.ru/i/EFYyv.png) 0 0 no-repeat;
}
</style>
<img id="MyKnop" onclick="this.alt='#'" src="http://forum.mybb.ru/i/blank.gif"/>

[Aetae]

<style type="text/css">
#MyKnop {
background:url(http://s1.uploads.ru/i/EFYyv.png) 0 100% no-repeat;
width:91px;
height:22px;
}
#MyKnop:hover {
background-position: 0 0;
}
a.wrp[href="#"] #MyKnop{
background-position: 0 0!important;
}
</style>
<a class="wrp" href="" onclick="this.href='#';return false"><img id="MyKnop" src="http://forum.mybb.ru/i/blank.gif"/></a>
Не понял, а в чём понт?
Всё также ie8+, только добавлен javascript, лишний элемент, и лишняя картинка.

[Deff]

Не понял, а в чём понт?
фокус теряется - кнопка отклеивается
лишний элемент, - убрал

[Aetae]

фокус теряется - кнопка отклеивается
лишний элемент, - убрал
Ну тут уж без опа непоймёшь какое именно поведение ему нужно было на самом деле.) Каждое поведение по-своему логично и зависит от того что изображает картинка.
И если уж использовать javascript, то не вижу никаого смысла в применении некросбраузерного селектора аттрибутов вместо обычного класса, как, впрочем, не вижу смысла и в использовании пустого изображения(загрузка кторого тоже слегка тормозит загрузкy остального контента):
<style type="text/css">
#button {
background:url(http://s1.uploads.ru/i/EFYyv.png) 0 100% no-repeat;
width:91px;
height:22px;
border:0;
}
#button:hover , #button.pressed{
background-position: left top;
}
</style>
<input type="button" id="button" onclick="this.className='pressed'"/>



P.S. Я вообще считаю, что ему достатчно было моего первого варианте.)

[Deff]

Aetae,
Имхо я так понял - что ему нужна кнопка картинкой
Хотя тады Ваш последний вариант с <input type="image" - подойдет

У button стиль нун чистить от бордеров

[ruslan_mart]

Лучше делать грамотней :) Обе картинки совместить в одну и менять позицию через hover, например:

<table class="myimage"><th/></table>

.myimage {width:50; height:20; background-image:url('ссылка');}
.myimage:hover {background-position:50;}

[Aetae]

Лучше делать грамотней :) Обе картинки совместить в одну и менять позицию через hover, например:

<table class="myimage"><th/></table>

.myimage {width:50; height:20; background-image:url('ссылка');}
.myimage:hover {background-position:50;}

http://javascript.ru/forum/190611-post6.html

[ruslan_mart]

Aetae, извиняюсь, не разглядывал все посты. :)

[NekPoMaHt]

Сталкнулся с проблемой. Есть две кнопки из двойной картинки, всё как бы замечательно и прочее, но только тогда, когда кнопки вставляю по отдельности. А когда кставляю две сразу, то происходит следущее: обе кнопки показывают мне картинку №2. Что именно нужно изменить в коде? :-)

<style type="text/css">
#MyKnop {
background:url(адрес кнопки-картинки №1) 0 100% no-repeat;
width:427px;
height:66px;
border:0;
}
#MyKnop:hover {
background-position: 0 0;
}
a.wrp[href="#"] #MyKnop{
background-position: 0 0!important;
}
</style>
<a href="адрес страницы №1" class="button" title="описание при наведении на кнопку-картинку №1"><img id="MyKnop"/></a>


<style type="text/css">
#MyKnop {
background:url(адрес кнопки-картинки №2) 0 100% no-repeat;
width:427px;
height:66px;
border:0;
}
#MyKnop:hover {
background-position: 0 0;
}
a.wrp[href="#"] #MyKnop{
background-position: 0 0!important;
}
</style>
<a href="адрес страницы №2" class="button" title="описание при наведении на кнопку-картинку №2"><img id="MyKnop"/></a>

[рони]

NekPoMaHt,
id уникально не повторяется в нормальной странице

[NekPoMaHt]

Спасибо, уже разобрался :)