"Оживляем" картинки-кнопки, или кое-что о ссылках.

Идея этой заметки появилась после того как одна из моих сокурсниц по тренингу у Юлии Волкодав обратилась ко мне за помощью по поводу работы кнопки-ссылки на покупку или заказ товара.

 Нюансов тут много, но остановимся на базовых понятиях.

Как водится, начнем из далека...

 Word 2007  

Иногда надо подготовить документ в Word  (образец и проч.), может даже макет продающего текста или подписной страницы. Это, кстати, очень удобно.

.............................................................................

.............................................................................

.............................................................................

После некоторого текста должна быть графическая ссылка. Она может быть любого вида (в виде кнопки, в виде изображения обложки товара, в виде анимированного рисунка и т.д.). 

Как видно, само по себе изображение этой кнопки заказа или подписки – мертво. Сколь по нему не кликай, а пользы не будет. J

Поэтому надо присвоить этой картинке гиперссылку.

Я работаю в Word  2007,  здесь это делается с помощью раздела меню «Вставка» - гиперссылка.

Или просто нажатием правой кнопкой мыши по рисунку и выбор в выпадающем меню раздела «гиперссылка»:

Как не крути, а смысл одинаков.

 Кстати – тоже самое можно проделать с любым текстовым фрагментом.

Итак, выбираем гиперссылку одним из способов...

В адресную строку вписываем необходимый нам адрес в формате: http://www.moysayt.ru

И нажимаем ок. Теперь у нас не просто картинка, а активная картинка-кнопка.

Если нажмете на рисунок, то перейдете на главную страницу блога - куда ведет эта ссылка - кнопка.

Едем дальше.

Основы, приведенные выше, работают во всех основных случаях.

Мой блог на блоггере. Поэтому, когда мне необходимо вставить рисунок (кнопку) – ссылку, я, с помощью встроенного визуального редактора HTML, вставляю рисунок и нажимаю на пиктограмму гиперссылки.

В открывающее меню вставляем необходимую нам ссылку:

Практически все визуальные редакторы HTML кода действуют по этому принципу. Только пиктограммы отличаются. Обычно они выглядят в виде звена цепи.

Это то, что касается оформления с помощью визуального редактора.

А если доступа к нему нет? Что делать? Ответ один – лезть в дебри HTML.

Полезем…

В HTML код на вывод картинку выглядит так:

<img src="http://www.mysayt.ru/images/myfoto.jpg" width="200" />

Этот код просто выводит картинку, без всякого интерактива. Где {http://www.mysayt.ru/images/myfoto.jpg} – это адрес размещаемой картинки.

А вот этот код выводит картинку-ссылку:

<a href="www.yandex.ru"><img src=" http://www.mysayt.ru/images/myfoto "></a>

Где {www.yandex.ru} это адрес страницы, на которую перейдет кликнувший по картинке.

Это работает в любом случае, особенно, когда нет визуального редактора.

Есть некоторые аспекты.

В некоторых случаях необходимо чтобы кнопка менялась при наведении на нее курсора. Это делается с помощью CSS – таблицы стилей. Дело это более сложное и без курса знаний по HTL и CSS здесь не обойтись. Поэтому пока остановимся на простых методах.

Надеюсь, мои советы Вам помогли.

Кстати, Юлия Волкодав -  отличный учитель, дающий только проверенные и работающие знания. У нее действительно есть чему поучиться. Познакомиться с её сайтом и уроками можно здесь.

Если у Вас есть свои советы и рекомендации, то пожалуйста в комментарии.

Если заметка Вам понравилась, то кликните на иконки, расположенные чуть ниже, и поделитесь с друзьями в соц. сетях!