I am needing help.

[Bigsease30]

Hello. I am new to the forum so hopfully I can make some friends here. I have a question regarding php/css image mouse overs. I have 3 images that I would like to change to a different image (same size) when someone hovers over it with there mouse. I will post the code I currently have below:

PHP:

Code: Select all

<div class="reg-btn"><a href="http://mysite.com" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/reg-btn.jpg" alt="" /></a></div>

<div class="invoice-btn"><a href="http://mysite.com" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/invoice-btn.jpg" alt="" /></a></div>

<div class="msg-btn"><a href="http://mysite.com/contact/" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/msg-btn.jpg" alt="" /></a></div>

CSS:

Code: Select all

.portal{float:left; background:url(../images/portal-bg.png) no-repeat; width:888px; height:66px; padding-top:36px; padding-left:65px;}

.reg-btn{float:left; width:241px; height:52px; margin-right:49px;}

.invoice-btn{float:left; width:241px; height:52px; margin-right:48px;}

.msg-btn{float:left; width:241px; height:52px;}

I want button #1 reg-btn.jpg to mouseover to reg-btn1.jpg
button #2 invoice-btn.jpg to mouseover to invoice-btn1.jpg
and button #3 msg-btn.jpg to mouseover to msg-btn1.jpg

If you think that you can help, please let me know.

Thanks
Bigsease30

[Bigsease30]

I figured it out. This is to anyone that may have the same question.

PHP CODE:

Code: Select all

<div class="reg-btn"><a href="http://mysite" target="_blank">&nbsp;</a></div>
<div class="invoice-btn"><a href="http://mysite/" target="_blank">&nbsp;</a></div>
<div class="msg-btn"><a href="http://mysite/" target="_blank">&nbsp;</a></div>

CSS CODE:

Code: Select all

.portal{float:left; background:url(../images/portal-bg.png) no-repeat; width:888px; height:66px; padding-top:36px; padding-left:65px;}

.reg-btn{float:left; width:241px; height:52px; margin-right:49px;}

.reg-btn a{display:block; background:url(../images/btn_patientreg.png) no-repeat; width:241px; height:55px;}

.reg-btn a:hover{background:url(../images/btn_patientreg_hover.png) no-repeat;}

.invoice-btn{float:left; width:241px; height:52px; margin-right:48px;}

.invoice-btn a{display:block; background:url(../images/btn_invoice.png) no-repeat; width:241px; height:55px;}

.invoice-btn a:hover{background:url(../images/btn_invoice_hover.png) no-repeat;}

.msg-btn{float:left; width:241px; height:52px;}

.msg-btn a{display:block; background:url(../images/btn_sendmsg.png) no-repeat; width:241px; height:55px;}

.msg-btn a:hover{background:url(../images/btn_sendmsg_hover.png) no-repeat;}