★
Чистый HTML★ Чистый CSS перейти↓
★ Чистый JavaScript перейти↓
★ Пошаговое увеличение размера перейти↓
★ Увеличение картинки с надписью перейти↓
★ Увеличение картинки в новом окне JavaScript перейти↓ Представлены способы перехода от малого размера картинки к большому. Из этих способов можно выбрать как увеличение изображения по наведению курсора, так и по клику (щелчку курсора).
Кодировка без использования стиля (чистый HTML)
Способ 1
Простейший код переход от малого размера к размеру оригинала (не больше) через ссылку. Увеличенное изображение открывается в новом окне. Щелкни по фото. Возврат по стрелке 'назад'. Скрипт будет выглядит так: <html> <head> <title>name.html</TITLE> </head> <body> <a href="31.jpg"><IMG height=70 width=100 src="31.jpg" ></a> </body> </html> Недостаток - могут возникнуть проблемы с возвращением на исходную страницу (см. комментарий к способу 3).
Способ 2
Щелчок по фото - изображение увеличивается. При уходе курсора - возврат. Переход от малого размера к ЛЮБОМУ размеру (без внутреннего стиля CSS). Возможность задать любой увеличенный размер. Простой и короткий код. В коде только один адрес фото. <body> <img class="aligncenter" src="31.jpg" style="width:100px" onclick="this.style.width='800px'" onmouseout="this.style.width='150px'" > //код не разрывать </body>
Пояснения:
width: 100px - задает размер малого фото
width: 800px - задает размер большого фото
возврат к малому фото - уход курсора вне фото
Способ 3
Усовершенствованный аналог Способа 1 - устраняет трудность, которая может возникнуть с возвращением к исходному окну. Благодаря target="_blank" увеличенный рисунок открывается в новом окне. Закрытие последнего закрывает рисунок, но не закрывает сайт. Иначе из-за неопытности пользователя может возникнуть следующая ситуация: открыв страницу с картинкой, он не знает, как вернутся назад и поэтому просто закрывает вкладку, а значит полностью покидает сайт. <a target="_blank" href="31.jpg"> <img width="100" height="70" src="31.jpg"></a>
Способ 4
При наведении курсора - увеличение, при уводе курсора - возврат к исходному размеру. Увеличение до ЛЮБОГО размера. С помощью width задаются размеры: исходный рисунок, увеличенный рисунок и рисунок после ухода курсора. <img src="31big.jpg" width=100 onmouseover="this.style.width=600" onmouseout="this.style.width=100">
Увеличение за счет чистого стиля
Способ 5
Простейший переход от малого размера к ЛЮБОМУ размеру за счет стиля. Увеличение изображения - щелчок по фото. Возврат - щелчок вне фото.
Кодировка
<style>
#img {width: 100px; cursor:pointer;}
#img:focus {width: 1200;}
</style>
</head>
<body>
<img src="31.jpg" id="img" tabindex="1">
Пояснения.
Здесь width задает размер исходного и увеличенного изображения.
Обозначение ":focus" позволяет менять стиль элемента в зависимости от
действий пользователя. Свойство focus активизируется при щелчке мыши.
Для возврата к исходному размеру нужно щелкнуть вне изображения.
Изображению присваивается идентификатор ("img"), которому в стиле
задаются определенные свойства (после знака #img).
Способ 6
Еще один простейший переход от малого размера к ЛЮБОМУ размеру с использование стиля. При наведении курсора - увеличение, при уводе курсора - возврат к исходному размеру. Аналог способа 4.
<body>
<style>
#big {cursor: pointer; width: 100px;}
#big:hover {width: 1100px}
</style>
<img id="big" src="31.jpg">
</body>
Пояснения.
Здесь width задает размер исходного и увеличенного изображения.
Обозначение ":hover" позволяет менять стиль элемента в зависимости от
действий пользователя. Свойство hover активизируется в том случае, если на элемент
наведен курсор мыши.
Приведем еще один простейший способ переход от малого размера
к ЛЮБОМУ размеру с использование стиля. Клик по фото - увеличение размера, другой
клик (также по фото) - возврат к исходному размеру.
Увеличение за счет чистого JavaScript
Способ 7
Можно произвести увеличение размера, используя только JavaScript.
Комбинация простых способов
В этом способе первое увеличение происходит при наведении курсора, второе по щелчку. Возврат к исходному размеру - увод курсора с изображения. Если после второго увеличения изображение уходит за пределы экрана, то воспользоваться ползунками для перемещения изображения невозможно. Как только курсор соскользнет с изображения, последнее возвращается к исходному размеру. Однако, перемещение изображения можно осуществить клавишами ← ↑ → ↓. Приводим скрипт. <p align=center><img style='border-color:red ; border-style: solid; border-width: 6px;' src='Karta-5.jpg' width=130 onMouseover='this.style.width=900' onclick='this.style.width=1800' onMouseout='this.style.width=130'>
Более сложный скрипт
позволяет перемещать изображение курсором.С помощью тернарного оператора
Этот способ позволяет 3 раза увеличивать размер изображения, последовательно кликая на фото 3 раза. На четвертом клике происходит возврат к исходному размеру. О сути тернарного оператора и его работе было сказано выше в разделе "Увеличение за счет чистого стиля". <style> .f img{ width:100px; } .g img{ width:300px; } .h img{ width:500px; } .j img{ width:700px; } </style> <body> <div class="f" onclick="this.className =(this.className == 'f' ? 'g': this.className == 'g' ? 'h' : this.className == 'h' ? 'j': 'f')"><img src='18.jpg' ></div></div>
<style> #img{width: 200px;} #box { width:200px; margin-top:100px; text-align: center; font-weight:bold; font-size:15px; color:red; } #p1{margin-top:-110px;} #hr{margin-top:60px;display: inline-block;text-decoration: none; padding: 4px 12px;border-radius: 8px;background-color: red; color: #fff;} #box:hover #img{width:400px; } #box:hover #p1{margin-top:-220px;font-size:35px;width:400px;} #box:hover #hr{margin-top:120px;} </style> </head> <body> <div id="box"><img id='img' src=18.jpg > <p id='p1'> Надпись на фото</p> <a href="#" id='hr'>Наведи курсор</a> </div> Краткое пояснение к скрипту. Идентификатор #img задает исходный размер картинки. Идентификатор #box задает стиль контейнера, в который будет помещен рисунок и надпись поверх фото (в т.ч. параметры шрифта надписи) . Идентификатор #p1 задает текст надписи на фото . Идентификатор #hr задает стиль надписи "Наведи курсор". Увеличение картинки в новом окне JavaScript
Приведем примеры увеличения картинки в новом окне JavaScript. Подробно об этом окне здесь. HTML Нижеприведенный скрипт основан на использовании события onmouseover. Увеличение размера происходит при наведении курсора на картинку. <script> function opnw6() { var myWindow= open("", "", "width=400,height=400"); myWindow.document.write("<BODY BGCOLOR='#3cb371'>") myWindow.document.write("<FORM><INPUT TYPE=button VALUE='закрыть окно' ONCLICK=self.close()></FORM>") myWindow.document.write("<BR><BR><p align=center><img src='155.jpg' width=150 onmouseover='this.style.width=300' onmouseout='this.style.width=150'>"); r2="<p align=center><span style='font-size:30;color:blue'><BR>В этом окне мы наведением курсора на рисунок увеличиваем его размер с помощью onmouseover</span>" myWindow.document.write(r2) } </script> <body> <input type=button value="mouseover" onClick="opnw6()"> CSS Нижеприведенный скрипт увеличивает картинку в новом окне с помощью псевдокласса focus путем наведения курсора на сфокусированный элемент с последующим кликом по нему. Элемент считается сфокусированным, если он обладает способностью оказаться в фокусе курсора. Ели элемент не сфокусирован, то он является невидимым для курсора мыши, когда последний перемещаяется по окну браузера. Некоторые элементы Javascript (их немного, например, INPUT) являются сфокусированными по умолчанию. Другие нуждаются в фокусировке. Для этого в коде элемента надо прописать tabindex="1". Если в стиле обработчика указать атрибут "cursor:pointer", он будет сигнализировать о том, что при движении по окну браузера курсор наткнулся на сфокусированный элемент: вид курсора изменится со стрелки на лапку. Это означает, что элемент попал в фокус курсора и он способен реагировать на клик. При использования focus во нутреннем стиле стиле CSS должен присутствовать код #imgf:focus { outline: none; }, исключающий возможное появление окатовки вокруг картинки при клике. Скрипт <script> function opnw7() { var myWindow= open("", "", "width=400,height=400"); myWindow.document.write("<BODY BGCOLOR='cyan'>") var divContent = document.getElementById("pab").innerHTML; myWindow.document.write(divContent); myWindow.document.write("<FORM><INPUT TYPE=button VALUE='закрыть окно' style='position:absolute;margin-top:4px;margin-left:10px;' ONCLICK=self.close()></FORM>" myWindow.document.getElementById('over').style.display='block' } </script> <body> <div id="pab"> <style> #over{display:none;} #imgf {width: 150px; cursor:pointer;} #imgf:focus {width: 300;} #imgf:focus { outline: none; } #textf {position:absolute;margin-top: -20px; margin-left: 115px;line-height: 20px; font-size:20px; font-weight: bold;color:red; } </style> <p align=center><img id='imga' SRC='1.jpg' tabindex="1"></p> <p id='textf'>Щелкни по фото</p> </div> <input type=button value="focus" onClick="opnw7()"> Можно увеличить размер картинки путем чистого наведения курсора (без клика), если в представленном скрипте произвести замену focus на другой псевдокласс - hover.
Щелкни по фото
