• Авторизация


Как создать кликабельную картинку или кнопку-переход в редакторе. 14-03-2014 11:00 к комментариям - к полной версии - понравилось!

Это цитата сообщения Nelya_Gerbekova Оригинальное сообщение

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

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

Первый способ для картинок, которые загружены на фотохостинг  


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


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

Адрес ссылки это страница, которая будет открываться при нажатии на картинку или баннер.   (Яндекс - фотки - ссылка №3 , Радикал- фото - ссылка №1)

[700x190]

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

[700x147]

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

[700x153]

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

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

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

[700x394]

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

Они выполняют одинаковую функцию, но имеют разный вид в редакторе.  Важно! Код №6 вставляется в при нажатии на кнопку "Источник"

[627x231]

[показать]

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

[показать]

 

[показать]

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

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

[590x213]

[700x119]

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

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

[505x466]

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

[448x189]

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

[502x299]

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

[показать]

 

4. Самый простой способ создания графической ссылки(баннера) в расширенном редакторе

Загрузите картинку в редактор, через кнопку "Изображение"

[237x117]

Выделите картинку мышкой и жмите на кнопку  "Вставить /редактировать ссылку" .  В выпавшем окне в графу URL вставьте ссылку на страницу перехода. Вот и все! Баннер готов!  Как видите, любую даже уже загруженную ранее картинку можно сделать кликабельной. Здесь, как и в предыдущем способе можно перейти на вкладку РАСШИРЕННЫЙ и в графе ЗАГОЛОВОК  написать  всплывающий текст в качестве подсказки. При наведении курсора на картинку появится текст - подсказка

[394x455]

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

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

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


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

 

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Как создать кликабельную картинку или кнопку-переход в редакторе. | Elenlove - Дневник Elenlove | Лента друзей Elenlove / Полная версия Добавить в друзья Страницы: раньше»