Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.10.2009, 11:51
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Обхватить картинку
Привет.
<table height="131" border="1" cellpadding="5" cellspacing="0">
<tr><td width="257" align="center" valign="middle">
<div style="background-color:#0066FF; padding:3px; "><a href="">
<img src="img/plus.gif" width="23" height="23"></a></div></td>
</tr></table>

Имею большую ячейку таблицы и в ней посередине - картинка ( разных размеров вставляется). Задача - сделать рамку картинке по onMouseOver.
Свойством borderWidth картинки не могу манипулировать, т.к. картинка обернута в ссылку со всеми этими последствиями.
Div по ширине растягивается . Решил только обертыванием картинки в таблицу с одной ячейкой, но много получается html.
Что-то есть лучше? Может с дивом как-то?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 16.10.2009, 12:00
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

CSS:
a:hover img {
    border: 10px solid #f00;
}
Ответить с цитированием
  #3 (permalink)  
Старый 16.10.2009, 12:08
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Octane, в IE6 hover не пашет.
Ответить с цитированием
  #4 (permalink)  
Старый 16.10.2009, 12:12
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Для ссылок работает.
Ответить с цитированием
  #5 (permalink)  
Старый 16.10.2009, 12:30
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Сообщение от Octane Посмотреть сообщение
Для ссылок работает.
Пишу:
<style type="text/css">
a:hover img {
    border: 10px solid #f00;
}
</style>
...
<a href=""><img src="img/tir0.gif" width="113" height="70"></a>

В Opera и Mozilla все ОК, а в IE6 не появляется рамка.
Что делаю не так?
Ответить с цитированием
  #6 (permalink)  
Старый 16.10.2009, 12:41
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

<style type="text/css">
a:hover {
    zoom: 1;
}
a:hover img {
    border: 10px solid #f00;
}
</style>
...
<a href="#"><img src="img/tir0.gif" width="113" height="70"></a>
Только не надо щас говорить, какой плохой ИЕ6 и когда он наконец умрет. Все эти баги давно описаны, и если половина хабра их не знает, то это их проблема.

* Хабр здесь упомянут, как наибольшее сборище нытиков о ИЕ6.
Ответить с цитированием
  #7 (permalink)  
Старый 16.10.2009, 14:22
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Kolyaj, спасибо за информацию, буду знать. Да, так работает, но
изначально не хотел с ссылками, т.к. даже так - проблема. При наведении
курсора граница добавляется, а при убирании - исчезает - в итоге картинка
дергается (и с ней вся верстка), а я хочу чтобы обертка находилась вокруг
картинки и только цвет меняла. Остаюсь пока со своей табличкой...

P.S. На хабрах не бывали - какие-то они чудные - статью мол пиши.
Ответить с цитированием
  #8 (permalink)  
Старый 16.10.2009, 14:29
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от micscr
а я хочу чтобы обертка находилась вокруг
картинки и только цвет меняла
И в чем проблема? Ну меняйте только цвет рамки.
Ответить с цитированием
  #9 (permalink)  
Старый 16.10.2009, 14:38
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Если написать
a { border: 10px solid black; }
то работает как span - не вокруг картинки обводит.
Может есть
a:Антиhover {}
Ответить с цитированием
  #10 (permalink)  
Старый 16.10.2009, 14:45
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от micscr
a { border: 10px solid black; }
А что мешает a img {border: ...} написать?
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фоновую картинку поменять. Jurasmi Элементы интерфейса 11 08.10.2012 15:25
Как отразить картинку при помощи JS. 2dkott Элементы интерфейса 4 03.09.2009 22:51
Плавно убрать фоновую картинку. Jurasmi Prototype & script.aculo.us 1 05.08.2009 16:48
Как сделать ссылку картинку, которая изменяется при наводе курсора на неё? Кирилл Общие вопросы Javascript 2 10.03.2009 15:14
отобразить произвольную ссылку по клику на картинку dilly Общие вопросы Javascript 0 13.06.2008 07:13