Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2013, 15:23
Аспирант
Отправить личное сообщение для makc0993 Посмотреть профиль Найти все сообщения от makc0993
 
Регистрация: 23.01.2013
Сообщений: 53

Смена картинки с ссылкой при наведении мыши в таблице
Всем привет. Использовал такой код вне таблицы - работает отлично. Если же воспользоваться этим кодом в таблице, то изображения не накладываются друг на друга, а занимают место, как 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>
Ответить с цитированием
  #2 (permalink)  
Старый 17.02.2013, 15:32
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от makc0993
не накладываются друг на друга
С какого перепугу они должны накладываться?
img{
position: absolute;
top: 0;
left: 0;
}
вот так будут накладываться. И почему бы тогда не использовать
dispay: none, display:block;
И я тем более не понимаю почему не background: url(image.png) ?
Ответить с цитированием
  #3 (permalink)  
Старый 17.02.2013, 15:35
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

Последний раз редактировалось Deff, 17.02.2013 в 15:44.
Ответить с цитированием
  #4 (permalink)  
Старый 17.02.2013, 15:36
Аспирант
Отправить личное сообщение для makc0993 Посмотреть профиль Найти все сообщения от makc0993
 
Регистрация: 23.01.2013
Сообщений: 53

danik.js,

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

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


то изображение выходит из таблицы и получается каша.
Ответить с цитированием
  #5 (permalink)  
Старый 17.02.2013, 15:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Напишите как я Вам дал,
Ответить с цитированием
  #6 (permalink)  
Старый 17.02.2013, 15:41
Аспирант
Отправить личное сообщение для makc0993 Посмотреть профиль Найти все сообщения от makc0993
 
Регистрация: 23.01.2013
Сообщений: 53

Deff,

большое спасибо)
Ответить с цитированием
  #7 (permalink)  
Старый 17.02.2013, 15:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

В чем смысл этих извращений, не пойму?
<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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение картинки при наведении GUFRIP :3 Общие вопросы Javascript 4 12.03.2015 13:19
Увеличение картинки при наведении binx jQuery 6 17.09.2012 15:15
Подсвечивания региона (картинки) на карте при наведении на текстовое название Моряк Папай Элементы интерфейса 4 17.09.2011 21:17
Смена картинки в шапке при перезагрузки wcb-falcon Элементы интерфейса 12 13.07.2010 22:36
Смена контента из бд при наведении и подсветка. Madd Общие вопросы Javascript 3 05.07.2010 10:29