Javascript, после обработчика событий вернуться к умолчанию (DOM) - PullRequest
Новая
       7

Javascript, после обработчика событий вернуться к умолчанию (DOM)

0 голосов
/ 15 мая 2018

Здравствуйте, извините за, возможно, глупый вопрос, но я не могу найти легкое решение.

Смысл моего упражнения состоит в том, чтобы разместить 3 миниатюры на моем веб-сайте, но когда я перемещаюсь по изображениям, они должны увеличиваться в размере (поэтому у меня есть уменьшенная версия изображения и нормальный размер). Картинка нормального размера должна быть на 

<p id="groot"></p>

Это работает правильно, единственная проблема заключается в том, что изображения продолжают появляться, когда я перемещаюсь по нему. Поэтому, когда я выхожу из миниатюры, картинка должна исчезнуть. Есть ли функция или что-то, что возвращает сайт в исходное состояние или какое-либо решение? Заранее спасибо. Я надеюсь, что я объяснил это ясно.

Это мой первый вопрос по stackoverflow, так что, если у вас есть советы для полного noob:)

Это тело моего HTML-кода: 

<body> 
<p><img  id="foto1" src="images/thumb-bones.jpg" alt="bones"/>
<img src="images/thumb-castle.jpg" alt="castle"/>
<img src="images/thumb-mentalist.jpg" alt="mentalist"/>
</p> 

<p id="groot"></p>
</body>

Это код JS: 

addEventListener("load", init, false);

function init() {
    let foto1 = document.getElementsByTagName("img")[0].addEventListener("mouseover", actie, false);
    let foto2 = document.getElementsByTagName("img")[1].addEventListener("mouseover", actie2, false);
    let foto3 = document.getElementsByTagName("img")[2].addEventListener("mouseover", actie3, false);
    foto1.addEventListener("click", uit, false);
}


function actie(event) {
    let plaats = document.getElementById("groot");
    let element = document.createElement("img");
    element.src = 'images/image-bones.jpg';
    plaats.appendChild(element);

}


function actie2(event) {
    let plaats = document.getElementById("groot");
    let element = document.createElement("img");
    element.src = 'images/image-castle.jpg';
    plaats.appendChild(element);

}

function actie3(event) {
    let plaats = document.getElementById("groot");
    let element = document.createElement("img");
    element.src = 'images/image-mentalist.jpg';
    plaats.appendChild(element);

}

1 Ответ

0 голосов
/ 15 мая 2018

Используйте обработчик mouseout и в обработчике удалите все дочерние элементы из этого элемента.Самый простой способ сделать это - присвоить "" значению innerHTML.Например: 

function actie_off(event) {
    document.getElementById("groot").innerHTML = "";
}

Подберите до всех трех миниатюр.

Если вы не хотите использовать innerHTML, ответы на этот вопрос дают альтернативы.

Вы можете рассмотреть mouseenter и mouseleave вместо mouseover и mouseout.Вероятно, здесь нет особой разницы, просто mouseover повторяется, когда мышь перемещается по миниатюрам, и всплывающее окно mouseout может путать с вложенными элементами (в данный момент не актуально для вас).Для получения дополнительной информации см. Ссылки.

Еще одна вещь, которую следует учитывать, - это сохранение URL-адреса полноразмерного изображения для миниатюрных img элементов в виде data-* URI, например: 

<img id="foto1" src="images/thumb-bones.jpg" alt="bones" data-fullsize="images/image-bones.jpg"/>

Тогда вы можете использовать один обработчик для всех ваших img элементов вместо трех отдельных: 

function actie(event) {
    let plaats = document.getElementById("groot");
    let element = document.createElement("img");
    element.src = this.getAttribute("data-fullsize"); // Getting the fullsize URL
                                                      // from the image the event
                                                      // relates to
    plaats.appendChild(element);
}
...