CSS: как реализовать смену нескольких изображений (больше двух)?

Question

ydela @ydela

CSS: как реализовать смену нескольких изображений (больше двух)?

Что нужно сделать?

Есть 10 картинок разного цвета и 10 соответствующих названий цветов в виде текста.
Нужно чтобы при наведении на название цвета исходная картинка менялась на изображение с соответствующим цветом.
Т.е. изначально картинка черная, я навожу на текст с надписью "Красный" и она сменяется на красный.

Я пробовал это реализовать с помощью спрайтов и hover'а, но ничего толкового не получилось.

Подскажите, можно ли это реализовать с помощью только CSS? Если да, то как? Если нет, подскажите, пожалуйста, куда копать, чего курить.

Вопрос задан более трёх лет назад
3526 просмотров

Комментировать

Подписаться 3 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 4

2 комментария

3 комментария

1 комментарий

2 комментария

ydela @ydela Автор вопроса

Никак не могу возобновить хотя бы ваш код. Уже все перепробовал. Правда, я с jQuery до этого не стыкался, может упускаю что-то простое и важное из виду.

myscript.js (точнее, чуть измененный ваш), сменил название папки с картинками:

$('a.link-color').each(function(){
    $(this).css('color','#' + $(this).attr('data-color'));
});
var src = 'images/';//папка с картинками
var prefix = 'color';//префикс в названии картинки, например: color000000.png
var ext = 'png';//расширение файлов картинок 
$('.link-box > .link-color').hover(function(){
    $('.img-color-box').find('img').attr('src',src + prefix + $(this).attr('data-color') + '.' + ext)
});

мой html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="jQuery2.0.2.js"></script>
        <script type="text/javascript" src="myscript.js"></script> 
    </head>
<body>
    <div class='link-box'>
    <a class='link-color' data-color='009900' href='#'>зеленый</a>
    <a class='link-color' data-color='ССOO66' href='#'>фиолетовый</a>
    <a class='link-color' data-color='333399' href='#'>голубой</a>
    <a class='link-color' data-color='ff0000' href='#'>красный</a>
</div>
<p></p>
<div class='img-color-box'>
    <img src="images/color000000.png">
</div>
</body>
</html>

показывается одна из моих картинок (color000000.png), но они не переключаются. Пробовал скопировать работу вашего первого ответа, но отображается только серая картинка.

- скачал библиотеку с оф. сайта
- в дебагере никаких ошибок

не подскажите где я оплошал?

Написано более трёх лет назад

Юрий Лобанов @iiil

@ydela посмотрел внимательно Ваш код, ошибок не нашел.
А Вы инспектором кода пользовались? firebug или стандартными от хрома и мозиллы, что они показывают - ссылки меняются?
Внимательно посмотрите, чтобы картинки были по указанному адресу, в том числе обратите внимание на путь к картинке и регистр названия цветов.
Все должно работать.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 40 минут назад
- 17 просмотров
1

ответ
HTML

+1 ещё

Простой
Как Выделить слово приходящая из базы определенным цветом?
- 1 подписчик
- час назад
- 53 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- час назад
- 41 просмотр
1

ответ
JavaScript

+1 ещё

Средний
При создании PWA ошибка Cannot read properties of null (reading 'prompt'), в чем проблема?
- 1 подписчик
- 4 часа назад
- 30 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 4 часа назад
- 88 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 15 часов назад
- 39 просмотров
0

ответов
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 20 часов назад
- 47 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 21 час назад
- 53 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 21 час назад
- 131 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 23 часа назад
- 53 просмотра
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Нарисовать рекламный креатив для ios приложения

25 апр. 2024, в 12:26

10000 руб./за проект

Верстка

25 апр. 2024, в 12:23

2500 руб./за проект

ASO дизайн для ios приложения (Иконка+Скриншоты)

25 апр. 2024, в 12:21

10000 руб./за проект

Answer 1 · 2014-02-15 07:06:50

hover.html:

<!doctype html>
<html>
<head>
    <title>CSS Hover</title>
    <link rel="stylesheet" href="hover.css">
</head>
<body>
    <div class="container">
        <span class="color-black">Black</span>
        <span class="color-red">Red</span>
        <span class="color-green">Green</span>
        <div class="image"></div>
    </div>
</body>
</html>

hover.css:

div.image {
    width: 100px;
    height: 75px;
}

span.color-black:hover ~ div.image {
    background-image: url(black.png);
}

span.color-red:hover ~ div.image {
    background-image: url(red.png);
}

span.color-green:hover ~ div.image {
    background-image: url(green.png);
}

Answer 2 · 2014-02-15 10:27:35

jsfiddle.net/iiil/Wm245
Все же хотел бы предложить вариант с jquery, пример достаточно гибкий, а на сегодняшний день многие проекты используют jquery.

Answer 3 · 2014-02-15 12:13:36

Сергей Мельников @mlnkv

JavaScript Developer

jsfiddle.net/e2huT

Ответ написан более трёх лет назад

1 комментарий

Answer 4 · 2014-02-15 18:39:25

jsfiddle.net/iiil/Wm245/2
Пример естественно не показывает ничего, так как картинки прописаны с относительными путями. Сделайте применительно к своему случаю и если будут вопросы - пишите.

CSS: как реализовать смену нескольких изображений (больше двух)?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт