Image appearing when clicking a button
How do I make a hidden i开发者_高级运维mage appear when a submit button is clicked?
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>
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()"/>
document.getElementById("submitBtn").onclick = function() {
document.getElementById("imageTag").style.display="block";
return true;
}
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.
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;
}
加载中,请稍侯......
精彩评论