При наведении на ссылку меняется картинка внутри ссылки

[pdmi3y]

Столкнулся с вот такой проблемой:

<table>
            <tr>
                    <td>
                     <a href="/primer.html"><img src="/img/01_c.jpg" onmouseover="this.src='/img/01.jpg'" onmouseout="this.src='/img/01_c.jpg'"></a>
                    </td>
            </tr>
            <tr>
                    <td>
                     <a href="/primer.html">Картинка</a>
                    </td>
            </tr>
</table>

Когда наводишь на картинку 01_с.jpg она меняется на 01.jpg, уводишь курсор возвращается прежняя картинка. Картинка, как вы обратили внимания, сделана ссылкой на страницу primer.html

Внизу под картинкой располагается ссылка на эту же страницу.

Вопрос! Как сделать, что бы при наведении на ссылку происходила та же операция с картинкой что и при наведении на неё? Нужно получить -

наводишь на ссылку, с картинкой такой же эффект происходит как и после тогда как просто наводишь на картинку.

Заранее благодарю за помощь!

[Veseloff]

Задаём картинке айдишник и на онмаусовер ссылки повесим document.getElementById('%айдишник_картинки%').src='%чего там надо присвоить%'

[pdmi3y]

Задаём картинке айдишник и на онмаусовер ссылки повесим document.getElementById('%айдишник_картинки%').src='%чего там надо присвоить%'

Не смог я выехать к моему сожалению в вашу подсказку

Покажу что я сделал, поправти меня пожалуйста:

<table>
            <tr>
                    <td>
                     <a href="/primer.html"><img [b]id="pic1"[/b] src="/img/01_c.jpg" [b]document.getElementById('pic1').src='/img/01.jpg'[/b] onmouseout="this.src='/img/01_c.jpg'"></a>
                    </td>
            </tr>
            <tr>
                    <td>
                     <a href="/primer.html">Картинка</a>
                    </td>
            </tr>
</table>

1. Задаём картинке айдишник - Задал id картинки (id="pic1") (не знаю правильно я это сделал или нет)

2. на онмаусовер ссылки повесим document.getElementById('%айдишник_картинки%').src='%чего там надо присвоить%' - не понял если честно как это, заменил onmouseover="this.src='/img/01.jpg'" на document.getElementById('pic1').src='/img/01.jpg'

Естественно это не правильно так как не работает.

Уважаемый Veseloff, можете объяснить более доступным языком что есть:

1. на онмаусовер ссылки повесим

2. куда вставлять document.getElementById('%айдишник_картинки%').src='%%'

3. что вы имели ввиду под "чего там надо присвоить"?

Заранее благодарю за ответы!

[elipse]

lol

Edited April 28, 2012 by elipse

[SelenIT]

Мда... напомнило

2012-й же год на дворе, НТML5 c CSS3 всякие, какие к черту таблицы, какой к черту JS для hover-эффекта?

<a class="hoverable" href="/primer.html">
   <p><img src="/img/01_c.jpg"></p>
   <p>Картинка</p>
</a>

.hoverable {
   display: table;
   background: url(/img/01.jpg) top center no-repeat;
}
.hoverable:hover img {
   visibility: hidden;
}

Одна картинка фоном, вторая поверх, при наведении фон просвечивает. Никакой задержки, никаких скриптов...