<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>
<div class="certificate">
<div class="certificate__body">
<h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
<p class="certificate__text">Успешно справившись со всеми заданиями</p>
<button class="btn">Подробнее</button>
<div class="certificate__image">
<img src="./img/certificate.png" alt="">
</div>
</div>
<!--<div class="certificate__image">
<img src="./img/certificate.png" alt="">
</div>-->
</div>
const today = String((new Date()).getDate()).padStart(2, '0');
const dayStartElements = document.querySelectorAll(".js-text");
dayStartElements.forEach((el) => { el.innerText = `${dd}` });
$mail->isSMTP(); //Send using SMTP
$mail->Host = 'smtp.example.com'; //Set the SMTP server to send through
$mail->SMTPAuth = true; //Enable SMTP authentication
$mail->Username = 'user@example.com'; //SMTP username
$mail->Password = 'secret'; //SMTP password
$mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; //Enable implicit TLS encryption
$mail->Port = 465; //TCP port to connect to; use 587 if you have set `SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS`
const slider = new Slider();
const breakpoint = window.matchMedia("(min-width: 1200px)");
if (breakpoint.matches) {
slider.init();
}const slider = new Slider();
const breakpoint = window.matchMedia("(max-width: 1200px)");
const breakpointChecker = () => {
if (breakpoint.matches) {
slider.init();
} else {
slider.destroy();
}
};
breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();init() и destroy() или аналогичные методы для включения и отключения слайдера. Так вот, используя эти методы в связке с matchMedia(), можно добиться желаемого результата.// если ширина окна больше или равна 1200px,
// выполняем инициализацию слайдера
if(window.innerWidth >= 1200) {
slider.init();
}
Есть скрипт слайдера
нужно сделать так, чтобы он срабатывал только на определенной ширине
как это сделать на чистом javascript
