Главная » Javascript » Простейшее изменение размера изображения

Простейшее изменение размера изображения

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

И так, смотрим на пример, а точнее для увеличения картинки просто смело жмякните на нее один раз, двойной клик, вернёт картинку к исходным размерам:

Простейшее изменение размера изображения

Дабы полностью убедиться в простоте использования такого эффекта, давайте рассмотрим с помощью чего достигается такой результат:

<img title="" name="myImage" onclick="javascript:myImage.height=240;myImage.width=320" ondblclick="javascript:myImage.width=160;myImage.height=120" src="http://dbmast.ru/wp-content/uploads/2010/04/feb476f8fc92.jpg" alt="" width="160" height="120" />

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

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

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

4 комментария
  1. Danil:

    Cразу же дoбавил в закладки. Офигенный пост!

    Ответить
  2. Не совсем практично. Первый клик должен увеличивать, второй уменьшать.

    Ответить
    • driver:

      Michael de`Oz

      О практичности не было и речи, это кому что требуется, показан пример работы скрипта с минимальным исполняющим кодом, сторонники минимализма оценят.

      Ответить
  3. Александр:

    Спасибо! В закладки!

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru