Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Картинка как кнопка (https://javascript.ru/forum/misc/30034-kartinka-kak-knopka.html)

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

Dim@ 21.07.2012 20:58 
<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 21.07.2012 21:00 
<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@ 21.07.2012 21:03
Deff,
я знал, я знал - что есть гораздо более легкий способ, просто не додумал :lol:

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

Aetae 21.07.2012 21:09
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 21.07.2012 21:51
Цитата:
Сообщение от Aetae
Deff,
Уже лучше, но всё равно прошлый век, и лишние телодвижения.
:write: А где залипание при клике, - О учитель ?

Aetae 21.07.2012 22:05
Скорее всего это не нужно и оп просто криво выразил свои мысли.
Хотя в принципе и это возможно, но уже 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 21.07.2012 22:27
Aetae,
devote умудрялся как то переключатель через css делать

Deff 21.07.2012 22:52 
<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"/>


Часовой пояс GMT +3, время: 12:29.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице