Pop up Text for Header

[Adira]

Hello! I have images in my header, that I want members to click and a text box to appear. I'm trying to make a d&d sort of site, where you click on a tree image, and a dialogue pops up tell you all the information on it. I've googled it, but the coding is too difficult. My best friend is the one who codes but I can't ask her because I'm making this site as a surprise for her. Thank you for your help. 

[shawnatdgk]

Well there's a really simple hover effect you could use for each image which is the title attribute. 

<img src="/" title="hello">
or if you're reallly set on an onclick event...

you could simply use an alert function

<img src="/" onclick="image_1()">

<script>
function image_1() {
alert("This is the info for image 1")
}
</script>
or, onclick that adds a div containing the text below it

<div style="max-width:200px; text-align:center;">
<img src="https://avatarfiles.alphacoders.com/281/thumb-281432.jpg" id="image_1" onclick="showDetails_1()"><br>
<div id="image_1_div" onclick="this.style.display='none';" style="display:none;">Here is some info for this image. So that it doesn't exceed the image width, we add a max width to the div that contains the image and corresponding text. <br><i>click text to hide</i></div>
</div>

<script>
function showDetails_1() {
div_1 = document.getElementById("image_1_div");
div_1.style.display="inline";
}
</script>
Example: click bugs bunny

whichever option you choose, you would need to add a code for each image

[Adira]

Thank you SO much, this is really helpful and you even took the time to show me a visual example. I can't thank you enough. ♥

[shawnatdgk]

no problem!
Also on the second option, the alert method, I forgot to add the function brackets so,

<img src="/" onclick="image1()">

<script>
function image1() {
alert("This is the info for image 1")
}
</script>