Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Better method of making a rollover image header.

Old Mar 14, 2012, 01:33 PM
Dapizz's Avatar
15 posts · Mar 2012
Great British Isles

Recently I've been re-theming a website of mine and have run into the issue of rollover buttons. They're at the top of the page in the header inside a table. The dashes are just there as a guide for me, ignore them. The method I have always used is to have 2 separate images and to use JavaScript to switch them as the user hovers over them. The main issue, asides from not being able to fade them in/out (as far as I know), is that they tend to take a noticeable few milliseconds to load. This gives that unprofessional and undesirable delay effect I want to get rid of.

I have been through a selection of Google results and all I seem to come across is using CSS. I have tried doing this, using just one image and making the style slide it along to create the rollover effect. I have tried this to no avail. I put the relevant CSS in style.css in the Editor and then added divs to the header table with class="header-tw" (Twitter button) and other things the websites I used told me to add.

I'm just wondering if there's any way of making either the browser pre-load the images as the page loads (to eliminate the delay, I can live with no fade), to get the CSS working (any ideas?) or even another method. If possible I want to stay away from Flash under all circumstances as I wan't my blog to be universal device wise.

Thanks in advance.
Old Mar 14, 2012, 05:06 PM
lmilesw's Avatar
10,176 posts · Jul 2009
Central New York State USA
For rollover hovers I either use the advanced image function you can get with the TineMCE Advanced plugin or my current favorite was is to use the Hover Image plugin.
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
Old Mar 17, 2012, 02:22 PM
Dapizz's Avatar
15 posts · Mar 2012
Great British Isles
Thanks for the reply. I've tried out the plugins and the Hover Image plugin was not 3.3.1 compatible. The TinyMCE Advanced one seems like a cool plugin but it just a quick way of creating what I already have. I've decided to go for an entirely CSS approach with no images, but I value your input.


button, css, javascript, preload, rollover

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Rollover image with css in header lambdaka Header configuration & styling 2 Apr 10, 2010 11:41 AM
Suggestions Please! Need plugin to create rollover images for image map. kippiper Plugins & Atahualpa 0 Nov 15, 2009 04:30 PM
Rollover image not working in Internet Explorer 6 Masselyn Page & Category Menu Bars 0 Oct 12, 2009 11:25 AM
[SOLVED] Rollover Graphic in Header Whatsthatcat? Header configuration & styling 2 Sep 25, 2009 07:51 AM
How to add 2 link rollover buttons in horizontal header bar stevemitch2 Header configuration & styling 2 Jun 4, 2009 09:47 AM

All times are GMT -6. The time now is 10:49 PM.

Powered by vBulletin® Copyright ©2000 - 2023, Jelsoft Enterprises Ltd.