Как прикрепить фото в css

Как вставить картинку в HTML

Чтобы отобразить какую-нибудь картинку на веб-странице, необходим тег <img> . Данный тег является одиночным и строчным, а также имеет два обязательных атрибута src и alt :

При помощи атрибута src указывается путь к картинке. При помощи атрибута alt указывается альтернативный текст для картинки. Если картинка по каким либо причинам не отобразится на веб-странице, то вместо нее вы увидите альтернативный текст:

Альтернативный текст

Также для изображения рекомендуется указывать ширину и высоту, это позволит браузеру быстрее загружать изображения на веб-страницу. Указывать ширину и высоту можно при помощи каскадных таблиц стилей, либо при помощи атрибутов width (ширина) и height (высота):

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

Как записать путь к изображению

Если изображение и файл, в котором прописан путь к этому изображению, лежат в одной папке:

Путь к изображению

то путь будет состоять из названия изображения и его расширения:

Если картинку перенести в папку img:

Путь к изображению

то путь к ней будет начинаться с названия папки, в которой она находится:

Если файл index.html поместить в папку files:

Путь к изображению

то путь к изображению будет начинаться с конструкции ../ :

Если папку files, содержащую файл index.html положить еще в одну папку, то путь станет таким:

Всплывающая подсказка

В этом уроке познакомимся с еще одним очень полезным атрибутом, который можно применять практически ко всем тегам – это атрибут title , он служит для отображения всплывающей подсказки. Например:

Как создать слайд-шоу с помощью CSS и HTML

В наши дни, слайд-шоу можно встретить практически на любом сайте. Большинство из них используют JavaScript для смены изображений, некоторые используют Flash. Проблемы с просмотром изображений могут возникнуть лишь в том случае, если браузер пользователя не поддерживает ни того ни другого. В сегодняшней статье вы узнаете, как можно создать слайд-шоу c помощью CSS и HTML.

Что мы собираемся делать

Мы создадим простое слайд-шоу, с четырьмя табами справа и основной картинкой слева. При клике по одному из табов, справа появится новое изображение. Посмотреть как это будет выглядеть в конце, можно здесь.

image27

Подготовка изображений

Первое, что нам понадобится это картинки. В этом примере я использовал изображения пейзажей, но это может быть и рекламный контент, в общем, все, что вам нравится. Я сделал основное изображение размером 500х300 , и табы размером 75х125 . Я просто взял размер основного изображения, затем разделил высоту на желаемое количество табов (в моем случае 300/4 = 75 ), так я вычислил высоту табов. Ширина табов взята произвольно, я просто изменил размер основного изображения до высоты равной 75 , и ширина получилась, пропорциональна заданной высоте, в нашем случае 125 .

Теория

В теории все это работает довольно просто. Мы будем использовать тэги a, для перехода от одного изображения к другому. Это очень похоже на ссылку «наверх», которая прокручивает страницу до самого верха, по клику. Единственное различие в том, что картинки будут прокручиваться в контейнере div , вместо прокручивания вверх и вниз по странице.

image28

HTML, сам по себе, очень простой. Что касается табов, это всего лишь маркированный список, с изображениями внутри якорных тэгов. Все просматриваемые изображения, заключены в div (это очень важно, поскольку мы будем прятать все лишние картинки с помощью overflow , и отображать только выделенное изображение). К тому же, каждая картинка также заключена в div и в якорный тэг. Эти div -ы можно использовать как контейнеры, в том случае если вы захотите использовать фоновое изображение вместо обычной картинки, они на самом деле не нужны в этом примере, мы просто оставим их, если вдруг передумаем.

Вот такой должен быть html:

С помощью CSS, мы настроим табы таким образом, что они будут располагаться слева от основного окна и располагаться друг на друге. Мы также установим 40-% прозрачность табов в обычном состоянии, и 100% -прозрачность при наведении мыши. Конечно, наиболее важная часть CSS относится к div -у, содержащему изображения. Мы просто должны убедиться, что свойство overflow установлено в hidden .

Вот такой должен быть CSS:

Соединяем все вместе

Последнее, что нам осталось сделать, это соединить HTML и CSS вместе. Вы, конечно, можете изменить внешний вид слайд-шоу и количество табов. Самое важное, то, что вам нужно запомнить из этого руководства – идею использования якорных тэгов в качестве средства переключения изображений.

Вот так выглядит код, собранный вместе:

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

24 комментариев

Ага, и все картинки грузятся на сайт. А если юзеру не нужна вовсе эта галерея, то мы просто так, &#171;за даром&#187; нагенерим ему трафик

никто не заставляет пользоваться именно этим решением, это просто один из способов.

Можно этот способ сделать с помощью скриптов ИЛИ заточить под визитед. Правда, во втором случае теряем часть навигации (повторной)

ЦСС для активного линка шлет на сервер инфу про след. картинку (сервер запомнит). А клик просто запрашивает карт-ку по статичесскому урлу (сервер уже знает какую). Правда с хидерами надо подшаманить &#8212; чтобы не кешировалось&#8230; да и прокси&#8230; вообще&#8230;. короче или как сказал автор или скрипты. Или фреймы (жесть)

Как сделать картинку ссылкой в HTML, Вконтакте, на форуме и с помощью CSS

Сегодня мы займемся превращением изображений в активные ссылки. Вы знаете, что интернет полностью основан на гиперссылках, позволяющих кликом мыши перемещаться с одних страниц на другие. В этом плане, использование в качестве ссылок картинок имеет преимущество перед обычными текстовыми линками, так как дает возможность красиво и органично вписать всё в дизайн сайта.

