Как запретить выделение/копирование изображения | HTML

Защита картинки от копирования

Есть скрипты, которые блокируют правую кнопку мышки, в результате чего нельзя вызвать контекстное меню, если нажать на фото. На CSS можно сделать более элегантное решение: в всплывающем контекстном меню не будет пункта "Сохранить изображение как...".

Юрий Гагарин
<img alt="Юрий Гагарин" src="http://4.bp.blogspot.com/-mYlPDWIZow8/Uyf5XWcqDzI/AAAAAAAAEQg/gF2CoJVyDxo/s300/gagarin.jpeg" style="pointer-events: none;">
или для всех изображений сайта
<style>
img { pointer-events: none; }
</style>

ВНИМАНИЕ: картинка легко скачивается из исходного кода страницы. Серьёзно предполагать, что подобными методами (JavaScript или CSS) можно удержать плагиаторов, нельзя.

Как запретить выделение изображения

Юрий Гагарин
<img alt="Юрий Гагарин" src="http://4.bp.blogspot.com/-mYlPDWIZow8/Uyf5XWcqDzI/AAAAAAAAEQg/gF2CoJVyDxo/s300/gagarin.jpeg" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;">

Я обычно объединяю оба способа для создания, например, такой фотогалереи

в f t
наверх ↑

18 комментариев:

Иван
На вордпрессе тоже есть даже плагин, который выключает правую кнопку мышки, не дает простым способом скопировать фото и текст. Но к сожалению это только простой способ. А скопировать можно другими способами. Это не проблема кто хочет скопировать.
NMitra
Совершенно верно. Отключение JavaScript даёт доступ к коду, а дальше всё очень просто. Программам даже это делать не нужно, мало какие скрипты видят ту же картинку, что и браузеры. В них просто не заложена поддержка всех свойств CSS, JavaScript.

Эти свойства, конечно, были придуманы для другого. Я сейчас плотно подсела на сочетание pointer-events с user-select и focus. Точно также, как когда-то на :checked. Огорчает только Опера Мини.
Rinat Urmancheev
К сожалению, способы не подходят для многих IE (goo.gl/SgHlwy, goo.gl/lyBddg). Мне кажется, об этом стоит упомянуть в сообщении :)
NMitra
Ринат, дело в том, что здесь я не описываю работу конкретного свойства, как, например, тут http://css-tricks.com/almanac/properties/p/pointer-events/ , а даю способы решения конкретной задачи. Было бы, например, странно, если бы я в статье про "таб-вкладки" http://shpargalkablog.ru/2012/03/css-tabs.html давала бы описание каждого отдельного свойства. То же самое и тут.

Да и не справочник у меня, а блог. Справочник в Рунете уже есть и довольно не плохой и удобный в использовании http://htmlbook.ru/ . Англоязычный мне нравится у Мозилы https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events , во-первых, из первых рук, во-вторых, есть ссылка на w3.org (новые-старые версии).

А поддержку браузерами можно посмотреть и тут http://caniuse.com/pointer-events

Тоже обращение по Утриш подписала, а потом прочитала, что вопрос уже решён в пользу заповедника. Ура!!!
Nonna
Здравствуйте. Подскажите, как использовать pointer-events: none для всех изображений, кроме нескольких картинок (значков) социальных сетей, которые являются ссылками? Пробовала к
pointer-events: none;

дописывать
pointer-events: auto
не сработало. В отдельном гаджете - тоже ничего...Может есть какой-то способ сделать исключения для работы мышки только на некоторых картинках?
NMitra
Здравствуйте,

1) использование класса (изображениям, к которым не нужен pointer-events: none; задать класс) http://jsfiddle.net/NMitra/k954gn16/
img { pointer-events: none; }
img.non { pointer-events: auto; }

