Can css link buttons?

[swdweb]

I have two buttons in my header. Basically, when one clicks, I'd like the other to disappear, while changing the information in an iframe - I'd like to use iframes in order to make the site appear seamless, but I'd like the buttons to act accordingly.

You can see the page here: <snip>

Currently the buttons don't do anything. I have all images and sections referring to my style.css and didn't know if it's possible to link these buttons in this way.

I currently don't have the page set up for iframes, but I'd like to change it to that before I build too much of the site. Please let me know if this is possible.

Here is the part of my code that refers to the header

<div id="topPan"><u>
 </u><img src="images/logo1.png" height="175" width="138" />
<ul>
<li class="home"><a href="marketing.html" target="_self"></a></li>
 </ul>
 <ul2>
<li class="bill"><a href="billing.html" target="_self"></a></li>
 </ul2>
</div>

/*----TOP PANEL----*/
#topPan{width:747px; height:120px; position:relative; margin:0 auto; padding:0px;}
#topPan img{width:138px; height:175px; position:absolute; top:30px; left:300px; z-index:100;}
#topPan ul{
width:298px;
height:32px;
position:absolute;
top:77px;
right:449px;
}
#topPan ul2{
width:298px;
height:33px;
position:absolute;
top:77px;
right:0px;
}
#topPan ul li{float:left; width:115px; height:32px; padding:0 0 0 1px;}
#topPan ul2 li{float:right; width:115px; height:32px; padding:0 1px 0 0;}
#topPan ul li a{
display:block;
width:115px;
height:32px;
background:url(marketing2.gif) 0 0 no-repeat transparent;
color:#ffa513;
font-size:11px;
font-weight:bold;
line-height:39px;
text-transform:uppercase;
text-align:center;
text-decoration:none;
}
#topPan ul2 li a{
display:block;
width:115px;
height:32px;
background:url(images/billing2.gif) 0 0 no-repeat transparent;
color:#ffa513;
font-size:11px;
font-weight:bold;
line-height:32px;
text-transform:uppercase;
text-align:center;
text-decoration:none;
}
#topPan ul li.home:hover{width:174px; height:33px; background:url(images/marketing2a.gif) 0 0 no-repeat transparent; color:transparent; text-decoration:none;}
#topPan ul2 li.bill a:hover{width:175px; height:34px; background:url(images/billing2a.gif) 0 0 no-repeat transparent; color:transparent; text-decoration:none;}
#topPan ul li.home {display:block; width:151px; height:34px; background:url(images/marketing2.gif) 0 0 no-repeat #ffa513; font-size:11px; font-weight:bold; line-height:32px; color:#000000; text-decoration:none; text-transform:uppercase; text-align:center;}
#topPan ul2 li.bill{display:block; width:151px; height:33px; background:url(images/billing2.gif) 0 0 no-repeat #ffa513; font-size:11px; font-weight:bold; line-height:32px; color:#000000; text-decoration:none; text-transform:uppercase; text-align:center;}
/*----/TOP PANEL----*/

Thank you for the help

[edited by: swa66 at 3:53 pm (utc) on April 7, 2009]
[edit reason] NO personal links please see ToS [/edit]

[swa66]

Short answer: no.

Anything that needs to interact with "click" is beyond CSS, try javascript instead

[swdweb]

Is there a way to add the javascript to trigger an event on images that are in my .css file? or will the js only work on images that are in my html file?