Увеличение картинки

HTML код картинки, которая открывается в новом окне в увеличенном размере:

<a href="адрес большой картинки (или, другими словами, адрес страницы, на которую указывает картинка-ссылка (т.е. маленькая картинка)"><img src=" адрес маленькой картинки"title="текст (описание картинки)"></a>

или (короче):


<a href="адрес большой картинки (прямая ссылка)"><img src="адрес маленькой картинки (прямая ссылка)"title="текст (описание картинки)"></a>

Загружаю через файловый менеджер одну и ту же картинку в разных размерах. Копирую прямые ссылки (адрес) на эти картинки и вставляю в код.

Вот результат:

Еще, как видно из кода, эта картинка может служить ссылкой на другую картинку.

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

Результат: при открытии этой картинки видим другую.

 

Всплывающая картинка

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

<img src="прямая ссылка на маленькую картинку" border="0"onmouseover="this.src='прямая ссылка на большую картинку';"onMouseOut="this.src='прямая ссылка на маленькую картинку';"/>

 

Прямые ссылки копирую через файловый менеджер, предварительно загрузив картинку разных размеров. Вставляю в вышеуказанный код.

 

Галерея изображений

ТЕКСТ

HTML код галереи (4 ряда х 4 графы):

 

Один ряд галереи, который можно удалить или добавить:

 <tr>
  <td><center><a href="АДРЕС (прямая ссылка) КАРТИНКИ, КОТОРАЯ ОТКРЫВАЕТСЯ при щелчке на картинку, размещенную в галерее" target=_blank><img src="АДРЕС КАРТИНКИ-ссылки, размещенной в галерее" border="0" title="ОПИСАНИЕ" width=160 height=145></a></center> </td>
  <td><center><a href="АДРЕС (прямая ссылка) КАРТИНКИ, КОТОРАЯ ОТКРЫВАЕТСЯ при щелчке на картинку, размещенную в галерее" target=_blank><img src="АДРЕС КАРТИНКИ-ссылки, размещенной в галерее" border="0" title="ОПИСАНИЕ" width=160 height=145></a></center> </td>
  <td><center><a href="АДРЕС (прямая ссылка) КАРТИНКИ, КОТОРАЯ ОТКРЫВАЕТСЯ при щелчке на картинку, размещенную в галерее" target=_blank><img src="АДРЕС КАРТИНКИ-ссылки, размещенной в галерее" border="0" title="ОПИСАНИЕ" width=160 height=145></a></center> </td>
  <td><center><a href="АДРЕС (прямая ссылка) КАРТИНКИ, КОТОРАЯ ОТКРЫВАЕТСЯ при щелчке на картинку, размещенную в галерее" target=_blank><img src="АДРЕС КАРТИНКИ-ссылки, размещенной в галерее" border="0" title="ОПИСАНИЕ" width=160 height=145></a></center> </td>
 </tr>

Все значения можно изменять. Первый адрес, который указан в HTML коде, адрес фона. Можно изменить. Редактировать код можно следуя вкусу и поставленной задаче (адреса, размеры, количество колонок и рядов).



 

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

 

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

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

 

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


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

 

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

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

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

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

<img alt="" src="/illustrazii/gif/bloggif_568e31dce9860.gif" style="width: 181px; height: 130px;" />

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

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

 

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

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

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

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

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

 

Картинка - ссылка

HTML код картинки-ссылки:

<center><a href="АДРЕС, КУДА ВЕДЕТ КАРТИНКА-ССЫЛКА"><img src="АДРЕС (прямая ссылка) САМОЙ КАРТИНКИ-ССЫЛКИ"title="ОПИСАНИЕ"></a></center>

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

 

Как заменить фон сайта

В панели управления:

управление дизайном > таблица стилей (CSS) >строка 14 - заменить код цвета или ссылку на фоновую картинку.

Ссылка на фоновую картинку:

или код цвета:

 

- 1 - 2 -

 

 

 
%