Смена картинки с ссылкой при наведении мыши в таблице

[makc0993]

Всем привет. Использовал такой код вне таблицы - работает отлично. Если же воспользоваться этим кодом в таблице, то изображения не накладываются друг на друга, а занимают место, как 2 отдельных изображения. Можно ли как-то наложить их друг на друга?
onmouseover onmouseout не пользуюсь, т.к в хроме этот вариант тормозит.

<style>
  .demoIMG { 
    position:relative; 
    margin:0 auto; 
  }  
  
  .demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
  
  .demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);}
  
  .demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
  .demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}  
</style>

<a class="demoIMG" href="#" 
<img class="novisible" src="1/012_black16.png" />
<img class="visible" src="1/012_black15.png" />
</a>

[danik.js]

не накладываются друг на друга

С какого перепугу они должны накладываться?
img{
position: absolute;
top: 0;
left: 0;
}
вот так будут накладываться. И почему бы тогда не использовать
dispay: none, display:block;
И я тем более не понимаю почему не background: url(image.png) ?

[Deff]

<style>
  .demoIMG { 
    position:relative; 
    margin:0 auto; 
  }  
    .demoIMG  img.novisible{ 
    position:absolute; 
  } 
  .demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
  
  .demoIMG:hover img.novisible{opacity:1.0;filter:alpha(opacity=100);}
  
  .demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
</style>

<table width=40% border="1"><tr align="center"><td >

<a class="demoIMG" href="#">
<img class="novisible" src="http://javascript.ru/forum/images/smilies/tongue.gif" />
<img class="visible" src="http://javascript.ru/forum/images/smilies/yes4.gif" />
</a>

</td>
<td>

<a class="demoIMG" href="#">
<img class="novisible" src="http://javascript.ru/forum/images/smilies/tongue.gif" />
<img class="visible" src="http://javascript.ru/forum/images/smilies/yes4.gif" />
</a>

</td>
</tr></table>

[makc0993]

danik.js,

ах да забыл, извиняюсь. так вот если использовать

img{
position: absolute;
top: 0;
left: 0;
}

то изображение выходит из таблицы и получается каша.

[Deff]

Напишите как я Вам дал,

[makc0993]

Deff,

большое спасибо)

[danik.js]

В чем смысл этих извращений, не пойму?

<style>
  .demoIMG {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(//javascript.ru/forum/images/smilies/yes4.gif) no-repeat;
  } 
  .demoIMG:hover{
    background: url(//javascript.ru/forum/images/smilies/tongue.gif) no-repeat;
  }
</style>
 
<a class="demoIMG" href="#"></a>