Как сделать картинку ссылкой - HTML, Вконтакте, CSS, форумы

Содержание

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

Я расскажу о том, как сделать изображение ссылкой на основе традиционного HTML кода и альтернативной CSS вариации. Также, мы коснемся превращения картинки в ссылку для социальной сети Вконтакте (там все не так просто). И в завершающей части статьи я расскажу о форумах, там нередко используется кодировка отличная от HTML и вставка изображений и ссылок там происходит иначе.

Как сделать картинку ссылкой в HTML

Для формирования ссылок в HTML используется простой механизм. Существует специальный тег <a></a>, обозначающий ссылку. Объекты, находящиеся внутри него являются ссылками. Обязательным атрибутом тега <a> является параметр href, оперделяющий целевую страницу, на которую ссылка будет вести.

Для создания картинки-ссылки, достаточно внутри ссылочного тега поместить любое изображение. Изображения в HTML вставляются с помощью тега <img> с атрибутом src, указывающим путь к изображению.

Результирующий код для вставки изображения-ссылки выглядит вот так:

По тексту понятно, что kuda-vedet-ssylka – это адрес целевой страницы, а gde-lezhit-kartinka/kartinka.png – это путь к файлу изображения и его название.

Для настройки такого изображения можно использовать все стандартные html и css функции, позволяющие менять размеры, местоположение, прописывать всевозможные атрибуты.

Для тега <a> часто применяется атрибут target=&#8221;_blank&#8221;, открывающий ссылку в новой вкладке.

А тег <img> часто содержит alt=&#8221;альтернативный текст, показываемый, если картинка не загрузилась&#8221;, title=&#8221;название изображения&#8221;, height=&#8221;указывается высота в пикселях&#8221;, width=&#8221;указывается ширина в пикселях&#8221;.

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

А вот так он работает:

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

Что касается CSS, то это неотъемлемая часть современного сайта. Таблицы стилей помогают избавиться от лишнего повторения однотипных участков кода, единожды прописывая свойства определенных элементов, а дальше только указывая только их названия.

Для того, чтобы сделать картинку-ссылку на CSS нам нужно пройти 2 шага:

1. Создаем класс объекта и прописываем его в таблице стилей (файл style.css).

Общий код выглядит вот так:

В данном случае link-img – это класс объекта, width и height – размер изображения, background – фон объекта (в качестве фона мы устанавливаем изображение).

2. Вставляем в нужное место сайта html ссылку с атрибутом, указывающим, что она относится к классу link-img. Для этого используется тот же тег <a>, что и в предыдущем варианте. Код выглядит вот так:

id=&#8221;link-img&#8221; показывает, что ссылка не обычная, а принадлежит к данному классу, в результате чего, объект <a> принимает свойства этого класса (высоту, ширину и фон). Обратите внимание, что внутри открывающего и закрывающего тега пусто. Мы не прописывали ничего, так как все необходимое уже содержится в свойствах класса и требуемое изображение задано фоном объекта.

Как картинку сделать ссылкой Вконтакте

В социальных сетях процедура создания ссылок из изображений отличается от обычных сайтов по той причине, что у вас нет доступа к исходному коду и мы не можем использовать html теги, поэтому процедура напоминает танцы с бубном.

Итак, давайте колдовать добавлять ссылки к картинкам (или картинки к ссылкам, кому как нравится) на стену или в сообщения в группах Вконтакте.

Шаг 1. Готовим картинку

В ВК сделать кликабельным можно только крупное изображение, минимальный размер 537 на 240 пикселей, все что меньше будет отображаться рядом со ссылкой, но не будет вести на желаемую страницу.

Поддерживаемые форматы – jpg, gif и png.

Шаг 2. Вставляем ссылку в ВК

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

Шаг 3. Вставляем изображение

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

Для этого выбираем кнопку «Выбрать свою иллюстрацию» (фотоаппарат).

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

После выбора, будет возможность слегка подкорректировать – обрезать лишнее и повернуть. Жмем «Сохранить изменения».

редактирование изображения

После этого формат публикуемой новости изменится. Если вы все сделали верно, то картинка займет всю ширину сообщения и станет ссылкой. Нажимаете «Отправить» и наслаждаетесь результатом.

Как сделать картинку ссылкой на форуме

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

Но, если такой возможности нет, то в дело вступают, BB-коды – это типичная форумная разметка, функционально похожая на HTML (большинство функций аналогичны), но, имеющая иной синтаксис.

Интересно, что все эти BB-коды в конечном итоге переводятся в HTML, так как браузеры их читать не умеют.

Изображение в BB-коде указывается вот так:

bb код картинки

Указывается ссылка на картинку.

А ссылки формируются тегами [url] [/url]. И для создания ссылки-картинки на форуме надо завернуть одну конструкцию в другую, получится так:

bb код ссылки

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

Визуальные редакторы

Используя различные графические конструкторы сайтов и страниц реализовать все, что описано выше, проще и быстрее, достаточно нажать пару кнопок. И в WordPress, и в HTML редакторах, и на форумах принцип действие одинаков, схожи и кнопки.

Для того, чтобы сделать изображение ссылкой в графическом интерфейсе необходимо выполнить 2 действия:

1. Вставить изображение, вот такими кнопками (пример с форумом был выше, тут я показываю WordPress):

Там надо будет либо добавить ссылку на картинку в интернете или загрузить с компьютера (возможность загрузки есть не всегда).

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

На этом все. Желаю удачи. Не забывайте оформить подписку на новые статьи.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *