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

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Смена картинки с ссылкой при наведении мыши в таблице (https://javascript.ru/forum/dom-window/35657-smena-kartinki-s-ssylkojj-pri-navedenii-myshi-v-tablice.html)

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

Всем привет. Использовал такой код вне таблицы - работает отлично. Если же воспользоваться этим кодом в таблице, то изображения не накладываются друг на друга, а занимают место, как 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>

Цитата:

Сообщение от makc0993

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

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

<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>

danik.js,

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

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

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

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

Deff,

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

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

<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>