Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Обхватить картинку (https://javascript.ru/forum/xhtml-html-css/5456-obkhvatit-kartinku.html)

micscr 16.10.2009 11:51

Обхватить картинку
 
Привет.
<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.
Что-то есть лучше? Может с дивом как-то?
Спасибо.

Octane 16.10.2009 12:00

CSS:
a:hover img {
    border: 10px solid #f00;
}

micscr 16.10.2009 12:08

Octane, в IE6 hover не пашет.

Octane 16.10.2009 12:12

Для ссылок работает.

micscr 16.10.2009 12:30

Цитата:

Сообщение от Octane (Сообщение 32523)
Для ссылок работает.

Пишу:
<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 не появляется рамка.
Что делаю не так?

Kolyaj 16.10.2009 12:41

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

micscr 16.10.2009 14:22

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

P.S. На хабрах не бывали - какие-то они чудные - статью мол пиши.:)

Kolyaj 16.10.2009 14:29

Цитата:

Сообщение от micscr
а я хочу чтобы обертка находилась вокруг
картинки и только цвет меняла

И в чем проблема? Ну меняйте только цвет рамки.

micscr 16.10.2009 14:38

Если написать
a { border: 10px solid black; }
то работает как span - не вокруг картинки обводит.
Может есть
a:Антиhover {} :)

Kolyaj 16.10.2009 14:45

Цитата:

Сообщение от micscr
a { border: 10px solid black; }

А что мешает a img {border: ...} написать?


Часовой пояс GMT +3, время: 01:09.