Товарищи, подскажите пожалуйста, можно ли без яваскрипта с помощью css сделать выделение одной из нескольких картинок при клике на неё?
- Вопрос задан более трёх лет назад
- 795 просмотров
Комментировать
Решения вопроса 1
Если не хочешь быть первым — не вставай в очередь!
Можно без JS обернуть одну или несколько картинок в ссылку и воспользоваться :active, тогда, по клику они будут как-то выделяться (как вы их сами выделите), или извратиться с CheckBox’ами или [тут ещё какие-то извращения].
То есть в целом — да. Подойдёт ли это конкретно Вам — уже другой вопрос.
UPD. Глядя на Вашу подпись, решил, что без примера не обойтись. Как видите — можно (это же и ответ на Ваш вопрос — как?). Нужно ли, устроит/подходит — решать Вам.
Ответ написан более трёх лет назад
Нравится 1 6 комментариев
Спасибо за небезразличие, мне примерно так и нужно, только не чекбоксы, а радиокнопки (чтобы при выделении одного изображения, с другого снималось.) у меня немного иная проблема (я её подробнее расписал тут https://toster.ru/q/388302), но, так как она осталась без ответа, а сделать нужно срочно, я подумал, может можно сделать как-то без радиокнопок.
Как отметить человека на фотографии в ВКонтакте
Ambal89: мне кажется, если заменить чекбосы на радио-кнопки — эффект будет точно таким же.
Евгений Вольф: Спасибо! Здесь все работает. Поскажите пожалуйста, почему не работает в этом коде? (вроде бы почти все тоже самое) codepen.io/anon/pen/qRaerL
Ambal89: порядок радио-баттонов и картинок — не правильный, CSS-селекторы (пока-что) так не работают, нет селектора «предыдущий элемент».
Источник: qna.habr.com
Как сделать эффект выделения картинки при наведении на сайте?
В современном мире, для большей привлекательности внимания к сайту, зачастую используют некоторые элементы специально направленные на привлечение внимания пользователя.
Если ваш сайт направлен на продажу какого-либо определенного контента это может стать одной из его главных фишек.
Так например можно подсвечивать не только клавиши, в основном влияющие на заработок, но и целые картинки, отображающие главный продукт для продажи.
Выделение элемента на сайте путём выцветания изображение
Так на одном из наших сайтов реализовано выделение некоторых изображений. При наведении на продукт, обложка книги из черно-белых тонов принимает первичное — цветовое решение. Именно такой ход может сыграть основную роль, при выборе того или иного продукта.
Как сделать эффект выделения изображения?
Перейдём к созданию подобного эффекта, что описан выше. Для этого нам понадобиться две картинки, одна из которых будет черно-белого оттенка, а другая цветная.
Создаём первичную структуру кода, использующуюся абсолютно на всех сайтах:
Как отметить человека на фото в вк
После чего, в папочке где у вас находится сама страница, создаём папку с изображениями.
Папка с картинка
И следующим шагом создаём контейнер, с лежащей картинкой внутри, а также настраиваем стили, указывая картинки в соответствующих атрибутах.
Стили:
.imgBG < height: 315px; width: 220px; background-image: URL(‘img/ic-book(1)-RGB.jpg’); background-size: 100% 100%; background-repeat: no-repeat; >.booksImage
Разберёмся, что здесь происходит: height — высота картинки, width — ширина картинки, background-image — устанавливает изображение в качестве заднего фона, background-size — задаёт размеры изображения, установленного в качестве заднего фона и собственно background-repeat — отвечает за повторения картинки.
Результат программирования
Всё что осталось написать JavaScript, который и будет отвечать за смену изображений. Переходим к коду:
var objectBooksImage = document.getElementsByClassName(«booksImage»); // ищем элементы по классу var opacityBookImage_1 = 1; // прозрачность картинки var onChangeBooksImageOpacityEnter_1; // функция плавного начала смены прозрачности var onChangeBooksImageOpacityExit_1; // функция плавного конца смены прозрачности function OnChangeBooksImageEnter_1() < // функция наведения на картинку clearTimeout(onChangeBooksImageOpacityExit_1); // останавливаем функцию плавного конца смены прозрачности onChangeBooksImageOpacityEnter_1 = setTimeout(OnChangeBooksImageOpacityEnter_1, 50); // запускаем функцию начала смены прозрачности >function OnChangeBooksImageOpacityEnter_1() < // функция начала смены прозрачности if(opacityBookImage_1 >0.1) < // если прозрачность больше 0.1 opacityBookImage_1 -= 0.1; // уменьшаем прозрачность objectBooksImage[0].style.opacity = opacityBookImage_1; // меняяем прозрачность элемента onChangeBooksImageOpacityEnter_1 = setTimeout(OnChangeBooksImageOpacityEnter_1, 50); // запускаем смены прозрачности >> function OnChangeBooksImageOpacityExit_1() < // функция конца смены прозрачности if(opacityBookImage_1 < 1) < // если прозрачность меньше 1 opacityBookImage_1 += 0.1; // увеличиваем прозрачность objectBooksImage[0].style.opacity = opacityBookImage_1; // изменяем прозрачность элемента onChangeBooksImageOpacityExit_1 = setTimeout(OnChangeBooksImageOpacityExit_1, 50); // запускаем смены прозрачности >> function OnChangeBooksExit_1() < // функция сведения курсора с картинки clearTimeout(onChangeBooksImageOpacityEnter_1); // останавливаем функцию плавного начала смены прозрачности onChangeBooksImageOpacityExit_1 = setTimeout(OnChangeBooksImageOpacityExit_1, 50); // запускаем функция конца смены прозрачности >
Не забудьте прописать у элемента две функции, отвечающие за начало и конец смены прозрачности.
Теперь при наведении на изображение, оно способно менять цвет.
Результат работы JavaScript
.imgBG < margin-left: 150px; height: 315px; width: 220px; background-image: URL(‘img/ic-book(1)-RGB.jpg’); background-size: 100% 100%; background-repeat: no-repeat; >.booksImage var objectBooksImage = document.getElementsByClassName(«booksImage»); // ищем элементы по классу var opacityBookImage_1 = 1; // прозрачность картинки var onChangeBooksImageOpacityEnter_1; // функция плавного начала смены прозрачности var onChangeBooksImageOpacityExit_1; // функция плавного конца смены прозрачности function OnChangeBooksImageEnter_1() < // функция наведения на картинку clearTimeout(onChangeBooksImageOpacityExit_1); // останавливаем функцию плавного конца смены прозрачности onChangeBooksImageOpacityEnter_1 = setTimeout(OnChangeBooksImageOpacityEnter_1, 50); // запускаем функцию начала смены прозрачности >function OnChangeBooksImageOpacityEnter_1() < // функция начала смены прозрачности if(opacityBookImage_1 >0.1) < // если прозрачность больше 0.1 opacityBookImage_1 -= 0.1; // уменьшаем прозрачность objectBooksImage[0].style.opacity = opacityBookImage_1; // меняяем прозрачность элемента onChangeBooksImageOpacityEnter_1 = setTimeout(OnChangeBooksImageOpacityEnter_1, 50); // запускаем смены прозрачности >> function OnChangeBooksImageOpacityExit_1() < // функция конца смены прозрачности if(opacityBookImage_1 < 1) < // если прозрачность меньше 1 opacityBookImage_1 += 0.1; // увеличиваем прозрачность objectBooksImage[0].style.opacity = opacityBookImage_1; // изменяем прозрачность элемента onChangeBooksImageOpacityExit_1 = setTimeout(OnChangeBooksImageOpacityExit_1, 50); // запускаем смены прозрачности >> function OnChangeBooksExit_1() < // функция сведения курсора с картинки clearTimeout(onChangeBooksImageOpacityEnter_1); // останавливаем функцию плавного начала смены прозрачности onChangeBooksImageOpacityExit_1 = setTimeout(OnChangeBooksImageOpacityExit_1, 50); // запускаем функция конца смены прозрачности >
Источник: you-hands.ru
Как выделить с помощью самого светлого канала?
Как получается, что при использовании каналов для создания выделенной области мне всегда приходится делать объекты черными, а фон — белым ? Можно ли поступить наоборот?
Ответ:
Можно сделать объект белым, а фон черным, если вам так больше нравится. В этой статье я как раз разбирал этот вариант. Неважно, какого цвета область, которую вы хотите выделить: черная или белая; все, что имеет значение — это то, что окружают «марширующие муравьи», когда вы загружаете канал как выделенную область.
Например, если вы пытаетесь выделить светлый объект, который находится на темном фоне, будет намного проще сделать объект белым, а фон — черным. В этом случае ищите самый светлый канал (которым в режиме RGB, как правило, будет красный). Как только вы найдете этот канал, дублируйте его, а затем используйте диалоговое окно Уровни (Levels), чтобы сделать его полностью черно-белым. Вам даже не придется инвертировать выделенную область, вы увидите «марширующих муравьев» вокруг объекта, как только загрузите канал.
Источник: psand.ru