Как изменить изображение на клике, используя только CSS?

Question

У меня есть изображение, и когда оно щелкнуло, я хочу показать другое изображение под ним. Я ищу простое решение только для CSS.

Это возможно?

Answer 1

Чистое решение CSS

Аннотация

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

Используйте псевдокласс :checked - присоедините его к псевдоэлементу флажка (поскольку вы не можете реально повлиять на фон самого input) и измените его фон соответствующим образом.

Осуществление

input[type="checkbox"]:before {
    content: url('images/icon.png');
    display: block;
    width: 100px;
    height: 100px;
}
input[type="checkbox"]:checked:before {
    content: url('images/another-icon.png');
}

Демо

Вот полная демонстрация по jsFiddle , чтобы проиллюстрировать подход.

Рефакторинг

Это немного громоздко, и мы могли бы внести некоторые изменения, чтобы убрать ненужные вещи; поскольку мы на самом деле не применяем фоновое изображение, а вместо этого устанавливаем элемент content, мы можем опустить псевдоэлементы и установить его непосредственно в флажок.

По общему признанию, они не служат здесь никакой реальной цели, кроме как маскировать собственный рендеринг флажка. Мы могли бы просто удалить их, но это в лучшем случае привело бы к FOUC, или, если мы не получим изображение, оно просто покажет огромный флажок.

Вводит appearance свойство:

CSS-свойство (-moz-)appearance используется ... для отображения элемента используя собственный стиль платформы, основанный на теме операционной системы.

мы можем переопределить собственный стиль платформы, назначив appearance: none и вообще обойти этот сбой (естественно, нам придется учитывать префиксы поставщиков, а форма без префиксов нигде не поддерживается , в данный момент). Затем селекторы упрощаются, и код становится более надежным.

Осуществление

input[type="checkbox"] {
    content: url('images/black.cat');
    display: block;
    width: 200px;
    height: 200px;
    -webkit-appearance: none;
}
input[type="checkbox"]:checked {
    content: url('images/white.cat');
}

Демо

Опять же, живая демонстрация с измененной версией находится на jsFiddle .

Ссылки

• :checked
• -moz-appearance / -webkit-appearance

Примечание: пока что это работает только с webkit, я пытаюсь исправить его также и для движков gecko. Выложу обновленную версию, как только сделаю.

Answer 2

Вы можете использовать тег <a> с разными стилями:

a:link    { }
a:visited { }
a:hover   { }
a:active  { }

Я бы рекомендовал использовать его вместе со спрайтами CSS: https://css -tricks.com / css-sprites/

Answer 3

Это вводит новую парадигму в HTML / CSS, но использование <input readonly="true"> позволит вам добавить селектор input:focus, чтобы затем изменить background-image

Это, конечно, потребует применения определенного CSSк input, чтобы переопределить настройки браузера по умолчанию, но это показывает, что действия щелчка действительно могут быть запущены без использования Javascript.

Answer 4

некоторые люди предложили "посещенные", но посещенные ссылки остаются в кэше браузеров, поэтому при следующем посещении страницы пользователем у ссылки будет второе изображение. Я не знаю, что это желаемый эффект, который выхочу.В любом случае вы можете смешать JS и CSS:

<style>
.off{
    color:red;
}
.on{
    color:green;
}
</style>
<a href="" class="off" onclick="this.className='on';return false;">Foo</a>

, используя событие onclick, вы можете изменить (или, может быть, переключить?) Имя класса элемента.В этом примере я изменил цвет текста, но вы также можете изменить фоновое изображение.

Удачи

Answer 5

Попробуйте это (но после нажатия, оно необратимо):

HTML:

<a id="test"><img src="normal-image.png"/></a>

CSS:

a#test {
    border: 0;
}
a#test:visited img, a#test:active img {
    background-image: url(clicked-image.png);
}

Answer 6

Вы можете использовать разные состояния ссылки для разных изображений пример

Вы также можете использовать одно и то же изображение ( css sprite ), которое объединяет все разныесостояния, а затем просто поиграйте с отступом и положением, чтобы показать только тот, который вы хотите отобразить.

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

Answer 7

Нет, вам понадобятся сценарии для размещения обработчика click Event на Element, который делает то, что вы хотите.

• https://developer.mozilla.org/en/DOM/Event
• https://developer.mozilla.org/En/Listening_to_events