Продолжу рассказывать о своём опыте создания страниц на HTML. По предыдущим записям многие, наверное, догадались, что я использую для своих экспериментов уже готовый сайт. То есть, работу с нуля я не выполняю, а просто дорабатываю и довожу, так сказать, до ума некоторые страницы. Итак, сегодня займусь тем, что очень давно хотелось сделать - поставить на палитру цветов ссылки на картинки.
Картинок будет много, весь спектр цветов у меня есть, осталось только обозначить для себя, в каком направлении мне идти. Существует два способа добавления увеличенной копии картинки. Можно создать элемент, который будет отображаться поверх основного окна. Это очень хорошо реализовано на примере такого сайта, как DNS (компьютерный магазин). Кроме того, у них есть карусель, куда можно разместить несколько фотографий, но нам этого не нужно. Нам нужна одна картинка.
Второй способ заключается в том, чтобы картинка открывалась в новом окне. Но! Нам этот способ не подходит в принципе, потому что зачем плодить кучу вкладок, когда можно просто открывать и закрывать какой-нибудь конкретный цвет в том же окне, где и вся палитра? Здесь нужно думать так же, как и посетитель сайта: понравится ли ему каждый раз закрывать кучу вкладок? Думаю, что нет. Поэтому мы оставим первый вариант с открытием изображения в окне поверх основной страницы.
Перво-наперво, создаём изображения и выгружаем их на сервер. Крайне желательно, чтобы все картинки были в одном месте. Для этого создаём папку (например, "colors") в каком-нибудь конкретном разделе. У меня это один из подразделов основного каталога:
Создаём изображения в Photoshop на основании тех кодировок, которые у нас уже есть (проще вставлять HEX-кодировки, так быстрее). Размер самих изображений каждый определяет самостоятельно, мне, к примеру, нравится прямоугольник размером 20 х 8 см. Он достаточно большого размера - то, что нужно. На нём, кстати, можно прописать полезную информацию, например, что это за цвет. Но это так, по желанию. Можно вообще ничего не указывать. Моё личное мнение - всякие записи внутри картинки улучшают информативность изображения (если не перегибать палку).
Необходимые нам изображения лучше сначала сохранять на компьютере в папку, из которой, собственно, будет производиться выгрузка файлов на сервер.
После того, как все файлы (или их часть) была создана, можно смело выгружать на сервер. Что я и делаю:
А теперь прописываем ссылки на картинки. Для начала нам нужно вписать этот код на первый цвет: <a href="../../catalog/имя раздела/colors/файл в формате.jpg">. Затем проверить, работает ли ссылка на цвете, а после этого продублировать код на оставшиеся цвета с изменением имени файла:
Я добавил ссылки на первые 50 оттенков палитры и теперь это всё выглядит примерно так:
При клике на любой оттенок теперь можно посмотреть увеличенную копию этого оттенка (в том же окне, что и страница с палитрой). Это немного неудобно и требует доработки:
Осталось дело за малым - научить ссылку открываться поверх окна с палитрой и закрываться после клика на любом месте... но это уже в следующий раз, я полагаю.
Продолжение следует...
