Блог

Главная - Вопросы по программированию - Как мне сделать картинку на моем html-сайте интерактивной?

Как мне сделать картинку на моем html-сайте интерактивной?

#javascript #html #css #web #web-testing

#javascript #HTML #css #веб #веб-тестирование

Вопрос:

Я пытаюсь создать веб-сайт, но я новичок в html и не знаю, как сделать картинку интерактивной.

 <div class="portfolio-img-background" style="background-image:url(Images/Dirt.jpg)">
                    
                </div>

Именно так я отображаю изображение, потому что позже я меняю стиль в css.
Итак, я хотел бы знать, что мне нужно добавить, чтобы сделать это изображение интерактивным.
Заранее благодарю вас за любую помощь!

Весь мой код: https://pastebin.com/uiHH4vdB

Извините, что неправильно указал интерактивность. Что мне нужно, так это когда я нажимаю на картинку, мне нужно открыть / перейти к другому HTML-файлу.

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

1. Что значит «кликабельный»? Что, по-вашему, произойдет, когда вы нажмете на изображение?

2. поскольку ваше «изображение» — это div, оно просто интерактивно, если вы хотите, чтобы что-то происходило при нажатии, просто добавьте clickevent

Ответ №1:

Если вы хотите придерживаться фонового решения, вы можете сделать это так же, как вы управляете наведением курсора мыши:

 porfolioItem.addEventListener('click', () => {
   console.log('click');
})

Ответ №2:

попробуйте этот скрипт: <a href="your landing page url"> <img src="your image url" /> </a>

Ответ №3:

Вы можете использовать jQuery следующим образом

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
// put this on head or after </body>

затем

 <script>
$('.portfolio-img-background').click(function() {
    // do something here
})
</script>