How to display an image when pressing a button in html?
<p>I thought doing something like this would have worked, but I'm confused as to why it isn't when the style is hiding the image to begin with, but not showing it when the button is pressed. Here's the code:</p>

<pre><code>function showImg() {
    x=document.getElementById("map_img")
    x.style.visibility="visible";
}

&lt;body&gt;
    &lt;img id="map_img" src="map.jpg" style="visibility:hidden" width="400" height="400"/&gt;

    &lt;form id="form1" name="form1" align="center"&gt;
        &lt;input type="submit" id="Map" value="Map" onclick="showImg()"/&gt;
    &lt;/form&gt;
</code></pre>

<p>I've also tried this in both situations:</p>

<pre><code>&lt;input type=button id="Map" value="Map" onclick="showImg()"/&gt;
</code></pre>

<p>and:</p>

<pre><code>&lt;style&gt;
    .hidden{display:none;}
    .show{display:block;}
&lt;/style&gt;

function showImg() {
    x=document.getElementById("map_img")
    x.class="show";
}

&lt;body&gt;
    &lt;img id="map_img" src="map.jpg" class="hide" width="400" height="400"/&gt;

    &lt;form id="form1" name="form1" align="center"&gt;
        &lt;input type="submit" id="Map" value="Map" onclick="showImg()"/&gt;
    &lt;/form&gt;
</code></pre>

<p>I'm really lost as to how neither of these worked, could I get some help on this please?</p>
