Смена изображения при клике

HTML5

HTML5

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

Задача ясна — есть изображение, при клике на котором оно должно меняться на другое. Желательно плавно.

Нам потребуется два изображения. Я буду использовать картинки из прошлой статьи.

CSS3

CSS3

HTML5

HTML5

 

 

 

 

 

Подготовим контейнер для наших картинок:

<div id="img_container">
<img src="html5.jpg" />
<img src="css3.jpg" />
</div>

Теперь займемся созданием CSS стилей. Тут тоже ничего сложного:


#img_container {
position:relative;
height:400px;
width:400px;
margin:0 auto;
cursor:pointer;
}

#img_container img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#img_container img.transparent {
opacity:0;
}

#link_onclick {
cursor:pointer;
}

И последний шаг — написание простейшего jQuery кода, который будет менять класс нашего изображения на transparent при клике:


$(document).ready(function() {
$("#img_container").click(function() {
$("#img_container img.top").toggleClass("transparent");
});
});

Тут стоит не забыть подключить jQuery. Для WordPress есть статья о том, как правильно подключить jQuery. Так как в моем примере показывается просто html страница, то и jQuery я подключил c Google. В коде все видно.

Вот собственно и все. Посмотреть пример в работе и подробнее его рассмотреть вы можете, кликнув по кнопке ДЕМО ниже.

 

demo

 

Меток нет. Похожие записи
Запись опубликована в рубрике Javascript. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>