Сложный ролловер

[Singer]

Ребята подскажите как создать средствами CSS ролловер, состоящий из текстовой ссылки и картинки (тоесть из двух елементов), при наведении курсора на ссылку или картинку картинка должна менятся на другую и ссылка тоже должна менять цвет.

Возможно ли такое?

[s0rr0w]

Возможно ли такое?

Да

[Aleksandrid]

Да

а как?

[Singer]

Кто знает как напишите

[newенький]

Не совсем понял, что на что меняться должно, но здесь http://cssninja.ru/

видео по CSS sprites, возможно поможет

[Singer]

Что-то пита такого:

<a href="#">

<img src="pic.png">

</a>

<br>

<a href="#">Ссылка<a/>

При наведении курсора на картинку или ссылку, должна меняться картинка на другую картинку(ролловер) и ссылка должна менять свой цвет.

Помогите плиз

[s0rr0w]

Читать про :hover, background и display: inline-block

[Singer]

Раз никто не написал - значит это невозможно зделать, так я понимаю?

[Justnewone]

Раз никто не написал - значит это невозможно зделать, так я понимаю?

Это Вы типа настаиваете "выньте и положте мне готовое решение"?

[s0rr0w]

Раз никто не написал - значит это невозможно зделать, так я понимаю?

Думайте своей головой, ленивый вы наш.

[Zippovich]

Засуньте картинку в background, и меняйте его на здоровье при hover.

[Игорь Ермаков]

Да это невозможно, особенно для вас

А в 15-м веке тех учёных которые хотели создать средство передвижения превышающее скорость 50км/ч поднимали на смех.

Ладно сжалюсь:

http://htmlbook.ru/css/background.html

http://htmlbook.ru/css/hover.html

http://htmlbook.ru/css/active.html

Раз никто не написал - значит это невозможно зделать, так я понимаю?

Зделать это точно невозможно.

А как вы понимаете, решайте сами.

Edited July 23, 2009 by Игорь Ермаков

[Singer]

Как сделать ролловер ссылки или картинки знаю прекрасно. И сюда я не за этим пришел.

А как поступить в моем случае видимо никто не разобрался или не хотел просто напросто.

Сам я думаю, что в таком формате сделать, как я описал выше, невозможно. И похоже я прав

[AMD]

злостный оффтоп: могу и меню выпадающее на css сделать, пишите в личку, от 50$

[Игорь Ермаков]

То что вы описали в первом посте может реализовать тот кто более менее знает CSS/HTML вам наверное тупо лень поискать, и достичь цели, продолжайте прикрываться отговоркой, что это невозможно.

злостный оффтоп: могу и меню выпадающее на css сделать, пишите в личку, от 50$

Оффтоп ещё злостнее: то что на CSS не делается выпадающих меню и галерей миф.

Так что ТС учиться, учиться и ещё раз учиться.

[Singer]

То что вы описали в первом посте может реализовать тот кто более менее знает CSS/HTML

Так это форум для начинающих или я что-то перепутал?

[Игорь Ермаков]

Ничего не перепутали, но то что вы начинающий не значит, что за вас здесь сделают всё.

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

Погуглите на тему: CSS роловверы/меню и тп. Примеров в сети масса.

[Singer]

то что вы начинающий не значит, что за вас здесь сделают всё.

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

Погуглите на тему

Универсальный ответ на любую тему, не правда ли?

Так наверное можно отвечать на любой вопрос и уж точно не сделаешь ошибку, не находите?

Дальше прошу писать конкретно по теме

[Justnewone]

А можете сейчас показать то, до чего Вы дошли в изучении, на каком Вы этапе в исследованиях ролловера на бекграунде через ховер и смены цвета ссылки через него же? Покажите тестовые выкладки.

Я гляну и сразу Вам покажу, как сделать правильно.

Просто интересно, как глубоко Вы зашли?

По моему личному мнению, Вы его сами назвали сложным и теперь с предыханием смотрите как все мы "лажаемся" и не можем догнать, как же это воплотить, сцуко, такой сложнейший роловер....

И раз Вы говорите что "Как сделать ролловер ссылки или картинки знаю прекрасно. И сюда я не за этим пришел" тем более странно, что Вы до сих пор не сделали. Приведите побольше в ТЗ, может мы где-то Вас не услышали?

Edited July 24, 2009 by Justnewone

[Singer]

приведу упрощенный кусок кода:

...

a.mnuMain {

background-image: url("pic/mnu_main.png");

}

a:hover.mnuMain {

background-image: url("pic/mnu_main_h.png");

}

a.mnuTextMainLink {

color: #C6BD8D;

text-decoration: underline;

}

a:hover.mnuTextMainLink {

text-decoration: none;

color: #E69829;

}

...

<a href="index.html" title="Main" class="mnuMain"></a>

<br>

<a href="index.html" title="Main" class="mnuTextMainLink">

Главная

</a>

...

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

[Игорь Ермаков]

Реализуйте через списки.

Задавайте ховер для <li> и <a>

[Justnewone]

Все на самом деле очень просто. Я очень подробно распишу, хотя на самом деле нечего.

Во первых, лучше на A повесить не background-image, а background.

Тепрь, для того чтобы строчный элемент стал учитывать прямо или косвенно указания высоты (будь то height, или же padding, или же margin), его надо сделать блочным.

Вот Вам кроссбраузерное и так называемое "семантическое" решение.

HTML

<ul>

<li><a href="index.html" title="Main" class="mnuMain"></a></li>

.....

</ul>

CSS

UL, LI{

list-style:none;

padding:0;

margin:0;

}

LI A{

display:block;

padding:XXX; /* укажите такие размеры, чтобы с учетом паддингов картинка как раз вошла в периметр теперь уже блочной ссылки*/;

text-decoration: underline;

color:#XXXXXX;

}

LI A.mnuMain{

background: url("pic/mnu_main.png");

}

LI A.mnuMain:hover{

background: url("pic/mnu_main_h.png");

text-decoration: none;

color:#XXXXXX;

}

И так далее ховер на каждый класс.

Можно, например, воспользоваться спрайтами, совсем для идеального решения, поищите в гугле css sprites

Edited July 24, 2009 by Justnewone

[Singer]

Ну что же, могу резюмировать, что благодаря помощи участников форума удалось добиться требуемых результатов. За это всем участникам дискусии, а особенно Justnewone ОГРОМНЫЙ РЕСПЕКТ!!!

Преведу пример кода, может кому-то пригодится:

...

ul, li P{

list-style: none;

padding: 0px;

margin: 0px;

}

li a.mnuTextMainLink {

display: block;

color: #C6BD8D;

text-decoration: underline;

background: url('pics/mnu_main.png');

background-repeat:no-repeat;

padding-top: 47px;

width: 33px;

}

li a:hover.mnuTextMainLink {

background: url('pics/mnu_main_h.png');

background-repeat:no-repeat;

text-decoration: none;

color: #E69829;

}

....

<ul>

<li><a href="index.html" title="Main" class="mnuTextMainLink">Main</a></li>

</ul>

...

Все оказалось очень просто.

Еще раз огромное всем спасибо!!!