Выпадающее меню на JS

[MyBordOf]

Здравствуйте! у меня меню из картинок и ссылок.
При наведении курсором на ссылку, выпадает подменю. Как сделать, чтоб при наведении на картинку выпадало ЭТО ЖЕ подменю?
это можно сделать только с помощью JS?
как мне правильно прописать функцию к данному коду?
Код HTML:

<table class="menu_table"> 
<tr class="menu_table_tr_1"> 
<td class="yacheyka"><a href="/" class="r1"></a></td> 
<td class="yacheyka"><a href="/" class="r2"></a></td> 
<td class="yacheyka"><a href="/" class="r3"></a></td> 
</tr> 
</table> 
<ul class="menu"> 
 
<li class="menu_1"> 
<a href="/about">О КОМПАНИИ</a> 
<ul> 
<li> 
<a href="/">О НАС</a><br> 
</li> 
<li> 
<a href="#">ВАКАНСИИ</a><br> 
</li> 
<li> 
<a href="/" class="brd">ИСТОРИЯ</a> 
</li> 
</ul> 
</li> 
</ul>

Код CSS:

a.r1 { 
background: url(/elements/img/3.jpg) no-repeat; 
display: block; 
width: 150px; 
height: 85px; 
margin-left: 39px; 
} 
a.r1:hover { 
background: url(/elements/img/2.jpg) no-repeat; 
} 
a.r2 { 
background: url(/elements/img/5.jpg) no-repeat; 
display: block; 
width: 150px; 
height: 110px; 
margin-left: 20px; 
} 
a.r2:hover { 
background: url(/elements/img/4.jpg) no-repeat; 
} 
a.r3 { 
background: url(/elements/img/6.jpg) no-repeat; 
display: block; 
width: 88px; 
height: 66px; 
margin-left: 55px; 
} 
a.r3:hover { 
background: url(/elements/img/7.jpg) no-repeat; 
} 
li.menu_1 { 
float: left; 
margin-top: -39px; 
margin-left: 117px; 
font-size: 25px; 
font-weight: bold; 
z-index: 2; 
position: relative; 
 
} 
li.menu_1 ul { 
display: none; 
padding-left: 10px; 
margin-left: -13px; 
font-size: 18px; 
text-align: center; 
background-color: #2c417d; 
opacity: 0.9; 
width: 192px; 
height: 110px; 
} 
li.menu_1 ul li { 
border: 1px solid #fff; 
margin-left: -5px; 
width: 100%; 
display: block; 
border-left: none; 
border-right: none; 
border-top: none; 
padding: 7px 0; 
 
} 
li.menu_1:hover ul { 
display: block; 
position: absolute; 
} 
li.menu_1:hover ul li { 
float: none; 
} 
li.menu_1:hover ul li a { 
padding: 6px 0 8px; 
color: #fff; 
}

[Faab]

Я не вижу "картинки" в вашем HTML. Советую сначало вставить изображения. Потом присвоить им свой id (можно и классы, но в будущем может придётся работать тогда с массивами).

Пример:

<td class="yacheyka">
  <a href="/" class="r1">
    <img src="img/image01.jpg" id="img01">
  </a>
</td>

Далее, при событии "наведение курсора" на элемент, установить id этого элемента. Затем пропишите условие, если id равен такому то значению, то показать такой то элемент (в вашем случае, элемент меню). Не привожу конкретный пример, так как тема создана в JS, а я использую обычно библиотеку JQuery. Но при проблемах на практике, пишите - вам кто-нибудь да поможет.

[MyBordOf]

как это не видите? а background? это фон ячейки.
backgroun hover при наведении на ячейку меняется фон, (другая картинка).
Под картинко у меня ссылки, и при наведении на ссылку, выпадает подменю. Хочу чтоб при наведении на картинку тоже выпадало ЭТО ЖЕ подменю

[MyBordOf]

я не знаю как мне написать функцию, помогите пожалуйста

[Faab]

Да, не заметил задний фон. Да и вообще, сейчас присмотрелся к вашему меню - у вас один выпадающий элемент - простое задание.

Если с JQuery, то так:

$(document).ready(function(){    
  
  $('.yacheyka').mouseover(function(){
     $('li.menu_1 ul').css('display', 'block');
     // тут добавтье нужные CSS свойства 
  });
});

Но для JQuery, нужно подключить JS библеотеку

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

В JS пока не умею граммотно составить такой скрипт.

[MyBordOf]

спасибо большое)))