Ok I have an issue

I have this css code in the head

Code:
    .refresh a {
 outline: none;/* get rid of dotted borders in FireFox */
 text-indent: -500px ;/* this move the text outside of the screen area */
 display:block;
 width:15px;
 height:15px;
 background: url("refresh.png") 0 0 no-repeat;
 }

 .refresh a:hover {
 background-position: -15px 0;
 }
</style>
This iframe

Code:
<iframe id="iframe1" src="http://www.google.com" border="0" style="border: 0px; width:476px; height: 197px; position:absolute; top:63px; left:2px;" name="iframe1"></iframe>
And this button

Code:
<div class="refresh" style="position:absolute; width: 15px; height: 15px; left: 43px; top: 1px;">
    <a href=OnClick"'frames['iframe1'].location.reload();'">refresh</a>
</div>

The problem is that I need that button to refresh whatever content is in the iframe onclick and still be able to use the rollover image button
But as it is now it does not function

Anyone have a solution?