Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как менять изображение, включенное в ссылку? / 8 сообщений из 8, страница 1 из 1
05.12.2008, 14:45
    #35696328
kasyanov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как менять изображение, включенное в ссылку?
Помогите! Нигде не могу найти примера.
Дело в том , что ссылки оформлены в виде
<A class="sublinks" NAME="NewsArchive" HREF="."><img border="0" src="images/arrow.jpg" width="8" height="7">Архив новостей</A><br/>
То есть сылка представляет собой маленькую картинку и следующуюю за ней надпись.

При наведении на ссылку нужно, чтобы ее цвет менялся. Понятно, что это легко сделать через CSS:
A.sublinks:hover {color: #FFFFFF; text-decoration: none}.
Но надо также, чтобы при этом еще менялся цвет картинки, то есть менялась картинка, тоже на беленькую.
Причем не только при наведении на саму картинку (на этот счет примеры есть в сети), а при наведении на ссылку в любом ее месте (и в области картинки, и в области текста).

Очень надо. Заранее благодарен за помощь!
...
Рейтинг: 0 / 0
05.12.2008, 15:04
    #35696385
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как менять изображение, включенное в ссылку?
А если положить картинку в бэкграунд и на ховер менять бэкграунд?
...
Рейтинг: 0 / 0
05.12.2008, 15:49
    #35696552
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как менять изображение, включенное в ссылку?
Да, Серж прав: в бекграунд кладешь картинку, для ссылки указываешь display как block и регулируешь высоту расположения текста свойством line-height (в пикселах). А в ховере меняешь картинку (и цет бека, если надо).
...
Рейтинг: 0 / 0
05.12.2008, 18:05
    #35697014
kasyanov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как менять изображение, включенное в ссылку?
Вроде сделал все, но картинки в бекграунде не вижу вообще :(
Наверное торможу где-то.

Кусок хтмл:
<A class="sublinks" NAME="NewsArchive" HREF=".">Архив новостей</A><br/>
<A class="sublinks" NAME="History" HREF=".">История</A><br/>

Кусок стилей:

A.sublinks {
font-size: 13px;
display: block;
background-image: url(images/arrow.jpg);
/*background-position: 0 0;*/
background-position: 0px 0px;
line-height: 0.3;
}

A.sublinks:link {color: #90C8FF}
A.sublinks:visited {color: #90C8FF}
A.sublinks:active {color: #90C8FF}

A.sublinks:hover {
color: #FFFFFF;
text-decoration: none;
display: block;
background-image: url(images/arrow.jpg);
}
...
Рейтинг: 0 / 0
05.12.2008, 18:27
    #35697058
Ренат
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как менять изображение, включенное в ссылку?
лайн хеиг допиши пиксели
поробуй имя бакграунда в кавычки
зы. а так вроде все норм на вид
...
Рейтинг: 0 / 0
05.12.2008, 18:50
    #35697126
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как менять изображение, включенное в ссылку?
надо у ссылки в свойствах padding-left выставить, чтоб текст на картинку не наезжал
...
Рейтинг: 0 / 0
05.12.2008, 19:33
    #35697206
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как менять изображение, включенное в ссылку?
Ага, тормозишь ...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<a class="sublinks" href=".">Архив новостей</a>
<a class="sublinks" href=".">История</a>

.sublinks {
    font-size: 13px;
    display: block;
    background: url("../images/arrow.jpg") no-repeat 0px 0px;
    line-height: 10px;
    width: XXpx;
    height: XXpx;
}
.sublinks:link {color: #90C8FF}
.sublinks:visited {color: #90C8FF}
.sublinks:active {color: #90C8FF}
.sublinks:hover {
    color: #fff;
    text-decoration: none;
    background: url("../images/arrow.jpg") no-repeat 0px 0px;
}

Ряд "нюансов":
- из файла css надо указывать относительный корню путь к имиджам;
- line-height идет в целочисленных пикселах;
- background можно указывать целиком;
- для блочной ссылки желательно (не буду говорить обязательно, хотя подразумеваю) указать размеры;
- как ни парадоксально, отработка a.sublinks происходит в несколько раз медленнее (!), чем .sublinks (только на днях прочитал статистику);
- так как теперь ссылка - блочный элемент, перевод строки необязателен (разве что по дизайну).
...
Рейтинг: 0 / 0
06.12.2008, 11:39
    #35697617
kasyanov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как менять изображение, включенное в ссылку?
Большое спасибо!
Все заработало.
Никогда раньше не занимался дизайном - а тут пришлось срочно.
Ошибкой было использование <br> вместе с блоками. Из-за этого пришлось делать меньше единицы значение line-height, что привело к затиранию части картинки <br>-ами, у которых стиль по умолчанию.
А по началу действительно не находила рисунков, я думал что путь в css никак не отличается от относительного пути в самом html.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как менять изображение, включенное в ссылку? / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]