Форум Сайтостроение Веб-строительство

Наведение на рисунок-ссылку

12
Wonka
На сайте с 18.03.2008
Offline
135
Wonka
1068

Понимаю, что туплю, но все-таки уже пару дней голову себе ломаю :(

Делаю меню рисунками. То есть каждый рисунок (например главная.джпг) - ссылка. Я хочу чтобы при наведении мой рисунок изменялся на другой (главная1.джпг). Это не бэкграунд, повторюсь, рисунок - активная ссылка... Хотелось бы средствами цсс.

Если у кого-то под рукой есть ссылки, прошу помочь :)

Всем спасибо :)

Интересный сайт (http://itown.com.ua/) простаивает без дела (ЛС)...
El_grapaduro
На сайте с 01.09.2008
Offline
315
El_grapaduro
#1

Пардон, не внимательно прочел. Затер.

Антон Каленик
На сайте с 23.06.2008
Offline
130
Антон Каленик
#2

типа того: 

<a class="button" href="#"><img src="1x1tr.gif" width="100" height="100" alt="" /></a>

Код

a.button {

    width: 100px;

    height: 100px;

    background-image: url(button1.gif);

    background-position: top left;

    background-repeat: no-repeat;

    display: block;

}

a.button:hover {

    background-image: url(button2.gif);

}
Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#3

ul li {list-style: none;}
ul li a {
background: url(button1.gif) top left no-repeat; height: 20px;
}
ul li a:hover {
background: url(button1.gif) top left no-repeat; height: 20px;
}
<ul>
<li><a href="index.html" title="Главная"></a></li>
</ul>

Задать соотвтетственно свои отступы для ul и li ещё

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
Николай В.
На сайте с 07.09.2006
Offline
62
Николай В.
#4

Оптимиальное решение — это совместить две картинки в одну и использовать как бэкграунд с разным смещением (background-position). Если же использовать две картинки, то в IE возможен неприятный эффект, когда это чудо будет перезагружать изображения при каждом наведении.

Если использовать img-теги, то через :hover не получится. В этом случае единственное решение — JS.

Fizigr
На сайте с 10.04.2007
Offline
42
Fizigr
#5

Николай В., скинь пожалуйста в личку пример или здесь покажи - интересно.

Приглашаю в SeoWizard (http://www.seowizard.ru/r.DfNrcSfITj.php). Магазин посуды (http://don-art.ru/). Ручная работа. Семикаракорская керамика.
Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#6
Николай В.:
Оптимиальное решение — это совместить две картинки в одну и использовать как бэкграунд с разным смещением (background-position). Если же использовать две картинки, то в IE возможен неприятный эффект, когда это чудо будет перезагружать изображения при каждом наведении.

Если использовать img-теги, то через :hover не получится. В этом случае единственное решение — JS.

не понимаю почему не получится? я все сайты делаю так и все ок

О какой перезагрузке речь?

При этом можно задавать кроссбраузерную прозрачность и т.д.

Такие вещи только с помощью css делаются, для чего там ява не понятно. Разве что для первоначальной подзагрузки сделать. Но это уже не обязательно

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
Varkolak
На сайте с 03.06.2005
Offline
174
Varkolak
#7
Ткач:
не понимаю почему не получится? я все сайты делаю так и все ок
О какой перезагрузке речь?

покажите где у вас все норм?!!

IE6 не кэширует их! Это известная проблема!

Как надо делать:!

Код html 

<a href="">&nbsp;</a>

css код 


a {

text-decoration:none;

background:url(button.jpg) no-repeat top left;

display:block;

height:20px;

width:150px;

color:#ffffff;

}



a:hover {

text-decoration:none;

background-position:0 -20px;

}

Где button.jpg - это изображение в котором совмещены обычное состояние при наведении.

сверху 20px - это обычное состояние

внизу 20px - это при наведении

Пример такой картинки:

Еще плюс такого метода - получается меньше изображений (файлов) становится в 2 раза меньше, а так как ie грузит по 2 файла за раз (количество подключений), то это оч ускоряет загрузку сайта!

P.S. вот пример http://varkolak.ru/hover.html

html/css/js верстка и разработка сайтов на hostcms (хостцмс) - skype: varkolak1, тел: 89675012935, e-mail: anton.yurzanov@gmail.com
Николай В.
На сайте с 07.09.2006
Offline
62
Николай В.
#8

Пример на скорую руку

CSS

Картинка

Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#9

в подписи сайт, по моему методу сделаны кнопки, мне казалось что загружаются они повторно уже нормально, а для первого раза конечно нужно было сделать скриптовую подзагрузку.

Но ваш метод лучше конечно, тут я соглашусь и по весу тоже выигрыш идет.

Ну вот впринципе способов тут куча уже (по теме))

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
Wonka
На сайте с 18.03.2008
Offline
135
Wonka
#10

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

Меня смущает одна вещь, как я уже писал выше. Эта картинка - ссылка. То есть это не фон к ссылке, а просто ссылка-картинка. Если я задаю бекграунд, то как сделать ссылку?

Wonka добавил 06.12.2008 в 00:25

Антон Каленик, в Вашем случае в качестве 1x1tr.gif используется прозрачный рисунок? Иначе не понимаю :(

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий