Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 23596
  • Last Modified:

How to make an img tag item visible/invisible in display HTML

I am using an img tag in html that I want to not be visible when the page loads (that part works)

But I want to programatically make it show up and am apparently doing something wrong because the code
executes (I have an alert before and after) but the image does not show up...

Perhaps some kind of syntax error?


make invisible

<div style="position:absolute; left: 210px; top: 90px;" >
<img name="addtag" id="addtag" style="display:none";  src="jpg/AddTagGreenUp.jpg"
                                 onclick="return ModalPopUp('AddTag.htm')">
</div>


make visible?
 alert('b4');
      document.getElementById('addtag').display = 'block';
      alert('aft');
   
0
smmsmm57
Asked:
smmsmm57
  • 3
  • 3
  • 2
  • +2
4 Solutions
 
Bill-HansonCommented:
The location of the "display" property is different for different browsers.  Try this:

var obj = document.getElementById('addtag');
var style = obj.style ? obj.style : obj;
style.display = 'block';
0
 
ThinkPaperIT ConsultantCommented:
hmm i've never tried it with imgs.. but divs..

<div  name="addtag" id="addtag"  style="position:absolute; left: 210px; top: 90px; display:none" ><img src="jpg/AddTagGreenUp.jpg" onclick="return ModalPopUp('AddTag.htm')"></div>

<script language="javascript">
      alert('b4');
      document.getElementById('addtag').display = 'block';
      alert('aft');
</script>

but if img works.. you have a ; after the "display:none" which may have messed it a bit.

<img name="addtag" id="addtag" style="display:none;"<--RIGHT HERE!!!src="jpg/AddTagGreenUp.jpg" onclick="return ModalPopUp('AddTag.htm')">


0
 
smmsmm57Author Commented:
This site is worth every penny of what I pay for it! Thanks MUch....
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
kbqwertCommented:
You're missing "style", try the following:

document.getElementById('addtag').style.display = 'block';
0
 
Michel PlungjanIT ExpertCommented:
1. display is style.display in IE, FF and Mozilla
2. Semicolon is ok in a style attribute
3. kbqwert answered the question correctly although Bill's solution worked by default
0
 
Bill-HansonCommented:
kbqwert:
Did you read any posts?  That was my first suggestion.
0
 
Michel PlungjanIT ExpertCommented:
Erm Bill: Your post was not obvious since I for one cannot think of a browser that uses
obj.display instead of obj.style.display
0
 
Bill-HansonCommented:
I don't remember.  It was a long time ago.  Probably one of the older browsers.
0
 
ThinkPaperIT ConsultantCommented:
>>Semicolon is ok in a style attribute
i know that.. just wasn't sure if a semicolon outside the style attribute would mess it up. =P
i.e. "display:none";
0
 
Michel PlungjanIT ExpertCommented:
Ahh, missed that. No it won't
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now