Как увеличить изображение: варианты на CSS и JavaScript
Загрузка ...
То есть наша картинка будет являться ссылкой на оригинальный размер изображения.
<a href="адрес_оригинального_изображения"><img src="адрес_уменьшенной_картинки"/></a>
Этот вариант плох тем, что фактически пользователи уходят со страницы.
Ограничить высоту картинки с помощью :hover.<style> img.big {cursor: pointer; max-width: 150px;} img.big:hover {max-width: none;} </style> <img class="big" src="адрес_исходного_фото" />Увеличить фото благодаря фокусу :focus.<style type="text/css"> .popup {width: 150px; cursor:pointer;} .popup:focus {width: auto;} </style> <img src="адрес_фото" class="popup" tabindex="1"/>Увеличить фотографию с помощью позиционирования.<style type="text/css"> .blok1 {position: relative; cursor:pointer; display: inline-block;} .blok1 img + img {position:absolute; left: 0; top:0; z-index:100; display: none;} .blok1:hover img + img {display: block;} </style> <div class="blok1"> <img src="адрес_миниатюры"/><img src="исходный_адрес"/></div>Использование CSS3: увеличение фотографии при клике.<style type="text/css"> .vkl3 > br, .vkl3 > a:nth-of-type(2), .vkl3 > br:target ~ a:nth-of-type(1) {display:none;} .vkl3 > br {position:fixed;} .vkl3 > br:target ~ a:nth-of-type(2) {display: block;} </style> <figure class="vkl3"> <br id="vkl3"/> <a href="#vkl3"> <img src="миниатюра"/> </a> <a href="#close"> <img src="оригинал"/> </a> </figure>Или вариант модального окна.
Расширить изображение с помощью свойства transform.Автор. Поясним свойство transform CSS.
<style type="text/css"> figure.vkl2 { width: 140px; background: white; box-shadow: 0 3px 10px #ccc; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transition: all 0.7s ease; -moz-transition: all 1s ease; -o-transition: all 0.7s ease; -ms-transition: all 0.7s ease; text-indent: 0px; text-align: center; padding: 5px; z-index: 100; } figure.vkl2 img {width: 100%; padding: 0px;} figure.vkl2:hover { -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg); -o-transform: rotate(-1deg); -ms-transform: rotate(1deg); box-shadow: 0 2px 3px #666; } figure.vkl2:focus { -webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5); -o-transform: rotate(-3deg) scale(2.5); -ms-transform: rotate(-3deg) scale(2.5); box-shadow: 0 2px 3px #666; } </style> <figure tabindex="1"><img src="адрес_картинки" /><figcaption>Текст</figcaption></figure>Прыжки с шестомИспользовать :after.В случай с :after фото не является элементом HTML. Не обязательно "изо" будут картинками разного размера, они могут быть разными фотографии.
<style type="text/css"> .kartinka {text-align: center;} .kartinka input {display:none;} .kartinka label {cursor:pointer;} .kartinka label:after {display: inline-block; width: 100%;} .kartinka input:nth-of-type(1):checked ~ label:nth-of-type(4):after {content: url(изо1);} .kartinka input:nth-of-type(2):checked ~ label:nth-of-type(4):after {content: url(изо2);} .kartinka input:nth-of-type(3):checked ~ label:nth-of-type(4):after {content: url(изо3);} .kartinka input:nth-of-type(4):checked ~ label:nth-of-type(4):after {content: url(изо4);} </style> <figure class="kartinka"> <input type="radio" checked="checked" name="raz" id="kartinka1"/><label for="kartinka1">200</label> <input type="radio" name="raz" id="kartinka2"/><label for="kartinka2">300</label> <input type="radio" name="raz" id="kartinka3"/><label for="kartinka3">400</label> <input type="radio" name="raz" id="kartinka4"/><label for="kartinka4">500</label></figure>200 300 400 500Как увеличить изображение с помощью скрипта JavaScript.
Опять таки способов реализации довольно много. И здесь важен индентификатор, например, miniatuyra1.
<script>var imgbase = "маленькое_изо"; function cambiarla() { document.getElementById("miniatuyra1").src = "исходное_изо"; }</script> <img id="miniatuyra1" src="маленькое_изо"/> <a href="javascript: cambiarla();">Щелчок</a> ⇔ <a href="javascript:void(0);" onclick="document.getElementById('miniatuyra1').src=imgbase;">Отмена</a>Также посмотрим на тот скрипт, при котором изменения происходят по щелчку мышки.
<script>function miniatuyra3(cual,url) {var imagen1 = "уменьшенная_картинка";var imagen2 = "исходный_рисунок";var imagenactual = cual.src;if(imagenactual==imagen1) {cual. src = imagen2;} else {cual. src = imagen1;}}</script> <img onclick="miniatuyra3(this);" src="уменьшенная_картинка"/>И тот, которым могут воспользоваться пользователи Picasa (подробнее).
100 | 200 | 300 | 400 | 500 | 600
Похожие статьи: