How to change image visibility in JavaScript?

Question

I tried this, with no success :

JS :

function Hide() {
    alert('Hide');
    document.getElementById('I').style.visibility = 'none';

}

function show() {
    alert('Show');
    document.getElementById('I').style.visibility = 'visible';

}

Code Behind :

<asp:LinkButton ID="LinkButton1" onmouseover="show()" onmouseout="Hide()" runat="server">Mouse Here</asp:LinkButton>

<asp:Image Visible="false" ImageUrl="~/Images/V.png" ID="I" runat="server" />

I added the alerts just to check if this active the function, and it is.

any suggestions?

Thanks!

`display: none` if you want the element to not take up space. `visiblity: hidden` for if you still want the element to take up the space. Looks like you're mixing the two. — James, Mar 17 '16 at 17:26

score 4 · Answer 1 · answered Mar 17 '16 at 17:24

4

change visibility to hidden not none

function Hide() {
    alert('Hide');
    document.getElementById('I').style.visibility = 'hidden';

}

answered Mar 17 '16 at 17:24

Munawir

3,346
9
33
51

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

While Munawir's post correct and answer your question, IMO it's better to use display instead when you want to show/hide elements it's more efficient for this purpose.

display:none means that element will not appear on the page at all, There will be no space allocated for it.

visibility:hidden the element is not visible, but space is allocated for it on the page.

Example :

function Hide() {
    alert('Hide');
    document.getElementById('I').style.display = 'none';
        
}

function show() {
    alert('Show');
    document.getElementById('I').style.display = 'block';
       
}

Hope this helps.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 17 '16 at 17:29

Zakaria Acharki

66,747
15
75
101

ok, Thanks! but it work only without the `Atributes Visible="false"`, also tried to changed at !ispostback, but it is not working... And I need that the page will start when I can't see the image. I also have problem when the page is connected to a `MasterPage` – Sportalcraft Mar 17 '16 at 18:22

score 0 · Answer 3 · answered Mar 17 '16 at 17:30

Your code

document.getElementById('I').style.visibility = 'none';

Is wrong it should be

document.getElementById('I').style.visibility = 'hidden';

Also remember, setting element visibility to hidden will hide the element but still occupy space on the screen,

If you don't want the element to occupy space when hidden, then you must use display :none;

document.getElementById('I').style.display = 'none';

Then you can make it visible using

document.getElementById('I').style.display = 'block';

ok, Thanks! but it work only without the `Atributes Visible="false"`, also tried to changed at `!ispostback`, but it is not working... — Sportalcraft, Mar 17 '16 at 18:00

How to change image visibility in JavaScript?

3 Answers3