16:01 

Для Izanami.

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
По просьбе рассказываю как сделал эпиграф оформления из этого поста. В нем при нажатии на верх эпиграфа меняется часть картинки, а нижние ссылки как нажимались так и продолжают нажиматься.
Возьмем какой нибудь арт. У меня это Харли Квин.
Для начала нам понадобится собрать макет. Он должен состоять из трех частей. Сверху картинка, под ней переходная часть и внизу ссылки.

Дальше нужно создать еще два слоя: с белым фоном и надписью в нашем случае.

Макет разрезаем по синим линиям и сохраняем в jpg.
В итоге получаем три картинки:
1.

2.

3.

Теперь используем теги MORE.


третьявторая

Первая нажимается и открывает третью. (кликабельно)


Для второй и третьей картинок прописываем карту ссылок. Опишу подробно, мало ли вдруг кто не умеет, а ему интересно. Через XnView смотрим координаты всего что должно нажиматься.
Общий вид:


Вторая картинка:






и ее код:


Третья картинка:



и ее код:
Мне удобнее сначала подписать названия и только потом добавлять ссылки:




Важный момент: там где img usemap нужно задавать новое имя для каждой картинки в посте, иначе ссылки отобразятся некорректно.

Теперь осталось только вставить готовые коды в шаблон MORE.



Итог:






@темы: урок, как это сделано, Кареглазый Демон

Комментарии
2016-06-18 в 17:09 

lady Sea
Когда хотят - ищут средства, в остальных случаях ищут причины
Спасибо за подробные описания и разъяснения!

2016-06-18 в 17:11 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
blondie Genie, пожалуйста)

2016-06-18 в 17:27 

Огненный Бес
Скромник с чертиками в глазах
Интересно. Спасибо.

2016-06-18 в 17:28 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Огненный Бес, узнал что то новое?)

2016-06-18 в 17:42 

Огненный Бес
Скромник с чертиками в глазах
Кареглазый Демон, да не особо. Но было интересно как ты делаешь. Муторно это.
Я кстати не через XnView делаю (Я с ним в одно время не подружился), а через ФШ.

2016-06-18 в 17:49 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Ты умеешь проще?) Мне кажется любой маломальски стоящий результат получается когда стараешься.
А в фотошопе где, через F8?

2016-06-18 в 17:53 

Огненный Бес
Скромник с чертиками в глазах
Не умею, конечно. Я про то, что прописывать ссылки в эпике мое самое не любимое.
Да, через инфо.

2016-06-18 в 17:58 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Для владельцев обычных аккаунтов это неплохое решение как мне кажется.
А там вроде в процентах все...

2016-06-18 в 18:10 

Огненный Бес
Скромник с чертиками в глазах
Я с этим согласен.
Нет, в пикселях.
читать дальше

2016-06-18 в 18:17 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Ммм... спасибо, буду знать.

2016-06-18 в 19:18 

Харука.
Бороться и искать, найти и перепрятать. (с)
Кареглазый Демон, спасибо)))я даже почти всё поняла с первого прочтения)
сделаю обязательно такой интерактивный эпиграф)

2016-06-18 в 19:35 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Izanami., Я рад) Если вдруг что спрашивай)

2016-06-18 в 19:44 

Харука.
Бороться и искать, найти и перепрятать. (с)
2016-08-24 в 10:50 

[Рыжая_Бестия]
Нелегко отрицать, когда в тебе - столько хорошего..! ©
Огненный Бес, добрый день)
у меня возник вопрос. а как тогда выглядит код с координатами,если использовать Инфо?

2016-08-24 в 11:51 

[Рыжая_Бестия]
Нелегко отрицать, когда в тебе - столько хорошего..! ©
Нашла в инете статью,где все подробно рассказано) спасибо за урок! очень понравился
пытаюсь вот сделать себе)

2016-08-24 в 12:37 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Лисёнок Чу, пожалуйста) Поделитесь потом успехами.

2016-08-25 в 23:27 

[Рыжая_Бестия]
Нелегко отрицать, когда в тебе - столько хорошего..! ©
получился вот такой эпик
кнопочки работают)

теперь мне захотелось еще немного усложнить) эти коды такие непонятные,но они затягивают

2016-08-25 в 23:45 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Лисёнок Чу, очень симпатично)

2016-08-25 в 23:50 

[Рыжая_Бестия]
Нелегко отрицать, когда в тебе - столько хорошего..! ©
2016-10-19 в 20:34 

[Рыжая_Бестия]
Нелегко отрицать, когда в тебе - столько хорошего..! ©
Опять я тут) и скажу что это потрясающий урок! у меня правда эпик будущий состоит из двух частей,но все впереди я думаю))
как только будет все готово,обязательно покажу)

2016-10-19 в 20:58 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
[Рыжая_Бестия], приятно слышать)

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Original Designs бесплатники, CSS и уроки по созданию оформлений.

главная