Блог

Главная - Вопросы по программированию - Каков наилучший способ заставить изображение появляться в определенном div в ответ на событие нажатия кнопки?

Каков наилучший способ заставить изображение появляться в определенном div в ответ на событие нажатия кнопки?

#javascript #html

#javascript #HTML

Вопрос:

Это довольно просто. Я просто хочу иметь интерактивное слово / кнопку, которая активирует изображение для отображения в div. Какой самый чистый способ сделать это? Спасибо

Комментарии:

1. использование javascript — лучший способ

2. я использую javascipt, чтобы добавить четный прослушиватель для кнопки и вызвать функцию, которая добавит элемент img внутри div.

Ответ №1:

Самый быстрый способ — добавить пустой тег изображения, где вы хотите, чтобы изображение отображалось, а затем использовать jquery для добавления / изменения источника

 $('#button').click(function(){
    $('#imgonclick').attr('src', 'http://example.com/myimage.jpg');
});

где #button — это кнопка с классом button, а #imgonclick — это тег img с классом imgonclick

Ответ №2:

Jquery очень прост, но если вам нужно придерживаться JavaScript, вы можете попробовать что-то вроде этого:

 <div id="image"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
  
 function displayBtn() {
   document.getElementById("image").src = "something.gif";
}

ИЛИ … если в div уже установлено свойство image src, просто покажите его.

 <div id="image" src="something.gif" style="display: none;"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
  
 function displayBtn() {
   document.getElementById("image").style.display = "block";
}