Задачка: вывод 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, а эти варианты не позволяют этого сделать. НО ПОЧЕМУ НЕ РАБОТАЕТ ИЗНАЧАЛЬНЫЙ ВАРИАНТ с js-функцией в теле страницы? З.Ы.: Плох тот аспирант, который не мечтает стать профессором :) :p :) |
а мой вариант чем не устраивает? религия не позволяет?
|
Часовой пояс GMT +3, время: 08:25. |