2) исключение для картинок-ссылок http://jsfiddle.net/NMitra/k954gn16/1/
img { pointer-events: none; }
a img { pointer-events: auto; }
Nonna
Здравствуйте, спасибо за скорый ответ. Пытаюсь разобраться (step by step, а уж Вы исправьте что не так) - добавляю гаджет Настроить HTML/JavaScript, вписываю style img pointer-events: none; style так я получаю неработающую левую кнопку+невозможность выделения изображения+нет пункта "сохранить изображение как.." Тут разобралась. Все ОК. Это должно быть применимо ко ВСЕМ изображениям и поэтому сразу перехожу к 2) Вашего ответа - исключения для картинок ссылок. Тут также есть гаджет Настроить HTML/JavaScript в котором есть (одно из нескольких) a href=https www.facebook.com/N" target blank" title Facebook img src https mg-fotki.yandex.ru/get/15519/235879411.0/0_101ae5_4b1c1ddd_XXS.gif style height: 30px; width: 30px; a. И вот тут я застреваю - если у меня в отдельном гаджете уже стоит для всех, то как мне выделить a img? А третий гаджет - переводчик, там есть картинки и для них нужны работающие и правая и левая кнопки мыши.Там есть a class google_translate href target blank" rel nofollow" title English" onclick window.open('http translate.google.com/translate?u encodeURIComponent(location.href) langpair auto%7Cen&hl=en return false img alt English" border 0" align absbottom" title "English height 24src http4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United Kingdom Great+Britain).png style cursor pointer;margin-right 8px width 28 a. Надеюсь, что понятно объяснила свою проблему)) Буду благодарна за пошаговую помощь, так как я еще новичок ))
Nonna
И еще кое-что. Если с запретом сохранения картинок на компе более-менее понятно, то что делать с мобильниками? "Показывать на мобильных устройствах мобильную версию текущего шаблона. Да.Показывать мобильные шаблоны на мобильных устройствах \Нет.Показывать шаблоны для компьютеров на мобильных устройствах." И так и так при клике на фото они открываются в отдельном окне с показательным адресом. И сразу предлагается сохранить фото...Плюс у меня свой домен и хотелось бы не отсвечивать движок на адресах картинок. Есть такая возможность?
NMitra
Здравствуйте. Так.
1) у вас все картинки идут с Г+, поэтому их все там можно вытянуть,
2) изображения индексируют поисковые системы (в полный рост и с хорошим качеством) и человек в большинстве случаев рыщет именно по картинкам Яндекса и Гугл.
3) какой бы вы скрипт не поставили, при желании скопировать адрес изображения для меня не составит большого труда.
4) принадлежность к платформе выдаёт построение кода, а не столько изображения, их может бросать в Г+ и сайт на хостинге

В гаджете не должно быть проблем, так как второй строкой
a img { pointer-events: auto; }
мы убираем действие pointer-events для картинок, у которых родитель ссылка
Nonna
Здравствуйте. С Вашими ответами разобралась, все понятно, спасибо. С гаджетом не получается все равно: если пишу первую строку, то отключается все, а если пишу 2 строки (вот так) style img { pointer-events: none; } a img { pointer-events: auto; } style, то все вновь включается.То есть исключение для ссылочных картинок не работает.
NMitra
Только для Blogger

.post-body img { pointer-events: none; }
Nonna
Так мне для него и нужно ))) так вписывать: style .post-body img { pointer-events: none; } a img { pointer-events: auto; } style ?
NMitra
Только одну строку в CSS http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css
Nonna
Oh,yes!!! ПОЛУЧИЛОСЬ)) Спасибо большое! Надо было мне сразу сказать, что Blogger, верно? )) Тут вопросов-вагон и маленькая тележка..Во-первых, шаблон давно сломан (когда и как я это умудрилась - не помню, но все работает, так что не заморачиваюсь), это ведь не чревато? Во-вторых, прочитала у Вас в комментариях обсуждения по поводу цвета фона. У меня любая фоновая картинка темнеет, сереет как бы и не помогает отбеливание в фотошопе, даже полупрозрачность.. И, наконец, в сообщениях проставлено Enter для переноса строк, а не работает перенос.Вообще никак. PS Спасибо за Ваш блог! Сейчас читаю сразу несколько ваших страниц ))
NMitra
1) зависит от того что сломано
2) в настройках Google+ "Автокоррекцию" нужно пометить как "Отменить все изменения" (см. http://shpargalkablog.ru/2012/11/nastroit-blogger.html )
3) не могу сказать, я пишу статьи на вкладке "HTML"
Nonna
Здравствуйте.1).значок сломанного шаблона появился после того, как оформила все гаджеты (поиск,переводчик,подписку и тд) в отдельные симпатичные окна. откуда брала и куда что вставляла в шаблоне не помню.но все работает. стоит искать "место поломки"?2).спасибо 3).перенос не работает и сейчас, когда я пишу Вам это сообщение в окне комментариев..Еще есть вопрос по шрифтам, но не могу найти у Вас темку. Дайте,пожалуйста, ссылку - там спрошу.
NMitra
Здравствуйте. Поломку лучше исправить, раз шаблон даже на изменение стилей ругается. То есть вы на "Шпаргалке блоггера" в форме комментариев не можете воспользоваться Enter? У вас он в другом месте где-нибудь (на третьем сайте) работает?
Nonna
поломку...даже не представляю как...на третьем сайте?...хм..к примеру, в mail.ru, в теле письма перенос работает, а в rambler.ru - нет...