Главная / Верстка / Веб решения / Смена картинки по клику

Смена картинки по клику


18.12.2014 18:329070

Смена картинки по клику - это уже мини сценарий, который в большинстве случаев решается использованием Java Script, позволяющим выполнять эту процедуру эффективно. Но в этом уроке речь пойдет о том, как это можно сделать без использования JS , только средствами html css.

Метод смены картинок кликом основывается на применении псевдоклассов :target и last-child, и назначением соответствующим образом идентификаторов (ID) для каждого элемента. Получается что изображение ссылается на следующее с помощью href атрибута, в котором указан его идентификатор. 

Для начала создадим контейнер, например обычный div , внутри которого и будет происходить смена картинок по клику, как и говорилось выше, без использования js , с помощью css и html.
Создаем обычный <div>, и для ограничения всех стилей в пределах этого div , придумаем для него произвольный класс, например changeimg.  
Теперь наш контейнер выглядит так:


<div class="changeimg"></div>


Стили для смены картинки по клику будут прописываться с учетом контейнера. Теперь внутри контейнера пропишем несколько тегов img , в нашем случае их будет 5, и для того чтобы можно было использовать возможности обращения к ID и указанные выше псевдоклассы, обернем изображения тегом a , чтобы они стали ссылками. Изображения назовем так: img1, img2, img3, img4, img5. А тегу a назначим ID, после чего у нас получится так:


                <div class="changeimg">
                        <a id="img1" href="#img2"><img src="img1.png" alt="" /></a>
                        <a id="img2" href="#img3"><img src="img2.png" alt="" /></a>
                        <a id="img3" href="#img4"><img src="img3.png" alt="" /></a>
                        <a id="img4" href="#img5"><img src="img4.png" alt="" /></a>
                        <a id="img5" href="#img1"><img src="img5.png" alt="" /></a>

                </div>


Как можно заметить глядя на исходный код, у нас есть контейнер  <div class="changeimg"> , внутри которого находятся изображения, обернутые тегом a, благодаря которому они становятся ссылкой. Каждая ссылка имеет свой идентификатор (ID), по которому к ней можно обратиться с помощью атрибута href. Получается что первая картинка (ссылка) ссылается на вторую, вторая на третью, третья на четвертую, четвертая на пятую, а пятая опять на первую. Теперь остается прописать соответствующие стили таким образом, чтобы была видна только одна картинка, а остальные скрыты. В этом нам поможет атрибут display в css. А за основу события будем брать псевдокласс :target.

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты. Продаю готовых сайты, контент на разные тематики: интересно, качественно, недорого.

Чем отличается атрибут :target от псевдокласса ?
Атрибут target используется в html коде (например для ссылок: <a href="" target="_blank">****</a>), а псевдокласс в данном случае используется в css для обращения к элементам которые содержат атрибут target.
Поэтому пропишем стили для нашего контейнера, например ширину и выравнивание по центру, а также уберем рамку при фокусе:


<style>
     .changeimg {
	max-width:128px;
	margin:0 auto;
	text-align:center;
	}	 

	.changeimg a:focus{outline:0}

 </style>

Теперь остается прописать css стили с учетом псевдоклассов, и содержимого :target у элементов, благодаря чему будет происходить смена картинки по клику. Поэтому перед закрывающим </style> добавим:

	.changeimg a, .changeimg a:target,
	.changeimg a:last-child {
	display: inline-block;		
	}
	
	.changeimg a,
	.changeimg a:target ~ a:last-child {
		display: none;
	}


Эта комбинация делает интересные изменения. Она позволяет назначить объекту на который мы ссылаемся определенные стили после перехода, то есть по клику. Чтобы был более понятен этот принцип, можно немножко изменить стили таким образом, чтобы все картинки были видны, но наполовину прозрачны, а та которую мы сменили по клику, непрозрачной. Измененные стили выглядят так:

 

	.changeimg a, .changeimg a:target,
	.changeimg a:last-child {
	display: inline-block;
        opacity:1;	
	}
	
	.changeimg a,
	.changeimg a:target ~ a:last-child {
	/*display: none;*/
	opacity:0.4
	}

Исходники и демо прилагаются.

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты. Продаю готовых сайты, контент на разные тематики: интересно, качественно, недорого.

 



Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Клик На Css , Смена Картинки По Клику





«Смена картинки по клику» - Похожие страницы

Вставка своего содержимого в CKEditor по клику CKEditor - вставить свое содержимое по клику CKEditor - визуальный html редактор, который можно использовать на сайте. Бывает так, что может понадобиться вставка содержимого в редактор не средствами самого редактора внутри области действия, а за ее пре...
Картинки в HTML. Работаем с изображениями + Со списками разобрались, начнем разбираться с изображениями и тегом <img>. Даже создавая сайт на какой-нибудь CMS, например на Joomla!, знание атрибутов тега изображения Вам будет необходимо. Для то...
Html 1358
Как быстро создать собственный баннер из любой картинки + Не расстраивайтесь, все проще, чем кажется. Попробуйте сделать это сами, следуя дальнейшим инструкциям. Я уже рассказывал о простом графическом редакторе picpick и о том, как с его помощью редактировать карт...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям