Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

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

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

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

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

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

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

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

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

Всего комментариев: 4

  • Danil: 14 мая, 2010 в 04:20

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

    Ответить
  • Michael de`Oz: 14 мая, 2010 в 12:18

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

    Ответить
    • driver: 14 мая, 2010 в 14:50

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

      Ответить
  • Александр: 14 мая, 2010 в 19:13

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

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>