Вместо контексного меню на картинках вывести свое
Добрый вечер. На сайте надо на все изображения (например, с классом .images) запретить вывод контексного меню, и вывести свой текст.
Помогите пожалуйста. |
Нашел готовое,
// Вешаем слушатель события нажатие кнопок мыши для всего документа:
jQuery('.images').mousedown(function(event) {
// Убираем css класс selected-html-element у абсолютно всех элементов на странице с помощью селектора "*":
jQuery('*').removeClass('selected-html-element');
// Удаляем предыдущие вызванное контекстное меню:
jQuery('.context-menu').remove();
// Проверяем нажата ли именно правая кнопка мыши:
if (event.which === 3) {
// Получаем элемент на котором был совершен клик:
var target = $(event.target);
// Добавляем класс selected-html-element что бы наглядно показать на чем именно мы кликнули (исключительно для тестирования):
target.addClass('selected-html-element');
// Создаем меню:
jQuery('<div/>', {
class: 'context-menu'
// Присваиваем блоку наш css класс контекстного меню:
})
.css({
left: event.pageX+'px',
// Задаем позицию меню на X
top: event.pageY+'px'
// Задаем позицию меню по Y
})
.appendTo('body') // Присоединяем наше меню к body документа:
.append( // Добавляем пункты меню:
jQuery('<ul/>').append('<li><a href="#">Remove element</a></li>')
.append('<li><a href="#">Add element</a></li>')
.append('<li><a href="#">Element style</a></li>')
.append('<li><a href="#">Element props</a></li>')
.append('<li><a href="#">Open Inspector</a></li>')
)
.show('fast'); // Показываем меню с небольшим стандартным эффектом jQuery. Как раз очень хорошо подходит для меню
}
});
Но тут отключение контексного меню идет на всем сайте через document.oncontextmenu = function() {return false;}
А как убрать именно для моих картинок, но чтобы еще свое меню тоже работало? |
Rabbit13245, второй картинке добавлен класс
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.context-menu{
position: absolute;
background: #D2B48C;
border-radius: 8px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
// Вешаем слушатель события нажатие кнопок мыши для всего документа:
jQuery(document).on('contextmenu click' , '.images',function(event) { event.preventDefault() ;
// Убираем css класс selected-html-element у абсолютно всех элементов на странице с помощью селектора "*":
jQuery('*').removeClass('selected-html-element');
// Удаляем предыдущие вызванное контекстное меню:
jQuery('.context-menu').remove();
// Проверяем нажата ли именно правая кнопка мыши:
if (event.which === 3) {
// Получаем элемент на котором был совершен клик:
var target = $(this);
// Добавляем класс selected-html-element что бы наглядно показать на чем именно мы кликнули (исключительно для тестирования):
target.addClass('selected-html-element');
// Создаем меню:
jQuery('<div/>', {
'class': 'context-menu'
// Присваиваем блоку наш css класс контекстного меню:
})
.css({
left: event.pageX+'px',
// Задаем позицию меню на X
top: event.pageY+'px'
// Задаем позицию меню по Y
})
.appendTo('body') // Присоединяем наше меню к body документа:
.append( // Добавляем пункты меню:
jQuery('<ul/>').append('<li><a href="#">Remove element</a></li>')
.append('<li><a href="#">Add element</a></li>')
.append('<li><a href="#">Element style</a></li>')
.append('<li><a href="#">Element props</a></li>')
.append('<li><a href="#">Open Inspector</a></li>')
)
.show('fast'); // Показываем меню с небольшим стандартным эффектом jQuery. Как раз очень хорошо подходит для меню
}
});
});
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="images" alt="">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
</body>
</html>
|
| Часовой пояс GMT +3, время: 19:51. |