Показ/Скрытие картинки HTML+CSS+JQuery

К оглавлению
Как я уже говорил, самое главное это больше практики, поэтому мы с Вами сразу будем писать сайт, на котором при нажатии на кнопку, будет появляться и скрываться картинка.

Часть HTML


Итак, приступим. Начнем со структуры нашего сайта. 
<HTML>
	<HEAD>
		<TITLE>Смена картинок HTML+CSS+JQuery</TITLE>
		<!--Подключаем JQuery плагин, файл со скриптами и файл со стилями-->
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script src="js/jquery-2.1.3.min.js"></script>
		<script src="js/myscript.js"></script>
	</HEAD>
	<BODY>
		<!--Тэг <input> с атрибутом type="button" - создаст кнопку-->
		<input type="button" id="mybutton" value="Показать">
		<br>
		<!--А это наш блок с тэгом <img>, который выведет картинку "demo.jpg"-->
		<div id="img_box"><img src="img/demo.jpg"></div>
	</BODY>
</HTML>

Часть CSS


Создадим простые стили для нашего проекта, это будет рамка, размер, фон и центровка наших элементов: 
#img_box {
	margin: 0 auto; /* Центровка блока по центру */
	border: 2px solid #000000; /* Черная рамка */
	width: 300px; /* Ширина блока с картинкой */
	height: 225px; /* Высота блока с картинкой */
	background: #000000; /* Фон блока */
}

Выбрать цвет, и найти его код можно в разделе HTML код цвета.

Часть JQuery


Создаем функцию показа/скрытия изображения, при нажатии на нашу кнопку. 
// Загрузка скрипта после полной загрузки страницы
$(document).ready(function() {
	// Привязываем событие "click" - нажатие, к кнопке с id="mybutton"
	$(document).on("click", "#mybutton", function() {
		// Привязываем функцию "toggle" к элементу с тэгом <img>
		// содержащимся в элементе с id="img_box"
		$("#img_box>img").toggle();
	});
});

Функция toogle показывает элемент, если он скрыт, и скрывает если элемент виден. Более подробнее о функции toogle можно почитать на странице русской документации JQuery.

В итоге у нас должно получиться так:

Скрыть картинку JQuery

Вот так, потихоньку Вы будете привыкать к коду, и с каждым разом будет все проще и проще ;)

Скачать коды урока