4

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!

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

3 Answers 3

4

change visibility to hidden not none

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

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

1
  • 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 Mar 17, 2016 at 18:22
0

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

1
  • ok, Thanks! but it work only without the Atributes Visible="false", also tried to changed at !ispostback, but it is not working... Mar 17, 2016 at 18:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.