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

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/

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) no-repeat 0px 0px;
}

a.rollover1:link
{
background:url(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) no-repeat 0px 0px;
}
a.rollover:active
{
background:url(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) no-repeat 0px 0px;
}

a.rollover2:link
{
background: url(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) no-repeat 0px 0px;
}

a.rollover2:active
{
background: url(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) no-repeat 0px 0px;
}

a.rollover3:link
{
background: url(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) 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) no-repeat 0px 0px;
}

a.rollover4:link
{
background: url(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) no-repeat 0px 0px;
}
a.rollover4:active
{
background: url(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) no-repeat 0px 0px;
}

a.rollover5:link
{
background: url(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) no-repeat 0px 0px;
}
a.rollover5:active
{
background: url(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) no-repeat 0px 0px;
}

a.rollover6:link
{
background: url(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) no-repeat 0px 0px;
}
a.rollover6:active
{
background: url(http://www.cafedoom.com/images/f2_onyx_tabs_06-f2_onyx_tab.jpg) no-repeat 0px 0px;
}