как сделать так чтобы при нажатии на картинку она увеличивалась в html
Как сделать так чтобы при нажатии на картинку она увеличивалась в html
★ Чистый HTML
★ Чистый CSS
★ Чистый JavaScript
★ Пошаговое увеличение размера
★ Увеличение картинки с надписью
Представлены способы перехода от малого размера картинки к большому. Из этих способов можно выбрать как увеличение изображения по наведению курсора, так и по клику (щелчку курсора).
Кодировка без использования стиля (чистый HTML)
Способ 3 При 1-ом щелчке увеличение и появление лупы. При 2-ом щелчке еще увеличение (до размера оригинала). При дальнейших щелчках пересменка увеличенных изображений. Для возврата к исходному размеру нужно щелкнуть вне поля рисунка. Усовершенствованный аналог Способа 1, но устраняет трудности, которые могут возникнуть с возвращением к исходному окну. Благодаря target=»_blank» увеличенный рисунок открывается в новом окне. Последний параметр довольно важен, поскольку зачастую из-за неопытности пользователя может возникнуть следующая ситуация: открыв страницу с картинкой, он не знает как вернутся назад и поэтому просто закрывает вкладку, а значит полностью покидает сайт. Чтобы остаться на сайте, нужно сделать переход по стрелке ‘назад’ или закрыть окно. <a target=»_blank» href=»31.jpg»> <img width=»100″ height=»70″ src=»http://data5r.narod.ru/31.jpg»></a> 
Увеличение за счет чистого стиля
Увеличение за счет чистого JavaScript
Способ 7 Можно произвести увеличение размера, используя только JavaScript.
Увеличение изображения на сайте – очень простой способ
Конечно, способов увеличения изображений существует достаточно много. И в основном используются применения скриптов и плагинов. По-моему мнению такие методы оправданы в случае ресурсов с огромным количеством фотографий или каких-либо картинок. Мой блог не такой. И, как обычно, я иду по пути наименьшего затрат времени, знаний и ресурсов своего сайта.
Предлагаю вам способ увеличения картинки на сайте без использования каких-либо скриптов, а исключительно с помощью html.
Такой способ увеличения изображения на сайте позволит читателю быстро посмотреть картинку, ведь вашему сайту не надо будет дополнительно делать загрузку скриптов.
Увеличение изображения на сайте
1 способ – увеличение изображения на сайте при наведении курсора
Очень простой, ну наипростейший способ, честное слово. Надо добавить следующий код к свойствам картинки:
Полностью это будет выглядеть так
Вот результат и код для картинки с киской.
При наведении курсора мыши картинка увеличивается.
Надеюсь, вы понимаете, что все это делается в текстовом редакторе.
2 способ – увеличение картинки на сайте при клике мыши
Способ аналогичный, просто onmouseover надо заменить onclick. К свойствам картинки добавляется следующий код:
Полностью это будет выглядеть так
Вот результат и код для картинки с киской.
При клике мыши картинка увеличивается до размеров оригинального изображения или заданных вами. Для уменьшения размеров, то есть вернуть картинку в исходный размер, просто кликните в любое место страницы.
Надеюсь вам не показалось сложным использовать такие способы – с помощью html – сделать увеличение изображения на сайте.
Вообще, я считаю, многое веб-мастера не ограничиваются просто использованием какого-либо движка и применяют html-коды на своих сайтах.
Читайте также:
Возможно Вас также заинтересует:
19 комментариев
Я тоже думаю, что с помощью html лучше увеличивать картинки, чем устанавливать различные плагины, тормозящие сайт
Первый способ хороший, но есть один момент, который рвёт шаблон — при наведении мыша картинка увеличивается сразу. Благо, в CSS3 есть замечательное свойство transition, с помощью которого можно «эротизировать» картинку. Для этого можно чуть дополнить событие, хотя бы так:
onmouseover=”this.style.width=’1000px’;this.style.transition=’all 1s’;”
😉
Всегда увеличиваю картинки с помощью html, для меня это как то проще что ли))) при этом отдаю предпочтение увеличению по клике мышки.
С помощью html можно только в новом окне открыть.
PS: зря советом не воспользовались, transition делает эффект намного привлекательнее.
Искал что-то подобное) спасибо)хочу использовать у себя на сайте, возможно как-то доработаю)
Для второго уж очень hover просится. Так не очень понятно, что можно при нажатии увеличить картину. А так вообще довольно полезная статья и без воды. Спасибо.
Очень удобный инструмент, заберу себе в “копилку”. Интересно было бы еще почитать про смену одной картинки на другую при наведении или клике. И название статьи хорошо бы подкорректировать, добавить что увеличение картинки при наведении курсора или клике. Изначально ожидала прочитать про то как взять маленькое изображение и ввести в html параметры ширины и длины картинки отображаемой на странице. Но, в прочтении не разочарована.
Вау! Круто! Особенно понравился первый способ, может и применю. Правда я пользуюсь плагином для увеличения и если его деактивировать, то придется переделывать все картинки, а это долго. Но все равно, спасибо за науку.
Да, с плагинами удобно 
, я сама их люблю
Тогда заходите в гости на мою статью kosolapovblog.ru/plagin-uvelicheniya-kartinki-i-top-kommentatorov.html и просто в гости
Как увеличить изображение: варианты на CSS и JavaScript
Использовать ссылку.
Ограничить высоту картинки с помощью :hover.
Увеличить фото благодаря фокусу :focus.
Увеличить фотографию с помощью позиционирования.
Использование CSS3: увеличение фотографии при клике.
Расширить изображение с помощью свойства transform.
Использовать :after.
Как увеличить изображение с помощью скрипта JavaScript.
37 комментариев:
anya При расширении большого количества изображений с помощью HTML5 они сами выстраиваются в каскад.Скажите как сделать так,чтобы они выстраивались в прямые линии??
спасибо! NMitra После картинки напишите
anya Получилось,но вертикально,а как сделать их в ряд по горизонтали? NMitra Уберите действие из комментария 2 и пробелы между кодом картинок.
См. подробнее http://shpargalkablog.ru/2011/04/css-nalozhenie.html Анонимный отрегулировать картинку по центру я смог, но не смог никак сделать чтобы при открытии картинки, страница не не сползала вниз. я наверное как то не правильно объясняю то что хочу сделать. Анонимный хочу исправить ошибку. «страница не сползала вниз» NMitra При использовании :target не получиться. 🙁 NMitra Исправила статью, замечания учтены. Дмитрий Спасибо, очень интересно. Хочу использовать transform. Подскажите, как сделать чтобы предыдущая картинка не подныривала под следующую. Спасибо. NMitra figure.vkl2:focus <
z-index: 100;
position: relative;
> Дмитрий Спасибо огромное. виталий нестёркин Здравствуйте долго искал как это воплотить благодаря вам сделал
Увеличить фотографию с помощью позиционирования но вот загвоздка картинка открывается вбок и поэтому у людей с неширокими мониторами будет не вся видна подскажите что написать в коде чтобы изменить а точнее сдвинуть к центру экрана
как сейчас это выглядит можно увидеть на сайте
http://xn--51-8kcfemaodkveyaqedoqejz1ao.xn--p1ai/ NMitra Здравствуйте,
Нижняя запись приоритетная, она перебивает значение left: 50%;
По хорошему нужно сделать так (я сразу этого не сделала, чтобы акцентировать ваше внимание на нужных свойствах)
Теория:
http://shpargalkablog.ru/2012/03/div-po-centru-html.html
http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html
http://shpargalkablog.ru/2011/04/css-nalozhenie.html
http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html виталий нестёркин Спасибо большое за помощь шас пока некогда ближе к ночи попробую
разобратса виталий нестёркин Наталья здравствуйте пытался написать вам письмо на адрес n.mitra@yandex.ru.письмо не отравилась
Ошибка
Недопустимый адрес
Адрес n.mitra@yandex.ru. не существует или заблокирован. Письмо не было послано виталий нестёркин прошу прошения за мою невнимательность просто когда вставлял адрес
не заметил точку после ru все нормально с ящикам Юрий Наташа, больше всего понравился вариант с transform: scale. Но при быстром перемещении курсора с одной соседней картинки на другую из границы «цепляются»:
article img <
width: 100%;
height: 231px;
transition: 0.5s;
>
article img:hover <
transform: scale(1.5);
>
Видел в комментариях:
figure.vkl2:focus <
z-index: 100;
position: relative;
>
Но это не решает проблемы,т.к. в приоритете все равно будет какое-нибудь конкретное изображение. Может в таких случаях нужно задавать большее расстояние между img, чтобы они не «цепляли» друг друга? Или не указывать для изображений слишком большие размеры при наведении курсора? NMitra figure:hover, figure:focus <
z-index: 101;
> Юрий К сожалению, не помогло. Это моя вина, т.к. целиком не объяснил ситуацию. Дело в том, что изображения находятся внутри ячеек таблицы. Чтобы было более наглядно приведу код (в html все скобки удалил):
section
article
h2 Название статьи /h2
figure :first-child <
transform: translateX(-10px);
>
section > :last-child <
transform: translateX(10px);
>
figure img <
width: 100%;
height: 230px;
transition: 0.5s;
>
figure img:hover <
transform: scale(1.5);
position: relative;
z-index: 100;
>
Для крайних статей и всех изображений прописано transform. Может они конфликтуют? Хотя о возможности такого информации нигде не нашел.
NMitra Ничего не понимаю, нужна или ссылка на страницу или на пример на http://jsfiddle.net/ Юрий Половина кода все равно «улетела». Есть section, в которой три article. В каждом article размещено изображение. Далее:
section <
display: table;
width: 100%;
border-spacing: 10px;
>
Как увеличивать изображения на сайте
Изображения на сайтах встречаются довольно часто и при этом они бывают больших размеров, но дизайны сайтов далеко не всегда позволяет разместить её в полном формате. Поэтому нужно придумать способ, который бы позволял увеличивать их.
Начнем с примитивных методов, а закончим самым лучшим способом увеличения изображения.
1. Увеличение изображения через ссылку
Увеличение изображения через ссылку — самый простой способ без применения каких-либо CSS. Просто ставим ссылку на изображение с большим размером.
Пояснение к примеру:
Последний параметр довольно важен, поскольку зачастую из-за неопытности пользователя может возникнуть следующая ситуация: открыв страницу с картинкой, он не знает как вернутся назад и поэтому просто закрывает вкладку, а значит полностью покидает сайт. Прописав последний параметр, мы его подстраховываем от такого случая, ведь у него останется открыта начальная страница.
Несмотря на простоту применения, этот способ является далеко не лучшим, поскольку для увеличения изображения приходится открывать новую страницу, но зато таким методом можно просматривать изображения любых размеров. Так что делаем вывод: если необходимо увеличить изображения очень большого размера, то это единственный верный способ сделать это.
2. Автоматическое увеличение изображение при наведении курсора
Название способа четко отражает его суть: при наведении курсора мышки на изображение оно автоматически зуммируется. Реализация метода элементарная, но опять-таки этот способ мне не нравится тем, что невозможно просто провести курсор через изображение. Ведь оно всегда будет увеличиваться — это может начать раздражать пользователя.
Следующий код реализует возможность автоматического зуммирования при наведении курсора:
Пояснения к примеру:
3. Увеличение изображения при клике
Это самый распространенный и удобный метод увеличения изображений. Причем здесь существует множество способов и вариантов реализации. Рассмотрим несколько самых популярных вариантов:
3.1. Увеличение при активном фокусе
После клика мышкой на изображение оно увеличивается, однако из-за этого съезжает текст вниз, поэтому этот способ далеко не лучший. Приведем пример кода:
Как это выглядит на странице:
3.2. Увеличение изображения поверх страницы
Ниже приведен код для реализации этого метода
Как это выглядит на странице:
Варианты 3.1 и 3.2 полностью основаны на возможностях CSS, а значит являются «лайт» способами, т.к. не нагружают страницу лишними скриптами. Есть и другие варианты, которые также основаны на CSS, однако, они уже более экзотические. Я не буду рассматривать их в рамках этой статьи, поскольку некоторые браузеры не поддерживаются подобные вещи.
3.3. Красивое увеличение
Данный метод является самым красивым и удобным на мой взгляд. Для его подключения придется немного повозиться с добавление различных скриптов, поэтому для реализации рассмотрим пошаговую установку:
3) На каждой странице сайта, где будет использоваться увеличение изображения, необходимо подключить метод и стиль simplebox:
Для использования этого метода зуммирования используется следующая конструкция:
Примечание
Вместо адреса меньшей копии изображения можно прописать адрес основного изображения, но при этом применить атрибут width, в котором указать небольшую ширину (читайте подробнее о теге img).
Увеличение картинки в Html
Нужно дописать что то типо onmouseover=»this.src». Чтобы при наведении курсора картинка увеличилась
и что это за язык HTML или JS.
Увеличение картинки!
Нужно сделать увеличение такой картинки: Дело все в том, что там используется лупа, даже.
Увеличение картинки
Как сделать, что бы при нажатии на картинку, она увеличивалась, а при нажатии на увеличенную, она.
Увеличение картинки
Привет всем как можно сделать такое вручную
Увеличение картинки
Здравствуйте, не получается увеличить картинку (( вот код html, body
Работает спс)), еще один вопрос.
Почему в Dreamweare когда пишешь onmouseover=this. и ставишь точку то не вылазит окошко с функциями которые можно написть туда.
Добавлено через 13 минут
А можно кроме этого кода
Увеличение картинки по нажатию
Привет всем подскажите как сделать так что бы при нажатию на картинку картинка увеличивалась в.
увеличение картинки по клику
Объясните пожалуйста, как сделать чтобы картинка увеличивалась по клику и занимала скажем левый.
Увеличение картинки при наведении
Доброго времени суток! В шаблоне Helium, частица Content Cubes. Сейчас выводится фото в.
Увеличение картинки при наведении
Нужно увеличивать картинку, когда не нее наведен курсор