Image appearing when clicking a button

Question

单击提交按钮时如何显示隐藏图像？

Answer 1

You were lucky I had a blank HTML page ready:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> 
    <meta charset="utf-8" />

    <title>Test</title>

    <style type="text/css">
      .hidden {
        display: none;
      }
    </style>
  </head>

  <body>
    <form>
      <input type="submit" id="submit" onclick="document.getElementById('hidden').style.display = 'block';" />
     </form>

     <img id="hidden" class="hidden" src="foo.png" />
  </body>
</html>

Answer 2

Using jQuery:

<img id="image1" src="myimage.jpg" style="display:none;" width="120" height="120"/>

<input type="submit" name="submit" value="submit" onclick"$('#image1').show()"/>

Answer 3

That would depend on how you are hiding it. The easiest way to do it would be to change the class name of the image from one that makes it hidden to one that does not.

<img src="thesource" class="hidden">

document.getElementById("theid").className = ""; // remove the hidden class.


.classHidden {
     display: none;
}

Answer 4

document.getElementById("submitBtn").onclick = function() {
 document.getElementById("imageTag").style.display="block";
 return true;
}

Answer 5

Here's an example

<img class="image_file src="image.jpg" />
<input type="submit" id="submit_button" name="submit_button" />

hide the image in css:

.image_file
{
display:none;
}

with jquery:

$('#submit_button').click(function(
    $('.image_file').show();
));

and try to avoid inline javascript, it's messy and difficult to maintain when you have a big website.

Image appearing when clicking a button

Question

5 answers

solution1
5 2011-05-20 07:40:50

solution2
1 2011-05-20 07:43:18

solution3
0 2011-05-20 07:40:39

solution4
0 2011-05-20 07:41:44

solution5
0 2011-05-20 07:42:18

Image appearing when clicking a button

Question

5 answers

solution1 5 2011-05-20 07:40:50

solution2 1 2011-05-20 07:43:18

solution3 0 2011-05-20 07:40:39

solution4 0 2011-05-20 07:41:44

solution5 0 2011-05-20 07:42:18

solution1
5 2011-05-20 07:40:50

solution2
1 2011-05-20 07:43:18

solution3
0 2011-05-20 07:40:39

solution4
0 2011-05-20 07:41:44

solution5
0 2011-05-20 07:42:18