Запрет выделения картинок css

Выделение текста для копирования CSS

Если скопировать выделенный текст вместе с изображением , то вместо картинки будет содержимое её атрибута alt . Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Если скопировать выделенный текст вместе с изображением  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>, то вместо картинки будет содержимое её атрибута alt. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Текст будет скопирован без картинки  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  contenteditable --> 
contenteditable>Изменить меня с user-select: auto;
 
contenteditable>Изменить меня с user-select: all;
 
contenteditable>Изменить меня с user-select: none;

Активные псевдоэлементы ::before и ::after

  
Нельзя выделить и скопировать содержимое псевдоэлементов.

Источник

Как запретить выделять рисунк?

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Обсуждения

http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

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

если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах

Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

тогда как выше предложили пустую строку

или если подсветка ячеек не обязательна, то можно так

Источник

Сделать изображение в браузере некликабельным

Всем привет! Подскажите, пожалуйста, каким образом проще всего выводить на страницу изображение, которое было бы некликабельным? т.е., чтобы нельзя было его «сохранить как», и захватить ссылку на него, по нажатию ЛКМ, к примеру.

Как сделать некликабельным прозрачную площадь Png картинки
Всем добрый день. Имеется png картинка, с прозрачным фоном. То есть заливка изображения не на.

Подскажите, как сделать в html, чтобы изображение накладывалось на другое изображение?
Нужно, чтобы изображение накладывалось на другое изображение, а другое изображение растягивалось по.

Рамка при наведении на изображение — изображение скачет, как сделать, чтобы они не изменяли позицию?
Хочу сделать рамку при наведении на изображение, но изображение скачет, как сделать, чтобы они не.

Сообщение было отмечено long399 как решение

Решение

long399, если защита нужна от простого пользователя то можно для картинки задать pointer-events:none; , если же пользователь что-то понимает, то все-равно доберется до картинки

Сообщение от long399

которое было бы некликабельным? т.е., чтобы нельзя было его «сохранить как», и захватить ссылку на него, по нажатию ЛКМ, к примеру.

все это защита от «дурака», что бы сохранить картинку, достаточно сделать просто скриншот экрана.

AlexZaw, Благодарю Вас, в принципе то, что я и хотел, но есть один ньюанс . Изображение теперь защищено от воздействия с пом. кнопок мыши, но его можно выделить на странице (примерно как и текст) и скопировав, в буфер перейдет содержимое alt. этого как-то можно избежать?

Добавлено через 53 секунды
novichek_1905, я это понимаю, но на данный момент мне достаточно сделать такую защиту. я понимаю, что хацкеры найдут лазейки в любом случае

Источник

Как защитить картинку от копирования с сайта

Всем привет. Совсем недавно один парень обратился ко мне за созданием landing page. У него довольно интересная ниша. Она связана с созданием уникальных, необычных, стильных печатей и штампов. Его идея мне сразу понравилась, он знает, чего хочет, составил, пожалуй, лучшее ТЗ из всех, что мне присылали, и сам создал прототип, на основе которого я и делал лендинг. Когда он будет готов, оставлю ссылку в этой статье. Пусть это будет дополнительный бонус ему, но сейчас не об этом.

Дело в том, что одним из пожеланий, было то, чтобы попробовать сделать защиту от копирования его оттисков (печатей и штампов, представленных на сайте). Я сразу подумал о водяном знаке, но он немного не то имел ввиду.

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

Задавшись данным вопросом, я нашел несколько способов, но о полной защите контента от копирования речь не пойдет. Мы можем лишь усложнить процесс и отсеять рядовых пользователей, которые не знают, что нажатием ctrl+u можно открыть исходный код и скопировать адрес картинки. И тут я задумался. Стоит ли внедрять подобный функционал? Ка думаете? Давайте рассмотрим хотя бы базовые способы защиты от копирования, а в конце статьи я выскажу свое мнение по этому поводу.

Отключения функции выделения текста и изображений

Одним из способов усложнения копирования вашего контента с сайта может стать отключение функции выделения. Наверняка вам попадались подобные сайты и возможно кто-то из вас не понимал в чем дело). Для того, чтобы отключить возможность выделения на вашем landing page, следует тегу body прописать :

Для всеми любимого IE. И в стилях прописать:

-webkit-user-select: none; -moz-user-select: none; user-select: none;

Способ не плохой, но больше подходит для текста, так как простым перетягиванием картинки можно сохранять на рабочий стол или вызвав контекстное меню, нажатием правой кнопки мыши, сохранить нужное изображение. Давайте рассмотрим что-то более серьезное и запретим возможность выделения, отключим контекстное меню и отключим возможность перетягивания.

Повторяем процедуру, описанную выше, только перед закрывающимся тегом body вставьте следующий скрипт:

Теперь контент вашего сайта надежно защищен от домохозяек, копирующих рецепты) Да, да! Именно так. Ведь любой уверенный пользователь может открыть исходный код и скопировать ссылку на картинку. А если у вас и будут воровать контент, то наверняка другие веб мастера и конкуренты, для которых это все не составит труда.

И теперь стоит задуматься снова. Смотрите. Мы же столько говорим о юзабилити лендинг пейдж. И наверняка пользователям удобнее, например, скопировать адрес вашей почты, чем набирать его вручную. и т.д. Я прошу вас взвесить все за и против, а не бездумно сделать описанное в статье. Ведь в первую очередь ваш лендинг рассчитан на обычных людей (клиентов), и удобство использования должно стать на первый план. А тому, кто задался целью скопировать ваш материал и картинки, в любом случае, не составит большого труда сделать это.

Гораздо эффективнее подтверждать авторство другими способами, о которых мы обязательно поговорим в следующих статьях. Поэтому подписывайтесь на обновления, чтобы не пропустить. А на сегодня — все. Всем хорошего дня. Пока!

Похожие публикации

Источник