Как разрешить копировать картинку с сайта?
У меня есть галерея сделанная по туториалу. И тут нельзя копировать или открывать консоль просмотра кода - картинку. Что нужно удалить?
в HTML прописаны только фотографии и подключены файлы
<div class="gallery"> <div class="gallery__item"><img src="img1/1.jpg" alt="Alt"></div> |
<div class="gallery"> <div class="gallery__item"><img src="img1/1.jpg" alt="Alt"></div>
* { margin: 0; padding: 0; box-sizing: border-box; } :root { --gap: .5em; --index: calc(1vw + 1vh); --color-dark: #000; } body { overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; } } .gallery { width: 30vw; column-width: 2em; gap: var(--gap); transform: scale(8.2); will-change: transform; transition: transform 1s cubic-bezier(.075, 1, .25, 1), opacity 1s; } .gallery__item { margin-bottom: var(--gap); transform: scale(1.001); will-change: transform; transition: .3s; } .gallery__item:hover { transform: scale(1.03); } .gallery__item img { width: 100%; display: block; } .loaded .gallery { opacity: 1; } .loaded .header span { opacity: 0; } /* DARK MODE OS */ @media (prefers-color-scheme: dark) { body { background-color: var(--color-dark); } .header { filter: invert(100%); } } /* MOBILE */ @media (max-width : 992px) { .header { position: relative; } body { overflow: scroll; display: block; padding: var(--gap); } .gallery { width: 100%; column-width: 10em; transform: scale(1); } .gallery__item:hover { transform: scale(1); } } |
* { margin: 0; padding: 0; box-sizing: border-box; } :root { --gap: .5em; --index: calc(1vw + 1vh); --color-dark: #000; } body { overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; } } .gallery { width: 30vw; column-width: 2em; gap: var(--gap); transform: scale(8.2); will-change: transform; transition: transform 1s cubic-bezier(.075, 1, .25, 1), opacity 1s; } .gallery__item { margin-bottom: var(--gap); transform: scale(1.001); will-change: transform; transition: .3s; } .gallery__item:hover { transform: scale(1.03); } .gallery__item img { width: 100%; display: block; } .loaded .gallery { opacity: 1; } .loaded .header span { opacity: 0; } /* DARK MODE OS */ @media (prefers-color-scheme: dark) { body { background-color: var(--color-dark); } .header { filter: invert(100%); } } /* MOBILE */ @media (max-width : 992px) { .header { position: relative; } body { overflow: scroll; display: block; padding: var(--gap); } .gallery { width: 100%; column-width: 10em; transform: scale(1); } .gallery__item:hover { transform: scale(1); } }
JS
window.onload = function() { setTimeout(function() { document.body.classList.add('loaded') if (window.matchMedia('(min-width: 992px)').matches) { // If not mobile Draggable.create('.gallery', { bounds: 'body', inertia: true }) } }, 200) } |
window.onload = function() { setTimeout(function() { document.body.classList.add('loaded') if (window.matchMedia('(min-width: 992px)').matches) { // If not mobile Draggable.create('.gallery', { bounds: 'body', inertia: true }) } }, 200) }
У меня есть еще три файла js. Но там прописал непонятный и слитный код, который скорее всего создался автоматически
Дополнительно:
* { user-select: none; } |
* { user-select: none; }
Вот это =)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разрешить копировать изображение с вашего сайта, вы можете использовать атрибут `alt` в теге `![]()
`, который позволяет добавить текстовое описание к изображению.
Например, если у вас есть следующий код HTML:
<img src="image.jpg" alt="Домашний кот">
При копировании изображения пользователем, браузер будет также копировать текст из атрибута `alt`, что может помочь пользователям понять, что изображение представляет.
Еще одним способом является использование CSS для скрытия изображения, но показывая его при наведении курсора. Например:
.image-container { position: relative; } .image-container img { opacity: 0; transition: opacity 0.3s; } .image-container:hover img { opacity: 1; } <div class="image-container"> <img src="image.jpg" alt="Домашний кот"> </div>.image-container { position: relative; } .image-container img { opacity: 0; transition: opacity 0.3s; } .image-container:hover img { opacity: 1; } <div class="image-container"> <img src="image.jpg" alt="Домашний кот"> </div>
Таким образом, при наведении курсора на изображение, оно будет отображаться, а при копировании текста изображение не будет скопировано.
Надеюсь, это поможет вам разрешить копирование изображений с вашего сайта! Если у вас остались вопросы, не стесняйтесь задавать.