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

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

Возможно ли это?

Ответ 1

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

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

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

Ответ 2

Чистое решение для 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');
}

Demo

Здесь приведена полная рабочая демонстрация на 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');
}

Demo

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

Ссылки

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

Ответ 3

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

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

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

Удача

Ответ 4

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

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

Ответ 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);
}

Ответ 6

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

Ответ 7

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

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

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