Задачка: вывод div по ссылке
 

Здравствуйте.

У меня возник такой вопрос. Есть изображение, служащее картой ссылок. Оно разделено на несколько секторов, каждый из которых представляет из себя ссылку на отдельную страницу. Но это по нажатию. А при наведении на них в определенном месте страницы (теге div) должен выводиться соответствующий текст.

Кто знает, как это можно сделать - подскажите, пожалуйста.

P.S.: Могу выложить исходный код.

var textDiv = document.getElementById('id_вашего_дива');
function setText(_text){
  textDiv.innerHTML = _text;
}

потом для секторов (не знаю, можно так %)) ставите события

onmouseover = function() {setText('ваш текст')};
onmouseout = function() {setText('')};

Как-то так...

Snipe,
Можно, ведь это те же самые ссылки.

Вот что получилось. Но почему-то выдает ошибку на странице после загрузки. Что-то не так? По моему подключени е к <area> должно как -то по другому строиться, а не через его событие OnMouse...

<script language="JavaScript">
var textDiv = document.getElementById('out');
function setText(_text){
textDiv.innerHTML = _text;
}
</script>

<img src="1_2_18.jpg" usemap="#map">

<map name="map">
<area coords="0,0,392, 424" href="#" onmousemove="SetText('Это текст1')" shape="rect">
<area coords="0,392, 392, 748" href="#" onmousemove="SetText('Это текст2')" shape="rect">
</map>

<div id="out">Out!!!</div>

SetText с маленькой буквы s.

Исправил, добавил type="text/javascript
Однако не помогло. Страница грузится нормально, включаю отображение активного содержимого и при наведении на ссылку - Ошибка на странице. Проверьте, если не трудно полностью код у себя. Если работает тот код, который я выложил, значит надо искать у себя. Однако innerHTML работает в других скриптах.

Блин, забыл вставить указаниие на саму функцию... Представляете? Докатился. Теперь строки тега ареа выглядят так:

<area coords="0,0,392, 424" href="#" onmouseover = "function() {setText('ваш текст')};" shape="rect">
<area coords="0,392, 392, 748" href="#" onmouseover = "function() {setText('ваш текст')};" shape="rect">

Теперь сообщения об ожшибке нет, в статусе адрес ссылки, однако div на это никак не реагирует... :(

function setText(_text){
var textDiv = document.getElementById('out');
textDiv.innerHTML = _text;
}

Если вне функции поставить var textDiv .... то не находит объекта.
Не знаю почему, может профессора объяснят.
Вызывать так : onmouseover = "setText('ваш текст')"

Возможно, Воьф.
 

Возможно, Воьф. Но я нашел 2 варианта решения. Первый - зажать в теге div

<map name="map">
<div id="id1" onmousemove="out.innerHTML='Вот это текст'" ><area coords="0,0,392, 424" href="#1" shape="rect"></div>
<div id="id2" onmousemove="out.innerHTML='Вот это текст'" ><area coords="0,392, 392, 748" href="#2" shape="rect"></div>
</map>

А второй - это, как и в первом примере сам текст указывать в обработчике события Онмаусовер...

Но это коряво довольно, хочу подключать внешний *.js, а эти варианты не позволяют этого сделать.


З.Ы.: Плох тот аспирант, который не мечтает стать профессором :) :p :)

а мой вариант чем не устраивает? религия не позволяет?

всё работает... Только к элементам на странице надо обращаться ПОСЛЕ того как они созданы...

To Wolf. Ваш вариант меня полностью устраивает, но не получается вызвать функцию вывода текста. То ли у меня какой косяк, но вроде все нормально, то ли ошибка в скрипте :(

И еще один вопрос, если можно. Могу ли я сделать так, чтобы ссылка (участок изображения) при наведении на нее мышью выделялась и желательно, чтобы по границам фигуры. То есть, если у меня фигура - звезда, то выделение было бы в виде звездочки?

Цитата:

Сообщение от ZoNT (Сообщение 7639) всё работает... Только к элементам на странице надо обращаться ПОСЛЕ того как они созданы...

Что Вы имеете ввиду?

В данном коде:

<script language="JavaScript">
var textDiv = document.getElementById('out');
function setText(_text){
textDiv.innerHTML = _text;
}
</script>
 
<img src="1_2_18.jpg" usemap="#map">
 
<map name="map">
<area coords="0,0,392, 424" href="#" onmousemove="SetText('Это текст1')" shape="rect">
<area coords="0,392, 392, 748" href="#" onmousemove="SetText('Это текст2')" shape="rect">
</map>
 
<div id="out">Out!!!</div>

Скрипт раскположен ДО того как создан элемент <div id="out">. Соответственно выполнение строки:
var textDiv = document.getElementById('out');
произойдёт ДО того как этот элемент появится в дереве документа. Соответственно в textDiv будет "undefined". А в функции будет обращение к несуществующему свойству innerHTML объекта "undefined", что приведёт к ошибке.

ZoNT, я действительно ступил. Надо завязывать с вечерними вылазками на форум после трудового дня.
Если Вы не против, я подитожу ваши слова.
При загрузке страницы сначала выполняется javascript а потом уже HTML.
alt5000,
Скрипт который предложил я нормально работает, проверял. Вы бы хоть выложили свой код, тогда может покажем где именно ошибка.

При загрузке страницы все выполняется в порядке следования на странице.

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

Если подключать скрипты после body, от многих проблем можно избавится. В частности становятся ненужными функции, а-ля jQuery.ready.

Cпасибо, пробую...

Вот код:

<html>
<head>
<script language="JavaScript" type="text/javascript">
var textDiv = document.getElementById('out');
function setText(_text){
textDiv.innerHTML = _text;
}
</script>
</head>
<body>
<img src="1_2_18.jpg" usemap="#map">
<div id="out">Out!!!</div>
<map name="map">
<area coords="0,0,392, 424" href="#1" shape="rect" onmouseover = function() {setText('ваш текст')}; onmouseout = function() {setText('')};>
<area coords="0,392, 392, 748" href="#2" shape="rect" onmouseover = function() {setText('ваш текст')}; onmouseout = function() {setText('')};>
</map>
</body>
</html>