I’m having some issues with the modal image I’m trying to create for a website I’m making. I’m not able to click on the image at all but I am able to hover over it. The main idea is to get the modal image to work when I click on my “About” nav link.
I was using this link as a reference on how to structure the modal image.
https://www.w3schools.com/howto/howto_css_modal_images.asp
Below is a code of my HTML
<html>
<!--Importation of CSS and Javascript-->
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jesusjavascript.js"></script>
<main id="main">
<head>
<h1 id="title"> The life of Jesus</h1>
</head>
<nav id="nav-bar">
<div id="About">
About
</div>
<div id="#Forum">
Forum
</div>
<div id="#Video">
Videos
</div>
<div id="#Bible Dictionary">
Bible Dictionary
</div>
</nav>
</main>
<body id="body">
<!-- Trigger the Modal -->
<img id="myImg" src="assets/thefloodofjesus.gif" alt="Moses parts the sea with the diciples"
style="width:100%; max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<!--Seagul-->
<marquee direction="right">
<img id="seagul" src="https://cdn2.scratch.mit.edu/get_image/gallery/4422115_170x100.png" alt="">
</marquee>
<!-- Yellow Cross-->
<marquee>
<img id="yellow_cross_heart_image" img
src="https://icons.iconarchive.com/icons/uiconstock/flat-halloween/256/Halloween-Heart-Cross-2-icon.png"
alt="cross">
</marquee>
<figcaption id="img-caption"> A white heart with a cross on the topside and yellow background</figcaption>
<!--Tribute link code & Yellow bible text image-->
<div id="tribute-info">Tribute info</div>
<marquee>
<a href="https://www.openbible.info/topics" target="_blank">
<img id="yellow_biblical_text" src="assets/cooltext391207635180624.png" alt="Old yellow bible text">
</marquee>
<footer>
<div id="arrow_div">
<img id="arrow_foot0" src="assets/PinClipart.com_power-up-clipart_3336549.png">
<img id="arrow_foot1" src="assets/PinClipart.com_power-up-clipart_3336549.png">
<img id="arrow_foot2" src="assets/PinClipart.com_power-up-clipart_3336549.png">
</div>
</footer>
</body>
</html>