7 января 2016 г.

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

-------------------------
http://blogchitatel.blogspot.ru/2014/12/blog-post_4.html---------------------
     В интернете можно, конечно, без затруднений найти и скопировать HTML код картинки - ссылки (т.е. картинки, которая служит ссылкой на любую веб-страницу). И затем использовать этот HTML код при подготовке своего сообщения.

      HTML код:


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

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

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



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

<a href="http://2.bp.blogspot.com/-u0DJkAJqsrM/Vo4Za2E5tMI/AAAAAAAAh8Y/YIuNZdDQW0c/s1600/img287.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-u0DJkAJqsrM/Vo4Za2E5tMI/AAAAAAAAh8Y/YIuNZdDQW0c/s1600/img287.jpg" /></a>

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

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

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

  <a href="http://2.bp.blogspot.com/-u0DJkAJqsrM/Vo4Za2E5tMI/AAAAAAAAh8Y/YIuNZdDQW0c/s1600/img287.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-u0DJkAJqsrM/Vo4Za2E5tMI/AAAAAAAAh8Y/YIuNZdDQW0c/s1600/img287.jpg" title="ЗДЕСЬ БУДЕТ ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ " /></a>

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

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

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


Комментариев нет:

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...