Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!






#1 16.04.2013 14:37

TanЁ4ek
Новичок
Зарегистрирован: 16.04.2013
Сообщений: 3

Оформление ссылок с фоновым изображением

Все здравствуйте!
Прошу вашей помощи или ссылки на решение следующей задачи:
нужно чтобы при наведении у ссылки появлялся фон в виде картинки. Не в виде background-color, а именно в виде background: url('imgs/a-active.png') no-repeat 0 0. Это свойство использую в навигации в хедере. Но вся сложность в том, что ширина этой картинки должна меняться. Н-р, для ссылки ФОТО и ссылки КАТАЛОГ ПРОДУКЦИИ, картинка то сужается, то расширяется. Как это организовать?
заранее благодарю :-)  и с нетерпением жду ответа!

Нет на форуме

 

#2 16.04.2013 15:04

Lesh
Разбирающийся
Откуда: Москва
Зарегистрирован: 02.09.2011
Сообщений: 60
Вебсайт

Re: Оформление ссылок с фоновым изображением

Если я правильно понял вопрос, то решить это можно спрайтом из отдельных картинок (возможно, уже с текстом) под каждый пункт навигации.

Может быть, не ширина картинки должна меняться (что с картинкой станет в таком случае, это типа взять логотип яндекса и растянуть его процентов на 200?), а фоновое изображение должно повторяться по ширине? тогда background-position: repeat-x поможет.


Мы разрабатываем ПО

Нет на форуме

 

#3 16.04.2013 15:22

TanЁ4ek
Новичок
Зарегистрирован: 16.04.2013
Сообщений: 3

Re: Оформление ссылок с фоновым изображением

у картинки правый и левый бока закруглены, а центр поворяется... где то когда то я встречала такие картинки, сейчас я попытаюсь объяснить как они выглядят....  допустим высота кнопки 20px, так вот картинка для этой кнопки высотой 40px: левый закругленный бок продолжается длинным центорм картини(высота этой части 20px), а НИЖЕ прижатый к правому краю правый закругленный бок тоже высотой 20px, и того картинка получается 40px, но пользователь видит собранную картинку в 20px высотой. делается это как то типо background: url('') no-repeat 100% -20px; а как конкрето незнаю....
p.s. как в форум картинку вставлять?)))

Нет на форуме

 

#4 16.04.2013 15:48

Lesh
Разбирающийся
Откуда: Москва
Зарегистрирован: 02.09.2011
Сообщений: 60
Вебсайт

Re: Оформление ссылок с фоновым изображением

Ага, ясно, эта техника называется "раздвижные двери". Делается, например, так: http://habrahabr.ru/blogs/webdev/31490/

upd: вот еще подборка по подобным технологиям: http://habrahabr.ru/blogs/webdev/29188/

Отредактированно Lesh (16.04.2013 15:54)


Мы разрабатываем ПО

Нет на форуме

 

#5 16.04.2013 15:56

TanЁ4ek
Новичок
Зарегистрирован: 16.04.2013
Сообщений: 3

Re: Оформление ссылок с фоновым изображением

Спасибо, большое!!! буду разбираться))))

Нет на форуме

 

Board footer