-Рубрики

 -Цитатник

ПУЛОВЕР РАЗНЫМИ КОСАМИ - (1)

ПУЛОВЕР РАЗНЫМИ КОСАМИ БЕСШОВНЫЙ ПУЛОВЕР РАЗНЫМИ КОСАМИ К новому году связала внучке пуловер...

Шпаргалки HTML - (2)

HTML шпаргалка В ы не знаете кодов HTML? А дневник красиво и, самое главное, правильно офо...

Пасхальные цыплята - (2)

Пасхальные цыплята http://zagorodnayazhizn.ru/?p=696 Симпатичные чехлы на пасхальные яйца...

Салат Новогодняя шишка - (2)

Салат новогодний «Шишки» Салат «Шишки» пригодится любой хозяйке, которая бере...

РУБРИКИ МОЕГО ДНЕВНИКА - (1)

Рубрики моего дневника Новости (6366) Стихи (5566) Картинки (405...

 -Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • ТоррНАДО - торрент-трекер для блоговТоррНАДО - торрент-трекер для блогов
  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Перейти к приложению Кнопки рейтинга «Яндекс.блоги» Кнопки рейтинга «Яндекс.блоги»Добавляет кнопки рейтинга яндекса в профиль. Плюс еще скоро появятся графики изменения рейтинга за месяц

 -Фотоальбом

Посмотреть все фотографии серии Цветы в моём саду.
Цветы в моём саду.
03:00 01.01.1970
Фотографий: 1

 -Всегда под рукой

 -

Быстрый переход по страницам блога хохотушка_старушка:

 -Поиск по дневнику

Поиск сообщений в хохотушка_старушка

 -Подписка по e-mail

 

 -Интересы

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 23.01.2013
Записей:
Комментариев:
Написано: 15063


Как создать кликабельную картинку или кнопку-переход в редакторе

Суббота, 19 Октября 2013 г. 20:31 + в цитатник
Цитата сообщения Nelya_Gerbekova


 

Сегодня  расскажу Вам, как  я делаю  баннер, или любое изображение в сообщениях   кликабельным. Это можно сделать несколькими способами. Первый способ - использование кода


<a href="адрес ссылки" target="_blank"><img src="адрес картинки" /></a> 


Для этого  нужно загрузить картинку  на  любой фотохостинг и и взять ссылку №1,  т.е адрес картинки.  В последнее время я предпочитаю http://fotki.yandex.ru/   но по привычке загрузила на радикал-фото.  Адрес ссылки это страница, которая будет открываться при нажатии на картинку или баннер.  

3726295_20130410_203939 (700x190, 45Kb)

Скопируйте код в блокнот на ПК и внимательно вставьте адреса ссылки и картинки(не перепутайте)  

3726295_20130410_203250 (700x147, 38Kb)

Вставьте  в сообщение в расширенном редакторе при нажатии на ИСТОЧНИК

3726295_20130410_203417 (700x153, 23Kb)

Отправьте сообщение в ПРЕДПРОСМОТР или ЧЕРНОВИК и проверьте результат на кликабельность. Я. например,  провожу все манипуляции с картинкой в ЧЕРНОВИКЕ,а затем каждый  раз беру готовый код картинки из черновика и вставляю в сообщение.

 Второй способ самый легкий.Подготовка кликабельной картинки в Радикал-фото.

 В окошке со ссылкой удаляем ссылку на фотохостинг и прописываем свою ссылку на страницу перехода. Во второй графе щелкаем по  ПЕРЕХОД НА URL ( при этом в ссылках должно произойти изменение т.е замена на вашу ссылку)  В результате получаем готовый код №2 или №6. 

3726295_20130411_215940 (700x394, 90Kb)

Чем отличается ссылка №2 от ссылки №6 . 

Они выполняют одинаковую функцию, но имеют разный вид в редакторе.

3726295_20130419_195703_1_ (627x231, 38Kb)

Для примера  взяла  картинку  и сделала ее ссылкой на собственные фоны klavdia-France , которые мне очень понравились .Кликните по  картинке!

 

Третий способ -это изготовление кликабельной картинки прямо в редакторе.

Вообще, я настоятельно рекомендую  хранить все свои фото  на жестком диске D  своего компьютера и загружать изображения  в  расширенный(визуальный) редактор. Лишь тогда можно быть уверенным, что вместо картинок, через некоторое время вы не увидите  пустой квадрат .Вот например, фото на радикал-фото удаляются через год  и все труды "коту под хвост".Читайте пост  Почему пропадают картинки и фотки?

3726295_20130411_212527 (590x213, 31Kb)

3726295_20130411_205819 (700x119, 23Kb)

Как видно из скринов и как говорят опытные пользователи "на фотохостинг надейся,а сам не плошай!"

Загрузив картинку  из ПК в редактор, с  помощью простых манипуляций можно сделать любую картинку не только кликабельной,  но  и со всплывающим текстом  при наведении на картинку.   Для этого жмем на иконку ИЗОБРАЖЕНИЕ и загружаем картинку из ПК. Когда картинка загрузится переходим на вкладку ССЫЛКА 

3726295_20130410_222342 (505x466, 57Kb)

В выпавшем окне в графе URL вписываем  ссылку на страницу перехода

3726295_20130410_222642 (448x189, 34Kb)

Далее переходим на вкладку РАСШИРЕННЫЙ и в графе ЗАГОЛОВОК  пишем всплывающий текст.

3726295_20130410_223044 (502x299, 42Kb)

Жмем ОК и любуемся результатом . 

3726295_ (352x491, 34Kb)

Добро пожаловать в мой дневник

 Читайте пост:  Как создать кнопку-переход 

Все самые популярные коды здесь:  Коды для оформления блога

P.S. Для желающих работать с кодом, для кликабельной картинки со всплывающим текстом, даю код ,только не забудьте вместо width=100 height=100  вставить размеры картинки, где width-ширина, а height - высота картинки 


<a href="Адрес страницы, на которую будет указывать баннер" target=_blank><img src="Адрес картинки из Интернета или из Радикала (ссылка№1)" border="0" title="Текст, видимый, в качестве подсказки, при наведении на ссылку." width=100 height=100></a>

3726295_0586d8d05e60 (499x3, 0Kb)

 

Серия сообщений " Оформление дневника на ЛИ.РУ":
Часть 1 - Как создать кнопку-переход
Часть 2 - 7 причин по которым не стоит вставлять в комментарии картинки
...
Часть 25 - Добавление к предыдущему посту .Как изменить размер плеера
Часть 26 - Как сжать размер картинки (фона) до требуемой величины для загрузки в дневник.
Часть 27 - Как создать кликабельную картинку или кнопку-переход в редакторе
Часть 28 - Почему пропадают картинки и фотки?
Часть 29 - Урок для новеньких.Украшаем дневник! Как применить и управлять схемами
Часть 30 - Убираем под кат! Как в редакторе ссылку *Читать далее* заменить картинкой
Часть 31 - Как скопировать схему оформления (дизайн) чужого дневника на ЛиРу
Часть 32 - Коды для оформления блога (дневника)
Рубрики:  помощь на Li.ru/уроки, грамота и помощь
Метки:  
Понравилось: 8 пользователям

vit4109   обратиться по имени Воскресенье, 20 Октября 2013 г. 08:41 (ссылка)
Благодарю.
Ответить С цитатой В цитатник
Самуил_Гетерле   обратиться по имени Воскресенье, 20 Октября 2013 г. 18:25 (ссылка)
Спасибо за оба сегодняшних урока!
Ответить С цитатой В цитатник
хохотушка_старушка   обратиться по имени Воскресенье, 20 Октября 2013 г. 18:45 (ссылка)
Пожалуйста, делайте себе кнопку - бродилку. Я сделала, осталось оживить.Самуил_Гетерле,
Ответить С цитатой В цитатник
Nanusij   обратиться по имени Воскресенье, 15 Марта 2015 г. 13:02 (ссылка)
прекрасная шпаргалка! СПАСИБО!!!!!!
Ответить С цитатой В цитатник
Н_НИНА   обратиться по имени Четверг, 03 Декабря 2020 г. 21:21 (ссылка)
хохотушка_старушка, спасибо болдьшое, а то я потеряла такую формулу, с наступающим!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку