Помогите с подсветкой пожалуйста

Q5
На сайте с 29.09.2010
Offline
10
477

Есть конструкция:

<div>

<img onMouseOver="this.src='/img/new.png'" onMouseOut="this.src='/img/old.png'" src="/img/old.png"/> <br>

<a href="http://site.ru">Перейти по ссылке</a>

</div>

Сейчас работает следующим образом:

При наведении курсора на картинку, ее вид меняется. При наведении курсора на ссылку она принимает вид "a:hover"

Задача: При попадании курсора в область div одновременно меняется картинка и ссылка принимает вид "a:hover"

Как можно такое реализовать?

Заранее спасибо.

T
На сайте с 13.04.2008
Offline
67
t3s
#1

1. вырвать руки тому кто делает подобное УГ

2. убедиться что руки вырваны по самые я***а, дабы тот кто делает подобное УГ не смог плодить наследников

3. начинать изучать CSS

в html достаточно вот этого

<div class="my_div">

<a href="http://site.ru">Перейти по ссылке</a>
</div>

а всего остального можно добиться стилями

.my_div {background: transparent url('/img/new.png') no-repeat top left;}

.my_div:hover {background: transparent url('/img/old.png') no-repeat top left;}
.my_div a {/*оформляете ссылку как хотите*/}
.my_div a:hover {/*оформляете ссылку :hover как хотите*/}

однако учтите, что некоторые старые браузеры (не буду показывать пальцем) понимают :hover лишь для ссылок, но не для обьектов... в этом случае можно поступить так:

.my_div {/*блаблабла (размеры/позиционирование/отступы и т.д.)*/}

.my_div a {
display:block;
padding:10px 20px 30px 40px;/*нужного расположения текста можно добиться необязательно padding-ом*/
background: transparent url('/img/new.png') no-repeat top left;
}
.my_div a:hover {background: transparent url('/img/old.png') no-repeat top left;}

средствами CSS получается во-первых более быстрая работа сайта, т.к. и сам сцц и прописанные background-ом картинки кешируются клиентом и во-вторых более "чистый" код страницы

обратите внимание, что это лишь примеры, которые можно улучшить - например использовать одну картинку вместо двух (в этом случае при hover используем background-position, т.е. "сдвигаем" картинку при наведении)

webamator (http://webamator.ru) приглашает потестить сервис бесплатной оптимизации CSS и JavaScript (http://service.webamator.ru/) Занимаюсь проектами любой сложности. Качественно. Дорого. Примеры некоторых работ (http://blog.webamator.ru/category/portfolio)
TakingBackMySoul
На сайте с 09.11.2011
Offline
65
#2

Вариант номер два, не такой матерый как первый, но тоже вариант...

<div onMouseOver="this.style.color='#ffffff';" onMouseOut="this.style.color='#bbb';">

<img onMouseOver="this.src='/img/new.png'" onMouseOut="this.src='/img/old.png'" src="/img/old.png"/><br />
<div onClick="location.href='http://site.ru'">Перейти по ссылке</div>
</div>
SB
На сайте с 21.10.2011
Offline
1
#3

Вся разница в том что в варианте с css - картинки загружаются в браузер из сети сразу а не по событию. т.е. в варианта с JS - надо ещё прелодер картинок из сети делать =)

Даю платные консультации по js , php , css ,html - обращаться в личку , почту , скайп
Q5
На сайте с 29.09.2010
Offline
10
#4

Всем спасибо за помощь и за разъяснения 🍿

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