Картинка как кнопка
Всем доброго вечера, столкнулся с такой проблемкой, сделал кнопки в фотошопе, нужно сделать так, что бы при наведении на 1 картинку выскакивала 2 картика, а при отведении курсора опять выскакивала 1 картика, а при нажатии оставалась бы 2 картинка)Вообщем как-то так!Помогите пожалуйста, реально ли это сделать не через JS, а через html или CSS, hover?:)
|
<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>
|
<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" /> |
Deff,
я знал, я знал - что есть гораздо более легкий способ, просто не додумал :lol: |
Deff,
впрочем - там лучше не надо использовать onclick потому что ->при отводе и отпускании мыши остается - неправильно |
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х(и более). |
Цитата:
|
Скорее всего это не нужно и оп просто криво выразил свои мысли.
Хотя в принципе и это возможно, но уже 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>
|
Aetae,
devote умудрялся как то переключатель через css делать |
<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"/>
|
Цитата:
Всё также ie8+, только добавлен javascript, лишний элемент, и лишняя картинка. |
Цитата:
лишний элемент, - убрал |
Цитата:
И если уж использовать 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. Я вообще считаю, что ему достатчно было моего первого варианте.) |
Aetae,
Имхо я так понял - что ему нужна кнопка картинкой Хотя тады Ваш последний вариант с <input type="image" - подойдет У button стиль нун чистить от бордеров |
Лучше делать грамотней :) Обе картинки совместить в одну и менять позицию через hover, например:
<table class="myimage"><th/></table>
.myimage {width:50; height:20; background-image:url('ссылка');}
.myimage:hover {background-position:50;}
|
Цитата:
|
Aetae, извиняюсь, не разглядывал все посты. :)
|
Сталкнулся с проблемой. Есть две кнопки из двойной картинки, всё как бы замечательно и прочее, но только тогда, когда кнопки вставляю по отдельности. А когда кставляю две сразу, то происходит следущее: обе кнопки показывают мне картинку №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 уникально не повторяется в нормальной странице |
Спасибо, уже разобрался :)
|
| Часовой пояс GMT +3, время: 06:49. |