Давайте сегодня поговорим о том, как правильно поместить изображения на сайте. Рассмотрим несколько способов.

И первый из них – это миниатюра, то есть мы уменьшаем рисунок, но даем ссылку на его большой размер. Этот способ самый простой. Порой, в качестве подсказки добавляется атрибут title (увеличение 1000 Мб), если файл для загрузки немного великоват.

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

Во втором способе картинку в отдельном окне будет открывать более удобно, единственное что, конечно же, размер будет меньше. Лучше всего использовать ссылку javascript.

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

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

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

Давайте рассмотрим эффект прозрачности элемента. Для этого параметры картинки должны быть в диапазоне от 0.0 до 1. Соответственно когда элемент равен нулю, он делается прозрачным, а когда возрастает до единицы, то наоборот.

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