Rollover very slow

Question

I just published my new website but I have just a little problem to solve. I'm absolutely self taught when it comes to web design.

As you can see here http://www.thisisfed.com the rollovers are really slow, is there a way to solve this anyhow?

I used a simple toggle javascript

  [...] onmouseover="toggle_visibility('id');" onmouseout="hide('id');"

And this is how the javascript works

 function toggle_visibility(id) {

   var e = document.getElementById(id);

   if(e.style.visibility == 'hidden')
      e.style.visibility = 'visible';
   else
      e.style.visibility = 'hidden';

   }

Thanks for any help.

Fed.

Answer 1

It's not slow. The images are being shown the second time you rollover the titles, that's because when you rollover the first time there is no inline style and it's going to your "else" option of your "if" statement (where you hide the image).

As someone pointed out already, there are a lot of things to improve in your code but in the meantime, you could add a default inline style for your images, to be hidden, and then update your toggle_visibility and hide functions to be:

 function toggle_visibility(id) {    
     var e = document.getElementById(id);
     if (e.style.visibility == 'hidden') e.style.visibility = 'visible';
     else e.style.visibility = 'hidden';

 }

 function hide(id) {
     var e = document.getElementById(id);
     if (e.style.visibility == 'visible') e.style.visibility = 'hidden';
     else e.style.visibility = 'visible';
 }

Fiddle demo here.