onmouseover class 1 onmouseout class 2 Strange border.

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">
<a href="formularz.html">Descriptive text</a>
</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;
}