onmouseover class 1 onmouseout class 2 Strange border. - css

Question

I'm trying to make a link image.
everything works with link but when I add a 2nd image to show when hover - then a strange border shows around it. Any ideas how to avoid the border?
I cant add a pics here so look here:
http://postimg.org/image/7q0jkc99t/
in html:
<div id="Oobj14">
<a href="formularz.html"><img id="Ggeo9" class="przed" onmouseover="this.className='po'"
onmouseout="this.className='przed'" alt=""></div>
in css:
.przed{
background: url('image/dolacz.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
.po{
background: url('image/dolacz2.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
and for the image:
#Oobj14 {
position: absolute;
font-size: 10px;
z-index: 13;
left: 43.20em;
top: 40.70em;
width: 143px;
height: 56px;
border-style: none;
}
img#Ggeo9 {
width: 100%;
height: 100%;
opacity:1.0;

Answer 1

Why use javascript at all? I'd throw away the images and simply use backgrounds. Use CSS :hover to switch to another background
HTML:
<div id="Oobj14">
Descriptive text
</div>
CSS:
#Oobj14 a {
position: absolute;
font-size: 10px;
z-index: 13;
left: 43.20em;
top: 40.70em;
width: 143px;
height: 56px;
border-style: none;
overflow:hidden;
text-indent:-2000px;
}
#Oobj14 a {
background: url('image/dolacz.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
#Oobj14 a:hover {
background: url('image/dolacz2.png') no-repeat;
}