Title: Button array – image rollovers
Last modified: August 18, 2016

---

# Button array – image rollovers

 *  [blunted](https://wordpress.org/support/users/blunted/)
 * (@blunted)
 * [20 years, 8 months ago](https://wordpress.org/support/topic/button-array-image-rollovers/)
 * Hi all.
 * I’m trying to change my site over to using WordPress as a layout, instead of 
   html documents – should make it easier to update/search, etc., in the long run.
   I’ve started adapting one of the templates, but I’m stuck with the button rollovers.
   On the original site, I was using Javascript rollovers but, from past experience,
   javascript is a problem inside a PHP page, plus a lot of people disable it, so
   I thought I’d switch over to using CSS.
 * I’ve got the CSS version of rollovers to work in a test version, on its own, 
   here – [http://www.cafedoom.com/css_rollover_attempt.html](http://www.cafedoom.com/css_rollover_attempt.html)
 * But it doesn’t seem to make any difference what I do, within the header template
   and the stylesheet, everything I’ve tried fails to make it work in WordPress –
   [http://www.cafedoom.com/wordpress/](http://www.cafedoom.com/wordpress/)
 * I’ve tried swapping ‘class’ for ‘id’, and I’ve tried loads of other things too,
   but nothing works. The simple solution, I think, would be to link to the stylesheet
   from the header, but I’m no good at PHP, so my attempts at doing that didn’t 
   work either.
 * Any advice would be much appreciated, before I tear the rest of my hair out. 
   Thanks in advance.
 * Here’s some of my code –
 * `
    <div id="masthead" onclick="location.href='<?php bloginfo('url'); ?>';" style
   ="cursor: pointer;"> </div> <div id="buttons"> <div> <a id="rollover1" href="
   http://www.cafedoom.com/index.html"></a></div> <div> <a id="rollover2" href="
   http://www.cafedoom.com/tales.html"></a></div> <div> <a id="rollover3" href="
   http://www.cafedoom.com/art.html"></a></div> <div> <a id="rollover4" href="http://
   www.cafedoom.com/fun.html"></a></div> <div> <a id="rollover5" href="http://www.
   cafedoom.com/forum/index.php"></a></div> <div> <a id="rollover6" href="http://
   www.bsmuv.com/radio_chat.html"></a></div> </div>
 * In the CSS –
 * `
    #buttons { width: 780px; height: 41px; border: none; padding: 0px; margin:
   0px; background: #000000; }
 * #rollover1
    { float: left; width: 119px; height: 41px; border: none; padding:
   0px; margin: 0px; background: url([http://www.cafedoom.com/images/f2_onyx_tabs_01.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_01.jpg))
   no-repeat 0px 0px; }
 * a.rollover1:link 
    { background:url([http://www.cafedoom.com/images/f2_onyx_tabs_01.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_01.jpg))
   no-repeat 0px 0px; } a.rollover:hover { background:url([http://www.cafedoom.com/images/f2_onyx_tabs_01-over.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_01-over.jpg))
   no-repeat 0px 0px; } a.rollover:active { background:url([http://www.cafedoom.com/images/f2_onyx_tabs_01-over.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_01-over.jpg))
   no-repeat 0px 0px; }
 *  #rollover2
    { float: left; width: 138px; height: 41px; border: none; padding:
   0px; margin: 0px; background: url([http://www.cafedoom.com/images/f2_onyx_tabs_02.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_02.jpg))
   no-repeat 0px 0px; }
 * a.rollover2:link 
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_02.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_02.jpg))
   no-repeat 0px 0px; }
 * a.rollover2:hover
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_02-f2_onyx_tab.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_02-f2_onyx_tab.jpg))
   no-repeat 0px 0px; }
 * a.rollover2:active
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_02-f2_onyx_tab.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_02-f2_onyx_tab.jpg))
   no-repeat 0px 0px; }
 * #rollover3
    { float: left; width: 159px; height: 41px; border: none; padding:
   0px; margin: 0px; background: url([http://www.cafedoom.com/images/f2_onyx_tabs_03.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_03.jpg))
   no-repeat 0px 0px; }
 * a.rollover3:link 
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_03.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_03.jpg))
   no-repeat 0px 0px; }
 * a.rollover3:hover
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_03-f2_onyx_tab.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_03-f2_onyx_tab.jpg))
   no-repeat 0px 0px; }
 * #rollover4
    { float: left; width: 91px; height: 41px; border: none; padding: 
   0px; margin: 0px; background: url([http://www.cafedoom.com/images/f2_onyx_tabs_04.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_04.jpg))
   no-repeat 0px 0px; }
 * a.rollover4:link 
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_04.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_04.jpg))
   no-repeat 0px 0px; }
 * a.rollover4:hover
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_04-f2_onyx_tab.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_04-f2_onyx_tab.jpg))
   no-repeat 0px 0px; } a.rollover4:active { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_04-f2_onyx_tab.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_04-f2_onyx_tab.jpg))
   no-repeat 0px 0px; }
 * #rollover5
    { float: left; width: 138px; height: 41px; border: none; padding:
   0px; margin: 0px; background: url([http://www.cafedoom.com/images/f2_onyx_tabs_05.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_05.jpg))
   no-repeat 0px 0px; }
 * a.rollover5:link 
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_05.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_05.jpg))
   no-repeat 0px 0px; }
 * a.rollover5:hover
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_05-f2_onyx_tab.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_05-f2_onyx_tab.jpg))
   no-repeat 0px 0px; } a.rollover5:active { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_05-f2_onyx_tab.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_05-f2_onyx_tab.jpg))
   no-repeat 0px 0px; }
 *  #rollover6
    { float: left; width: 135px; height: 41px; border: none; padding:
   0px; margin: 0px; background: url([http://www.cafedoom.com/images/f2_onyx_tabs_06.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_06.jpg))
   no-repeat 0px 0px; }
 * a.rollover6:link 
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_06.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_06.jpg))
   no-repeat 0px 0px; }
 * a.rollover6:hover
    { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_06-f2_onyx_tab.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_06-f2_onyx_tab.jpg))
   no-repeat 0px 0px; } a.rollover6:active { background: url([http://www.cafedoom.com/images/f2_onyx_tabs_06-f2_onyx_tab.jpg](http://www.cafedoom.com/images/f2_onyx_tabs_06-f2_onyx_tab.jpg))
   no-repeat 0px 0px; }

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Lorelle](https://wordpress.org/support/users/lorelle/)
 * (@lorelle)
 * [20 years, 8 months ago](https://wordpress.org/support/topic/button-array-image-rollovers/#post-248718)
 * First, we “frown” on long code submitted here. If we have a link to your site,
   we can see the CSS or if no site is available, please post a link to a pastebin
   site in the future.
 * There are a lot of resources on the Internet that will help you fix this. On 
   the WordPress Codex (the online manual) we have help and resources at [Creating Horizontal Menus](http://codex.wordpress.org/Creating_Horizontal_Menus)
   and [Dynamic_Menu_Highlighting](http://codex.wordpress.org/Dynamic_Menu_Highlighting)
   that will take you through the process step by step.
 * With the really long file names, there is a greater chance of messing things 
   up by a slipped letter, so I recommend that you 1) change these to relative links
   not absolute (`/images/button1.gif`) and 2) change the names to something very
   simple to make the process easier. 3) If you are changing from HTML to PHP, then
   be sure the pages linked have PHP extensions. If not, then leave it.
 * The two articles linked will help you through the very simple process of making
   this happen.
 *  Thread Starter [blunted](https://wordpress.org/support/users/blunted/)
 * (@blunted)
 * [20 years, 8 months ago](https://wordpress.org/support/topic/button-array-image-rollovers/#post-248726)
 * Well thanks for warning me about posting code – I saw code posted elsewhere in
   the forum and thought it was OK, plus there’s no mention of it below the reply
   window, where it tells you, “Put code in between `backticks`” which I did. There
   was no way to know, so please forgive me.
 * I looked through all the codex and several other resources before posting here,
   and it didn’t help. The tutorials are mainly on the subject of text rollovers
   where the colour of the background changes, rather than the background image.
   I wonder if any PHP gurus could help me link to a separate stylesheet, in the
   head, instead of me trying to incorporate the changes in the existing stylesheet?
 * As for the image names and target pages – these will change if and when I can
   get this thing working. For now, I’m using stuff that already exists and works,
   rather than reinventing the wheel and adding another variable, which could possibly
   confuse the issue.
 * Thanks for trying, anyway 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Button array – image rollovers’ is closed to new replies.

## Tags

 * [rollovers](https://wordpress.org/support/topic-tag/rollovers/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [blunted](https://wordpress.org/support/users/blunted/)
 * Last activity: [20 years, 8 months ago](https://wordpress.org/support/topic/button-array-image-rollovers/#post-248726)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics