Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.10.2008, 18:54
Аватар для alt5000
Интересующийся
Отправить личное сообщение для alt5000 Посмотреть профиль Найти все сообщения от alt5000
 
Регистрация: 16.10.2008
Сообщений: 29

Задачка: вывод div по ссылке
Здравствуйте.

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

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

P.S.: Могу выложить исходный код.
Ответить с цитированием
  #2 (permalink)  
Старый 16.10.2008, 23:49
Аватар для Snipe
Профессор
Отправить личное сообщение для Snipe Посмотреть профиль Найти все сообщения от Snipe
 
Регистрация: 06.05.2008
Сообщений: 765

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

потом для секторов (не знаю, можно так %)) ставите события
onmouseover = function() {setText('ваш текст')};
onmouseout = function() {setText('')};


Как-то так...
Ответить с цитированием
  #3 (permalink)  
Старый 17.10.2008, 00:44
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Snipe,
Можно, ведь это те же самые ссылки.
Ответить с цитированием
  #4 (permalink)  
Старый 27.10.2008, 10:40
Аватар для alt5000
Интересующийся
Отправить личное сообщение для alt5000 Посмотреть профиль Найти все сообщения от alt5000
 
Регистрация: 16.10.2008
Сообщений: 29

Вот что получилось. Но почему-то выдает ошибку на странице после загрузки. Что-то не так? По моему подключени е к <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>
Ответить с цитированием
  #5 (permalink)  
Старый 27.10.2008, 14:05
-
Отправить личное сообщение для twolf Посмотреть профиль Найти все сообщения от twolf
 
Регистрация: 16.07.2008
Сообщений: 207

SetText с маленькой буквы s.
Ответить с цитированием
  #6 (permalink)  
Старый 27.10.2008, 14:35
Аватар для alt5000
Интересующийся
Отправить личное сообщение для alt5000 Посмотреть профиль Найти все сообщения от alt5000
 
Регистрация: 16.10.2008
Сообщений: 29

Исправил, добавил type="text/javascript
Однако не помогло. Страница грузится нормально, включаю отображение активного содержимого и при наведении на ссылку - Ошибка на странице. Проверьте, если не трудно полностью код у себя. Если работает тот код, который я выложил, значит надо искать у себя. Однако innerHTML работает в других скриптах.
Ответить с цитированием
  #7 (permalink)  
Старый 27.10.2008, 15:25
Аватар для alt5000
Интересующийся
Отправить личное сообщение для alt5000 Посмотреть профиль Найти все сообщения от alt5000
 
Регистрация: 16.10.2008
Сообщений: 29

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

<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 на это никак не реагирует...
Ответить с цитированием
  #8 (permalink)  
Старый 27.10.2008, 16:24
-
Отправить личное сообщение для twolf Посмотреть профиль Найти все сообщения от twolf
 
Регистрация: 16.07.2008
Сообщений: 207

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

Если вне функции поставить var textDiv .... то не находит объекта.
Не знаю почему, может профессора объяснят.
Вызывать так : onmouseover = "setText('ваш текст')"
Ответить с цитированием
  #9 (permalink)  
Старый 27.10.2008, 17:26
Аватар для alt5000
Интересующийся
Отправить личное сообщение для alt5000 Посмотреть профиль Найти все сообщения от alt5000
 
Регистрация: 16.10.2008
Сообщений: 29

Возможно, Воьф.
Возможно, Воьф. Но я нашел 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-функцией в теле
страницы?

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

Последний раз редактировалось alt5000, 27.10.2008 в 17:29.
Ответить с цитированием
  #10 (permalink)  
Старый 27.10.2008, 18:22
-
Отправить личное сообщение для twolf Посмотреть профиль Найти все сообщения от twolf
 
Регистрация: 16.07.2008
Сообщений: 207

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск