Главная » » Как сделать кликабельную и не кликабельную картинку

Как сделать кликабельную и не кликабельную картинку

Автор поста: Микола Питеков | 08 мая 2012 г. | 0:47

  Статья без картинки выглядит не очень красиво, но если в нее вставить картинку, статья оживет. Помимо вставки картинки в статью, можно из нее сделать кликабельную картинку. Другими словами вставить ссылку в картинку. На примере выглядит следующим образом: при нажатии на ссылку картинку откроется новая страница или произойдет увеличение изображения в браузере.

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

  Единственное что мне не нравится, со стороны Seo, что ссылка на картинку является внешней, то есть по ней перетекает пузо. Но все недочеты можно легко устранить, поставив для ссылки тег rel=”nofollow”. Тег Noindex не учитываю, так как важнее чтобы по ссылке не переходил робот, но в то же время картинку проиндексировал. Лишняя картинка в поиске поисковиков не помешает.

  Если установка тегов не устраивает вас, можно сделать не кликабельную картинку. Убрав ссылку для перехода, но оставив ссылку заключенную в тег для отображения картинки на блоге.

Работая над своим материалом, посещаю ресурсы в сети - например, учебный портал тут, предлагает платные и бесплатные видеокурсы для веб-разработчиков, дизайнеров и программистов. Также есть большое количество статей для веб-разработчико. Минут 20 в день стараюсь уделять на обучение. Советую.

Как вставить ссылку в картинку?


  Для начала саму картинку нужно загрузить на хостинг изображений, применимо для Blogspot. Для остальных блогов или сайтов, грузите на свой хостинг или на бесплатные, подойдут Picasa или Яндекс фотки.

  Для Blogspot , при создании статьи, просто нажимаете на иконку для вставки изображения в статью. Картинка автоматически загрузится на ваш веб альбом в гугловском Picasa. Для редактирования кликабельности картинки, перейдите в HTML редактор сообщения, найдите ссылку на вашу картинку. Вы увидите что то подобное:

<a href="http:// ссылка картинки или другой страницы"><img src="http:// опять та же ссылка картинки "></a>
  • Первая часть отвечает за открытие картинки в полном размере или за открытие другой страницы при нажатии на картинку.
  • Вторая часть отвечает за отображение картинки в статье, сообщении, посте.
  Обязательно все заключается в тег A. Без заключения первой и второй части, картинка станет не кликабельная. А просто будет отдельно стоять ссылка и рядом картинка.

Как сделать чтобы при нажатии на кликабельную ссылку картинку , страница открывалась в новом окне?


Для открытия ссылки в новом окне, нужно дополнительно вставить атрибут target="_blank".

Атрибут используется для тега A,то есть для первой части кликабельной картинки. Пример:

<a href="http://......... " target="_blank"><img src="http:// ………."></a>

Вместе с ним используется атрибут nofollow. Пример:

<a href="http://......... " target="_blank" rel=”nofollow”><img src="http:// ………."></a> 

  По атрибутам для Img я писал в статье Теги изображения alt и title. Вкратце расскажу об основных, а в частности width, height, border, alt, title.
  • Атрибут width, в переводе ширина. Можно установить ширину картинки.
  • Атрибут height, в простонародии высота. Установка высоты картинки.
  Эти два атрибута влияют на размер изображения. Если атрибуты не выставить, картинка будет отображаться в реальном размере. Лучше перед вставкой картинки в статью, редактировать ее.
  • Атрибут border, отвечает за рамку вокруг картинки, выставив в атрибуте параметр ноль, рамки не будет. Выставив параметр больше нуля, будет отображена рамка, чем больше параметр – тем толщина рамки увеличится.
  • Атрибут alt, здесь прописывается ключи для ПС роботов, описывающие изображение. Информация заключенная в атрибуте alt, поможет при поиске картинок, в сервисах поисковых систем.
  • Атрибут title, даст возможность вывода любой текстовой информации при наведении пользователем мышки на картинку.
Пример ссылки, со всеми атрибутами:

<a href="http://......... " target="_blank" rel=”nofollow”><img src="http:// ………." width="100" height="100" border="0" alt="информация для ПС" title=”фраза для пользователей”></a>

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

0 коммент.:

 
Все права защищены.
Copyright © 2011-
Avitra - Персональный SEO блог
При копировании материалов гиперссылка на БЛОГ обязательна.
All Rights Reserved
Вверх