CSS: как реализовать смену нескольких изображений (больше двух)?
Что нужно сделать?
Есть 10 картинок разного цвета и 10 соответствующих названий цветов в виде текста.
Нужно чтобы при наведении на название цвета исходная картинка менялась на изображение с соответствующим цветом.
Т.е. изначально картинка черная, я навожу на текст с надписью "Красный" и она сменяется на красный.
Я пробовал это реализовать с помощью спрайтов и hover'а, но ничего толкового не получилось.
Подскажите, можно ли это реализовать с помощью только CSS? Если да, то как? Если нет, подскажите, пожалуйста, куда копать, чего курить.
А это решение как-то можно доработать, чтобы при наведении на какой-то цвет, изображение оставалось даже после ухода мышки?
Т.е. я навел на зеленый, картинка стала зеленой, я увел мышку и смотрю на зеленый рисунок, навел на красный и теперь во всю могу наслаждаться цветом заката пока не наведу мышку на какой-нибудь другой цвет.
Спасибо, mlnkv. Я, наверное, неправильно поставил задачу. Мне нужен такой эффект как предложил iiil, только с помощью CSS и картинок, а не кодов цвета.
jsfiddle.net/iiil/Wm245/2
Пример естественно не показывает ничего, так как картинки прописаны с относительными путями. Сделайте применительно к своему случаю и если будут вопросы - пишите.
Никак не могу возобновить хотя бы ваш код. Уже все перепробовал. Правда, я с 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)
});
показывается одна из моих картинок (color000000.png), но они не переключаются. Пробовал скопировать работу вашего первого ответа, но отображается только серая картинка.
- скачал библиотеку с оф. сайта
- в дебагере никаких ошибок
@ydela посмотрел внимательно Ваш код, ошибок не нашел.
А Вы инспектором кода пользовались? firebug или стандартными от хрома и мозиллы, что они показывают - ссылки меняются?
Внимательно посмотрите, чтобы картинки были по указанному адресу, в том числе обратите внимание на путь к картинке и регистр названия цветов.
Все должно работать.
Простой
