Создание всплывающего окна при подводе курсора к элементу рисунка

[Codru]

Для использования компа в уч.процессе необходимо, чтобы при подводе курсора к элементу рисунка всплывало окошко с описанием, например назначение органа управления.

Рисунки выполнены с нуля в Power Point. То что мог реализовать, так открытие другого слайда. В Front Page также желаемого результата не добился (я его еще слабо знаю).



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

Пример рисунка приведен в прикрепленном файле.

Благодврю за помощь.

[Dafi]

Codru,

можно не использовать image map (карту образа), а составить картину из фрагментов (разрезать целую картинку на части так, чтобы выделить отдельные элементы, ручки управления, тумблеры и т.д.).

Появится возможность использовать "подсветку" этих элементов при подводе мышки (желатеьно чтобы пользователь визуально "зафиксировал" момент наведения на элемент). Реализуется заменой основной картинки на "подсвеченную".

Прикрепил простой пример, кликните 2 раза на popup.htm , появится картинка составленная из 4-х одинаковых фрагментов (для примера взял готовые фрагменты), при подведении мышки к диагональным фрагментам они изменяются .

[Codru]

dmitryst На стационарных компах, флешка только для переноса с одного компа на другого. Я знаю, что подобное возможно, но в программировании отстал безнадежно.

Спасибо за содействие.

[dmitryst]

Цитата Codru:



На стационарных компах

Создание всплывающего окна при подводе курсора к элементу рисунка

. Ну я понял, что не в Африке



Я имел в виду следующее - делается html-страничка, в которой будет, скажем, ваш рисунок вверху, а внизу, в рамочке - пояснительный текст. Этот скрипт могу написать даже я

Вариант два - использовать технологию Macromedia/Adobe Flash (а не то, что вы подумали ). Тогда можно делать надпись как угодно - на картинке, под картинкой, скрутить ее, сделать анимацию и так далее. Плюс - конечный файл можно запустить на любой вин-системе. Тоже делается сравнительно просто. (если всего один рисунок, могу помочь)

[dmitryst]

Codru, в html есть такое понятие как image map - на изображение накладывается "карта", пример из спецификации:





This is a navigation bar.






[/code]
когда курсор находится над областью - отображается текст из атрибута alt

вместо alt можно использовать title

[Busla]

Codru, в html есть такое понятие как image map - на изображение накладывается "карта", пример из спецификации:





This is a navigation bar.






[/code]
когда курсор находится над областью - отображается текст из атрибута alt

вместо alt можно использовать title

[Codru]

Цитата Codru:



В общем желательно чтобы окошко с текстом всплыла над рисунком. Хочется, чтобы рисунок занял наибольшую площадь экрана. А еще, чтобы окошко свернулась автоматически при удалении курсора.

Создание всплывающего окна при подводе курсора к элементу рисунка

Сделать-то можно, но это ж неудобно будет. Вот представьте, ведёте вы курсор к какому-нибудь элементу, а на пути попадается ещё один. Открывается окошко почти на весь экран. Чтобы его закрыть, надо отвести курсор к краю. Отвели, окошко прикрылось. Ведём снова. И опять тот элемент на пути попадается. Тогда уж может по клику открывать? А при наведении - пусть где-нибудь внизу строка-подсказка.



Хотя... Если окно открывается не по центру, а сбоку от курсора, то при отводе мышки в сторону от маленького элемента, окно пропадёт. Что-то подобное на dreamstime.com в поиске изображений реализовано (только там маленькие окошки открываются).

[Coutty]

Цитата Coutty:



Хотя... Если окно открывается не по центру, а сбоку от курсора, то при отводе мышки в сторону от маленького элемента, окно пропадёт. Что-то подобное на dreamstime.com в поиске изображений реализовано (только там маленькие окошки открываются).

Создание всплывающего окна при подводе курсора к элементу рисунка

А мне большие окна и не нужны. К примеру: "Ручка установки десятков МГц"

С утра поработал с подсказкой Busla, идея хорошая, но если разбить рисунок по деталям , посмотрю, смогу ли перенести его из Power Point-а. А может я не все понял?

Попытался работать с Macromedia Dreamweaver 8, но так и не понял, чем лучше в данном вопросе чем Front Page 2003. В Front Page есть возможность создания гиперссылок, но применить к всплывающему окну не получилось.

И еще, а в Power Point-е нельзя ли создать всплывающие окошка используя Visual Basic?



Иду на dreamstime.com

[Codru]

Codru,


Цитата Codru:



С утра поработал с подсказкой Busla, идея хорошая, но если разбить рисунок по деталям , посмотрю, смогу ли перенести его из Power Point-а

Создание всплывающего окна при подводе курсора к элементу рисунка

А зачем переносить? У Вас есть рисунок radio130.jpg (например), разбейте на части и укажите координаты частей как в примере. (левый верхний угол-правый нижний). В параметре ALT задайте текст (пояснение к соответствующей части рисунка). И фронт-пэидж не нужен Наберите в блокноте простой HTML текст, сохраните с расширением "html" (например "popup.html"), в той же папке сохраните рисунок. кликнете 2 раза на "popup.html"- должна появится страничка с рисунком (если всё правильно в тексте ). При подведении мышки к соответствующим частям появится пояснительный текст. Правда текст держится около 5 сек но изменить это наверно можно (?? ).

[Dafi]

Цитата Codru:



Попытался работать с Macromedia Dreamweaver 8, но так и не понял, чем лучше в данном вопросе чем Front Page 2003

Создание всплывающего окна при подводе курсора к элементу рисунка

Front Page мусорит в коде.

Я предлагал сделать на скриптах - в head секцию внести функции -

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="JavaScript">
function set_text_1 () {
document.form1.podskazka.value="TEXT 1";
}
function set_text_2 () {
document.form1.podskazka.value="TEXT 2";
}
function clear_text() {
document.form1.podskazka.value="";
}
</script>
</head>
<body>
<img src="images/R_logo.gif" width="300" height="200" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="27,19,102,67" href="#" onmouseover="set_text_1();" onmouseout="clear_text()"/>
<area shape="rect" coords="132,124,265,188" href="#" onmouseover="set_text_2();" onmouseout="clear_text()"/>
</map><br />
<form id="form1" name="form1" method="post" action="">
  <label></label>
  <label></label>
  <label>
  <textarea name="podskazka" id="podskazka" cols="45" rows="5"></textarea>
  </label>
</form>
</body>
</html>