Задать вопрос
TheBeJIIHiu

Радмир Ноирусов

Просто обычный кодер?
Ответы пользователя по тегу HTML

  • Как сделать появление изображения при наведении на объекты?

    TheBeJIIHiu
    @TheBeJIIHiu
    Просто обычный кодер? 
    <div class="items">
  <div class="item" data-image="path/to/image1.jpg"></div>
  <div class="item" data-image="path/to/image2.jpg"></div>
  <div class="item" data-image="path/to/image3.jpg"></div>
  <div class="item" data-image="path/to/image4.jpg"></div>
</div>
<div class="image-container">
  <img class="image" src="">
</div>


    .items {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

.image-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

.image-container .image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
}


    const items = document.querySelectorAll('.item');
const imageContainer = document.querySelector('.image-container');
const image = document.querySelector('.image-container .image');

let currentImage = null;

items.forEach(item => {
  item.addEventListener('mouseenter', () => {
    const imageUrl = item.getAttribute('data-image');
    image.setAttribute('src', imageUrl);
    imageContainer.style.display = 'block';
    currentImage = imageUrl;
  });
});

items.forEach(item => {
  item.addEventListener('mouseleave', () => {
    if (currentImage === item.getAttribute('data-image')) {
      imageContainer.style.display = 'none';
    }
  });
});

imageContainer.addEventListener('click', () => {
  imageContainer.style.display = 'none';
});
    Ответ написан
    1 комментарий
    1 комментарий

  • Как программно уменьшить область просмотра в браузере?

    TheBeJIIHiu
    @TheBeJIIHiu
    Просто обычный кодер?
    Возможно, вы сможете использовать transform: scale(.9)этот bodyэлемент. Хотя в будущем я бы рекомендовал создать адаптивный дизайн, используя вместо этого медиа-запросы.

    Это было -moz-transform: scale(.9)бы специально для Firefox.

    Источник Stackover Flow
    Ответ написан
    6 комментариев
    6 комментариев

  • Почему когда заходишь на сайт, обратная связь сразу отправляет сообщение?

    TheBeJIIHiu
    @TheBeJIIHiu
    Просто обычный кодер?
    Попробуй все реализовать в одном файле на mail.php

    <?php
header('Content-type: text/plain; charset=utf-8');

$to = "damirgaliev587@gmail.com"; 
$tema = "Форма обратной связи на PHP"; 
$message = "Ваше имя: ".$_POST['name']."<br>";
  $message .= "E-mail: ".$_POST['email']."<br>"; 
$message .= "Номер телефона: ".$_POST['phone']."<br>"; 
$message .= "Сообщение: ".$_POST['message']."<br>"; 
$headers  = 'MIME-Version: 1.0' . "\r\n"; 
  $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n"; 
mail($to, $tema, $message, $headers); 

?>
<div id="contacts">
    <h6>Записывайтесь на бесплатную консультацию</h6>
  <form action="./mail.php" method="post">
  <fieldset>
  <legend></legend>
 
  <input type="text" name="name">
  <h13>Имя:</h13>
  <input type="text" name="email">
  <h13>E-mail:</h13>
  <input type="text" name="phone">
  <h13>Номер телефона:</h13>
  <textarea rows="10" cols="45" name="message"></textarea>
  <input type="submit" value="Отправить сообщение">
  </fieldset>
  </form>

  </div>
    Ответ написан
    1 комментарий
    1 комментарий