Выделение с map area

[laird]

ситуевина:

есть ссылка типа <a href="ssylka.html">ссылка</a>

есть участок в изображении завязанный с map area:

<area shape="poly" tooltip="ссылка" onmouseover="cvi_tip._show(event);" onmouseout="cvi_tip._hide(event);" onmousemove="cvi_tip._move(event);" href="ssylka.html" coords="184, 66, 338, 66, 338, 141, 184, 141" />

надо чтоб при наведении курсора на текстовую ссылку выделялся ещё и участок на карта подсвечиванием как если бы навести курсор напрямую на этот участок

как эти две вещи можно друг с дружкой связать? есть ли способы попроще?

заранее благодарю за помощЬ

Edited October 17, 2011 by laird

[Быколай]

ну, что вроде

<script>
$(function(){
	$('a#link').hover(
		function(){
			$('area#area').trigger('mouseover');
		},
		function(){
			$('area#area').trigger('mouseout');
		}
	)
});
</script>
<a href="ssylka.html" id="link">ссылка</a>

<area shape="poly" id="area" tooltip="ссылка" onmouseover="cvi_tip._show(event);" onmouseout="cvi_tip._hide(event);" onmousemove="cvi_tip._move(event);" href="ssylka.html" coords="184, 66, 338, 66, 338, 141, 184, 141" />

[laird]

ну, что вроде

<script>
$(function(){
	$('a#link').hover(
		function(){
			$('area#area').trigger('mouseover');
		},
		function(){
			$('area#area').trigger('mouseout');
		}
	)
});
</script>
<a href="ssylka.html" id="link">ссылка</a>

<area shape="poly" id="area" tooltip="ссылка" onmouseover="cvi_tip._show(event);" onmouseout="cvi_tip._hide(event);" onmousemove="cvi_tip._move(event);" href="ssylka.html" coords="184, 66, 338, 66, 338, 141, 184, 141" />

Благодарю А ежель ссылок таких много, для каждой прописывать <script>...</script>? а id для каждой area тоже надо менять - если да, в каком месте в скрипте?

[Быколай]

Благодарю А ежель ссылок таких много, для каждой прописывать <script>...</script>? а id для каждой area тоже надо менять - если да, в каком месте в скрипте?

$(function(){
	$('a').hover(
		function(){
			$('area[href='+$(this).attr('href')+']').trigger('mouseover');
		},
		function(){
			$('area[href='+$(this).attr('href')+']').trigger('mouseout');
		}
	)
});

попробуйте.

[laird]

Кстати говоря - испытал, чтот не работает

<script>...</script> ставить в body или в head? и так и так пробовал...

Пробовал с

<script>
$(function(){
        $('a#link').hover(
                function(){
                        $('area#area').trigger('mouseover');
                },
                function(){
                        $('area#area').trigger('mouseout');
                }
        )
});
</script>
<a href="ssylka.html" id="link">ссылка</a>

<area shape="poly" id="area" tooltip="ссылка" onmouseover="cvi_tip._show(event);" onmouseout="cvi_tip._hide(event);" onmousemove="cvi_tip._move(event);" href="ssylka.html" coords="184, 66, 338, 66, 338, 141, 184, 141" />

Edited October 17, 2011 by laird

[Быколай]

Кстати говоря - испытал, чтот не работает

<script>...</script> ставить в body или в head? и так и так пробовал...

А события над самой area у вас работают (_hide())? Можее

Куда вставлять без разницы. Лучше в head.

Вот посмотрите, должно отрабатывать: http://jsfiddle.net/jwjpp/

Edited October 17, 2011 by Быколай