当前位置：文江博客话题详情

单击按钮时出现的图像

发布于 2024-11-08 14:21:07 字数 24 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苦行僧 2024-11-15 14:21:07

你很幸运，我准备好了一个空白的 HTML 页面：

<!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>

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>

回复收藏 0 原文

冷血 2024-11-15 14:21:07

使用 jQuery：

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

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

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()"/>

回复收藏 0 原文

画▽骨i 2024-11-15 14:21:07

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

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

回复收藏 0 原文

从来不烧饼 2024-11-15 14:21:07

下面是一个示例，

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

将图像隐藏在 css:

.image_file
{
display:none;
}

和 jquery:

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

中，并尽量避免使用内联 javascript，当您有一个大网站时，它会很混乱且难以维护。

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.

回复收藏 0 原文

禾厶谷欠 2024-11-15 14:21:07

这取决于你如何隐藏它。最简单的方法是将图像的类名从隐藏的类名更改为不隐藏的类名。

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

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


.classHidden {
     display: none;
}

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;
}

回复收藏 0 原文

~没有更多了~