Hi

So normally I would always use text links/navigation but this time I thought I'd spice it up and use GRAPHICS!

Only problem is that sometimes when my cursor hovers over the navigation at the top or side (bottom-left), I sometimes get a pause where the image goes missing then appears again under the new hover state image.

Is there a way to bypass the pause/lag as I'm not keen on this.

http://tinyurl.com/no2b56

Thanks!

either your being too picky about minor details or your just not explaining it right...I don't notice any lag.

I'm pretty sure that's due to the website getting the hover image once you have hovered over the button. Before that there was no need for it and so unlike the rest of the page elements the hover image wasn't loaded with the initial page load. One solution is to use this method for flicker free rollovers:

http://www.elated.com/articles/css-rollover-buttons/

Another is to just call the hover image somewhere on the page and hide it using css:

<img src="hoverimagename.jpg" class="hidethisthing" />

.hidethisthing {
visibility: hidden;
}

Originally Posted by Brian07002

either your being too picky about minor details or your just not explaining it right...I don't notice any lag.

hmm I am being somewhat picky since it works well on my laptop which has a superior wireless card but on my pc (cheap wireless usb) there is a lag/flicker when cache is disabled as you hover your mouse over a button.

I realise it is loading the image from the server but I was wondering if there was some kind of flicker-proof/no JavaScript-preloader solution. If there isn't then I'll just leave it for now I guess..

Originally Posted by Towhid

I'm pretty sure that's due to the website getting the hover image once you have hovered over the button. Before that there was no need for it and so unlike the rest of the page elements the hover image wasn't loaded with the initial page load. One solution is to use this method for flicker free rollovers:

http://www.elated.com/articles/css-rollover-buttons/

Another is to just call the hover image somewhere on the page and hide it using css:

<img src="hoverimagename.jpg" class="hidethisthing" />

.hidethisthing {
visibility: hidden;
}

Yeah I think this might be the solution

I'll give it a try tomorrow and update the thread. Thanks for the link

There's another solution, no JS needed, called CSS Sprites - 1 image for multiple states, eliminates the load lag on hover:

http://css-tricks.com/css-sprites/

I prefer to use the CSS hide option for image-intense navigation. It usually forms in all browsers.

This link has helped me.

http://perishablepress.com/press/200...ut-javascript/

Again, JS is NOT necessary, and hiding things tends to be inacessible.

Hi all

Sorry. I didn't get the chance to test out the sprites/one-image system just yet as I was given a last-minute deadline but now that I'm back to this project I will test it out however I have discovered a serious issue which is that the image hovers and its link functionality don't work at all in IE8 default mode. It works when I go to compatibility mode.

I looked into it via search and tried different methods but STILL nothing!! I read how IE only allows a tags to have a hover state so I applied a class to this here;

webpage: http://tinyurl.com/no2b56
CSS: http://tinyurl.com/mtnnou

on the webpage; the sidetabs at the bottom left have the HTML code of;

<a class="kickboxing" href="kickboxing.html" title="Kickboxing">Kickboxing</a>     
<a class="muaythai" href="muay_thai.html" title="Muay Thai">Muay Thai</a>     
<a class="taichi" href="tai_chi.html" title="Tai Chi">Tai Chi</a>     
<a class="closecombat" href="close_combat.html" title="Close Combat">Close Combat</a>     
<a class="treatmentrooms" href="treatment_rooms.html" title="Treatment Rooms">Treatment Rooms</a>     
<a class="yoga" href="yoga.html" title="Yoga">Yoga</a>     
<a class="upcoming_events" href="upcoming_events.html" title="Upcoming Events">Upcoming Events</a>

CSS for it is

.kickboxing {
    background-image:url(images/ly_nv_kickboxing.gif);
    background-repeat:no-repeat;
    width: 179px;
    height: 37px;
    display:block;
    text-indent:-5000px;
}

.kickboxing:hover{
    background-image:url(images/ly_nv_kickboxing_hvr.gif);
    background-repeat:no-repeat;
}

Now the top navigation has a UL LI - so they're both using different HTML tags but same CSS styling however neither work as a link/hover in IE8. I also tried DIVs. The only way I am sure would work is the img tag but I prefer to use UL LIs.

any ideas what I could do?

it works fine in every other browser. !

Thanks!