How to create a hidden in JavaScript?

Question

How can you make a simple tag like <img src="a.gif"> hidden programmatically using JavaScript?

I got the answer , Billy Could you please edit it to understandable — joe, Jun 15 '09 at 15:13

score 58 · Accepted Answer · answered Jun 15 '09 at 15:10

58

I'm not sure I understand your question. But there are two approaches to making the image invisible...

Pure HTML

<img src="a.gif" style="display: none;" />

Or...

HTML + Javascript

<script type="text/javascript">
document.getElementById("myImage").style.display = "none";
</script>

<img id="myImage" src="a.gif" />

answered Jun 15 '09 at 15:10

Steve Wortham

21,740
5
68
90

display: none; is what I needed. Thank you – Nabin Nov 14 '16 at 10:28
what if i want to show the image? should it be .style.display = true; ? – ReyAnthonyRenacia Jul 02 '17 at 15:18
To show the image it'd be `.style.display = "inline-block"` which would be the default display behavior of an img. All possible display options are described here... https://css-tricks.com/almanac/properties/d/display/ – Steve Wortham Nov 07 '17 at 18:02

score 5 · Answer 2 · answered Jun 15 '09 at 15:09

5

You can hide an image using javascript like this:

document.images['imageName'].style.visibility = hidden;

If that isn't what you are after, you need to explain yourself more clearly.

answered Jun 15 '09 at 15:09

Simon P Stevens

27,303
5
81
107

score 3 · Answer 3 · answered Jun 15 '09 at 15:08

3

How about

<img style="display: none;" src="a.gif">

That will disable the display completely, and not leave a placeholder

answered Jun 15 '09 at 15:08

Brian Agnew

268,207
37
334
440

score 3 · Answer 4 · edited Aug 29 '13 at 08:39

This question is vague, but if you want to make the image with Javascript. It is simple.

function loadImages(src) {
  if (document.images) {
    img1 = new Image();
    img1.src = src;
}
loadImages("image.jpg");

The image will be requested but until you show it it will never be displayed. great for pre loading images you expect to be requests but delaying it until the document is loaded.

Example

score 2 · Answer 5 · answered Jun 15 '09 at 15:09

2

Try setting the style to display=none:

<img src="a.gif" style="display:none">

answered Jun 15 '09 at 15:09

karim79

339,989
67
413
406

How to create a hidden in JavaScript?

5 Answers5

Linked