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!

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!

• javascript
• asp
• visibility
• onmouseover
• onmouseout

• 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 Commented Mar 17, 2016 at 17:26
• you can use style display:none as well – shreyansh Commented Mar 17, 2016 at 17:26

3 Answers 3

change visibility to hidden not none

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

}

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.

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