Простейшее изменение размера изображения
Часто и довольно муторно приходится искать способ вывода изображений с эффектом увеличения оного одним кликом. Сегодня расскажу о простейшем на мой взгляд способе.
Конечно используя эту фишку мы не увидим каких бы то ни было эффектов и слайдово-галерейных штучек, но необходимой цели изменения размера изображения добьемся в легкую.
И так, смотрим на пример, а точнее для увеличения картинки просто смело жмякните на нее один раз, двойной клик, вернёт картинку к исходным размерам:
Дабы полностью убедиться в простоте использования такого эффекта, давайте рассмотрим с помощью чего достигается такой результат:
<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 и поделитесь ссылкой на запись в своих соц-сетях:
Cразу же дoбавил в закладки. Офигенный пост!
Не совсем практично. Первый клик должен увеличивать, второй уменьшать.
Michael de`Oz
О практичности не было и речи, это кому что требуется, показан пример работы скрипта с минимальным исполняющим кодом, сторонники минимализма оценят.
Спасибо! В закладки!