CSS rollover flicker

CkretAjint · 05-07-2009, 12:47 AM

Because the image has to load before it can be shown. Once loaded, it is cached thus no more flicker.

hewligan · 05-07-2009, 12:50 AM

^^What Ckret said.

You can try to solve it using CSS sprites: http://css-tricks.com/css-sprites/

calebm12 · 05-07-2009, 02:11 AM

is there a way to do it without sprites?

hewligan · 05-07-2009, 02:31 AM

Yes. But the way with sprites is better.

The alternative is to use Javascript to preload images.

tZ · 05-07-2009, 03:54 AM

Best to use a sprite. javascript would just make the entire thing more complex then it really needs to be.

You should be using CSS rather then javascript for your navigation menu rollovers. Furthermore, a unordered list is more appropriate then divs to mark-up the nav menu.

HTML Code:

  <div id="button1"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/home2.png',1)"></a></div>
  <div id="button2"><a href="more.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('More','','images/more2.png',1)"></a></div>
  <div id="button3"><a href="view.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('View','','images/view2.png',1)"></a></div>
  <div id="button4"><a href="talk.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Talk','','images/talk2.png',1)"></a></div>

tZ · 05-07-2009, 04:04 AM

The more semantic way to set-up the main nav:

HTML Code:

<ul id="nav-main">
	<li class="home"><a href="index.html" title="home">Home</a></li>
	<li class="more"><a href="more.html" title="more">More</a></li>
	<li class="view"><a href="view.html" title="view">View</a></li>
	<li class="talk"><a href="talk.html" title="talk">Talk</a></li>
</ul>

The image rollovers should then be applied using the sprite technique as discussed above. There is no need to use javascript for the rollover effect.

calebm12 · 05-07-2009, 02:31 PM

tz

would nav-main hold the background of the tabs? and then each class id would hold the background of the letter....would the li class have a hover class containign the alternate background? will check out sprites more when i get home tongiht?

is anyone having probs viewing the page. its really gets screwed up in IE6.....all the text gets moved down the page....off the white part.....cant figure out why.

tZ · 05-07-2009, 07:39 PM

No, you create one large image that will be applied as a background to the anchors. Then you change the backgrounds vertical position on the different states (link,visited,active and hover).

CSS rollover flicker

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment