Как просто и быстро получить из картинки ссылку со всплывающей подсказкой

Четверг, 07 Января 2016 г. 13:18 + в цитатник

ПОДСКАЗКА ДЛЯ НОВИЧКА

-----------------------------------
------------------------------

В интернете можно, конечно, без затруднений найти и скопировать HTML код картинки - ссылки (т.е. картинки, которая служит ссылкой на любую веб-страницу). И затем использовать этот HTML код при подготовке своего поста.

HTML код картинки-ссылки со всплывающей подсказкой:

<a href="адрес, куда ведет ссылка"><img src="адрес самой картинки, т.е. прямая ссылка на нее" title="всплывающий текст"></a>

   Но можно поступить значительно проще и быстрее:

   1. В обычном порядке в текстовом редакторе, в котором готовим пост, вставляем картинку (см. выше), которая послужит ссылкой. Кнопка выделена на картинке ниже красным цветом.

5158259_20160107_144538_Redaktirovanie_soobsheniya__Mozilla_Firefox (700x70, 30Kb)

   2. Затем переходим в HTML редактор (под кнопкой "источник" - выделено синим цветом). Предварительно в текстовом редакторе отметим местонахождение картинки, например, линиями, как показано на картинке вверху, для того, чтобы удобно было увидеть в HTML редакторе КОД нашей картинки (линии удалим, когда все будет готово). Увидим этот КОД между линиями.

Он выглядит так:

<img alt="" src="/images/tmp/5158259_bloggif_568e31dce9860.gif" style="width: 181px; height: 130px;" />

Красным шрифтом на желтом фоне выделен адрес картинки.

   3. Теперь нам нужно дополнить этот код картинки всплывающей подсказкой (т.е. каким-то текстом). Для этого в код картинки сразу после адреса картинки ( выделено красным шрифтом на желтом фоне) через пробел вставим следующую фразу (со своим текстом):

title="ЗДЕСЬ БУДЕТ ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ "

Код теперь будет выглядеть так:

<img alt="" src="/images/tmp/5158259_bloggif_568e31dce9860.gif" title="ЗДЕСЬ БУДЕТ ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ " style="width: 181px; height: 130px;" />

4. Опять переходим в текстовый редактор. Выделим картинку щелчком мыши. Затем кликнем на кнопке "ссылка" в меню редактора (выделено зеленым цветом на картинке выше) и в открывшемся окне укажем веб-адрес, на какой должна указывать эта ссылка (наша картинка-ссылка).

Картинка-ссылка со всплывающей подсказкой готова.

5. Таким же способом, но исключая пункты 2 и 3, очень быстро и просто можно любую картинку наделить функцией ссылки.

    На практике это все проделывается очень быстро. Вставили картинку, дополнили ее код текстом (или НЕ дополнили), выделили картинку, записали адрес ссылки. И готово!