Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   При нажатии и удержании мыши заменяется картинка (https://javascript.ru/forum/events/8895-pri-nazhatii-i-uderzhanii-myshi-zamenyaetsya-kartinka.html)

Webroller 19.04.2010 19:20

При нажатии и удержании мыши заменяется картинка
 
Здравствуйте!

Помогите пожалуйста с событием. Есть ли такое событие типа onClick, только при нажатии и удержании?

При нажатии и удержании на картинку-кнопку, будет подставлять другая картинка, а при отжатии возвращаться обратно оригинальное изображение.

Таким образом получается эффект нажатия на кнопку.

пример как в меню Apple
http://apple.com
попробуйте нажать и удержать на ссылке меню Mac например

Заранее благодарен!

e1f 19.04.2010 19:41

onmousedown -- клавиша нажата
onmouseup -- клавиша отпущена

Octane 19.04.2010 19:44

Только на сайте Apple используют псевдо-класс :active в CSS, а не JavaScript.

e1f 19.04.2010 19:52

Ага, точно. Так даже лучше, если нужна ссылка.

subzey 19.04.2010 20:16

На сайт Эппл не заходят из IE6, хехе.

Suharik 26.05.2010 10:41

Здравсвуйте. Я тут сделал скриптик который при клике на ссылку прибавляет определенное число в инпуте, (вобщем простой скриптик)

Так вот, как сделать чтобы при onMouseDown (например) и удержании цифри все еще прибалялись с увеличением шага прибавления, или скоростью прибавления. Пример в ворде > абзац > отступ > там 2 стрелочки, одна прибавляет циферку другая уменьшает, а если долго подержать нажатую кнопку мыши, то циферки быстро увеличиваются или уменьшаются.

Мой скриптик выглядит так

nextNumber = function() {	

	var str =document.getElementById("price-from").value;
	RegEx=/\s/g;
	str=str.replace(RegEx,"");
   var x=  parseInt(str);
   
   x+=500000;
   document.getElementById("price-from").value = search.number_format(x, 0, '.', ' ');
 

}

ну тут получаем значение с инпута и просто прибавляем ему 500000

exec 26.05.2010 12:23

Suharik,

<input type="text" id="area" value="0" />
<input type="button" value="Insert!" id="but" />
<script type="text/javascript">
var node = document.getElementById('but'),
txt = document.getElementById('area');
node.onmousedown = function () {
	x = setInterval(function () {
		txt.value++;
	},
	500);
	document.onmouseup = node.onmouseup = function () {
		clearInterval(window.x);
	}
}
</script>


Демо

Suharik 26.05.2010 13:32

спасибо то что нужно. только я буду не через инпут button делать а через обычную картинку

Suharik 26.05.2010 13:34

да кстати еще бы добавить событие чтобы при клике тоже прибавлялась циферка, а не только при удержании

exec 26.05.2010 16:00

<input type="text" id="area" value="0" />
<input type="button" value="Insert!" id="but" />
<script type="text/javascript">
var node = document.getElementById('but'),
txt = document.getElementById('area');
node.onclick = function () {
	txt.value++;
}
node.onmousedown = function () {
	x = setInterval(function () {
		txt.value++;
	},
	500);
	document.onmouseup = node.onmouseup = function () {
		clearInterval(window.x);
	}
}
</script>


Часовой пояс GMT +3, время: 10:25.