VPF::Нужен скрипт подсвечивающий ссылку через img

Vatrushka

Дата 26.4.2011, 00:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 26.4.2011

Репутация: нет
Всего: нет

Подскажите пожалуйста скрипт, подсвечивающий ссылку при наведение на картинку.

Есть список ссылок (меню) слева, а справа картинки.
Нужно что бы при наведение на одну из картинок справа, загоралась нужная ссылка из левого меню (менялся цвет a:hover), ответственная за картинку. А так же что бы сами картинки являлись ссылками в нужный раздел. Картинки при наведение тоже должны меняться на более яркие.

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

ayax2005

Дата 26.4.2011, 07:49 (ссылка)

(нет голосов)

Загрузка ...

echo $smile

Профиль
Группа: Участник
Сообщений: 516
Регистрация: 17.4.2008
Где: Питер

Репутация: 3
Всего: 11

само собой, у ссылки и img должен быть одинаковый атрибут - например title.
Как вариант на jquery

Код


$(".menuimages").each(function(){
$(this).hover(
function(){
$("a[title="+$(this).attr('title')+"]").css({'color':'#F00'});
},
function(){
$("a[title="+$(this).attr('title')+"]").css({'color':'#00F'});
}
);
});

--------------------

все вопросы - из-за неверной формулировки задачи

0Scrum

Дата 26.4.2011, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Может быть в таком ключе будет интересно ?

Код


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <style>
   a, a span, img {
    display: inline-block;
  }
  a {
    height: 100px;
    line-height: 100px;
    text-decoration: none;
  }
  a span, a img {
    vertical-align: middle;
    border: none;
  }
  a:hover {
    color: red;
  }
  a:hover img {
    opacity: .5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  }

  </style>
  <title></title>
 </head>
 <body>
    <ul>
        <li>
            <a href="#">
                <span>Lorem ipsum</span>
                <img src="opera.png" alt="" />
            </a>
        </li>
        <li>
            <a href="#">
                <span>Lorem ipsum</span>
                <img src="opera.png" alt="" />
            </a>
        </li>
    </ul>
 </body>
</html>

Котокобра

Дата 27.4.2011, 01:22 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 147
Регистрация: 26.11.2009

Репутация: 3
Всего: 4

Vatrushka, зачем две темы создавать?

дубликат: http://forum.vingrad.ru/forum/topic-327986.html

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »