CSS
- 3 ответа
- 0 вопросов
2
Вклад в тег
<div class="certificate">
<div class="certificate__body">
<h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
<p class="certificate__text">Успешно справившись со всеми заданиями, по итогам обучения Вы получите сертификат участника.</p>
<!-- В кнопку добавлены два регистратора событий указателя. (onmouseover и onmouseout)-->
<button class="btn" onmouseover="bigImage();" onmouseout="smallImage();">Подробнее</button>
</div>
<div class="certificate__image">
<!-- Изображению добавлен id для обращения к нему-->
<img id="certificate__image" src="https://hsto.org/r/w120/webt/62/8f/43/628f43b33f1d9027652674.jpeg" alt="">
</div>
</div>
<script type="text/javascript">
//Берем наше изображение по ИД
let myImage = document.getElementById('certificate__image');
//Увеличивает (запускается событием onmouseover)
function bigImage(){
myImage.style.width = "502px";
myImage.style.height= "363.54px";
};
//Уменьшает (запускается событием onmouseout)
function smallImage(){
myImage.style.width = "250px";
myImage.style.height= "130px";
};
</script><div class="certificate">
<div class="certificate__body">
<h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
<p class="certificate__text">Успешно справившись со всеми заданиями, по итогам обучения Вы получите сертификат участника.</p>
<!-- В кнопку добавлены два регистратора событий указателя. (onmouseover и onmouseout)-->
<button class="btn" onmouseover="myImage.classList.toggle('large');" onmouseout="myImage.classList.toggle('large');">Подробнее</button>
</div>
<div class="certificate__image">
<!-- Изображению добавлен id для обращения к нему-->
<img id="certificate__image" src="https://hsto.org/r/w120/webt/62/8f/43/628f43b33f1d9027652674.jpeg" alt="">
</div>
</div>
<style>
/* Это класс увеличивающий изображение */
.large{
width: 502px;
height: 363.54px;
}
</style>
<script type="text/javascript">
//Берем наше изображение по ИД
let myImage = document.getElementById('certificate__image');
</script>