[sleepingfish]

I'm having some issues with rollover buttons and javascript rollovers:

Rollover buttons:
I'm using css background image replacement for the rollover buttons at the bottom left of the page. I've (hopefully) preloaded the rollover Gifs when the page loads, but they seem to take an age to appear on rollover, any ideas?

Javascript rollovers:
There is an area to the right of the buttons that displays text depending on what button you rollover. This works fine on IE but doesn't do squat in Mozilla, something wrong with my javascript me thinks, again, any ideas?

Here's the url

TIA

[oli]

rollover buttons work fine for me, ie 6.

[sleepingfish]

Hmmm, the buttons seem work fine in Opera, slowly in IE and very slowly in Mozilla, strange.

The bottom right box works fine in Opera & IE but just won't play ball in Mozilla, stranger.

[Stickman]

Put all the states in one image - no javascript and no preloading. All the cool kids do it.

There are loads of tutorials, including:
http://www.simplebits.com/archives/2...rollovers.html

[sleepingfish]

Cunning, Cheers Sticky I'll give that a go later. One step closer to the cool kidz.

Any inspirations regarding the bottom right box?

[smallbeer]

Originally Posted by sleepingfish

Any inspirations regarding the bottom right box?

Forget javascript altogether. You can do it using pure css. I'm at uni and can't find any good links atm. These might start you off...

http://www.meyerweb.com/eric/css/edge/popups/demo.html
http://www.meyerweb.com/eric/css/edge/popups/demo2.html

If you can wait til tomorrow I put something together for you.

Not wanting to sound like bill () but your code aint good.

 <div class="buttonTitleBack" id="SectionRolloverBack"> 
      <div id="blank"> 
        <p class="buttontitle">IDEAS ABOUT</p>
      </div>
      <div id="jhome"> 
        <p class="buttontitle">ME</p>
      </div>
      <div id="web"> 
        <p class="buttontitle">web + interface design</p>
      </div>
      <div id="video"> 
        <p class="buttontitle">3D, animation & video</p>
      </div>
      <div id="jprint"> 
        <p class="buttontitle">Print & Screen Design</p>
      </div>
    </div>

They definitely aren't paragraphs. It should be a list...

http://css.maxdesign.com.au/listamatic/index.htm

[sleepingfish]

Cheers Beer Man, a new day a new lesson in css!

Don't worry about sounding like Bill ! I'm happy to be told my code is bad when accompanied with advice/links.

[sleepingfish]

Ok, I can get images changing elsewhere when buttons are rolled over, but once I start putting the buttons inline it all gets fooked,and if I start using relative or absolute positioning for the buttons then the changing images start moving seeing as they're in the <a> tag.

It's all a big mess. Anyone know of any examples of what I'm trying to achieve (buttons that rollover and a seperate area that changes on hover states of the buttons). I can find button lists by the tonne, and the links from smallbeer show the images changing on button rollover, but I can't for the life of me find horizontal buttons that can do the same.

[sleepingfish]

test file here
All ok until I start to try and make the buttons go across horizontally.

[Stickman]

#links a {float: left;}

What happens?

[sleepingfish]

I fall to the ground and worship at the alter of the css guru god

How stupid do I feel now? Feel free to delete this post

[Bill Posters]

I fall to the ground and worship at the alter of the css guru god

Don't thank me. Thank Sticky

[Stickman]

No problem, fish. Live and learn etc.