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

[Codru]

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

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

[dmitryst]

Codru, а где будет это место с описанием? Если где-то фиксировано, могу предложить сделать на ява-скрипте (на картинку кладем активные области или слои, при наведении на слой запускается функция отображения с нужным параметром). Вариант два - на флеше (это тоже как два пальца)

[Codru]

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

[dmitryst]

На стационарных компах »
:biggrin: . Ну я понял, что не в Африке :laugh:

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

[Busla]

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

<P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">
<P>This is a navigation bar.
</OBJECT>

<MAP name="map1">
<AREA href="guide.html"
alt="Access Guide"
shape="rect"
coords="0,0,118,28">
<AREA href="search.html"
alt="Search"
shape="rect"
coords="184,0,276,28">
<AREA href="shortcut.html"
alt="Go"
shape="circle"
coords="184,200,60">
<AREA href="top10.html"
alt="Top Ten"
shape="poly"
coords="276,0,276,28,100,200,50,50,276,0">
</MAP>
когда курсор находится над областью <area> - отображается текст из атрибута alt
вместо alt можно использовать title

[Codru]

dmitryst, извините за несообразительность.
В общем желательно чтобы окошко с текстом всплыла над рисунком. Хочется, чтобы рисунок занял наибольшую площадь экрана. А еще, чтобы окошко свернулась автоматически при удалении курсора.
Второй вариант больше устраивает. Мне бы только помощь для одного элемента рисунка, остальные я бы сделал сам (органов управления много), тем более, что подобных рисунков около десяток. Тем более, что в одном случае -просто изучение органов управления, в другом, последовательность настройки (изучение, зачет). В общем, что-то подобное тренажеру.

Busla раньше я пытался в html что-то подобное создать (не помню подробности), но не получил нужного результата. Попробовал на быструю руку, ссылка на другую программу, страницу получается, а прямоуголник не смог расскрыть. Оставлю на завтра, надо немного вспомнить. Спасибо за участие, завтра поделюсь результатом.

[Coutty]

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

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

[Codru]

Хотя... Если окно открывается не по центру, а сбоку от курсора, то при отводе мышки в сторону от маленького элемента, окно пропадёт. Что-то подобное на dreamstime.com в поиске изображений реализовано (только там маленькие окошки открываются). »
А мне большие окна и не нужны. К примеру: "Ручка установки десятков МГц"
С утра поработал с подсказкой Busla, идея хорошая, но если разбить рисунок по деталям , посмотрю, смогу ли перенести его из Power Point-а. А может я не все понял?
Попытался работать с Macromedia Dreamweaver 8, но так и не понял, чем лучше в данном вопросе чем Front Page 2003. В Front Page есть возможность создания гиперссылок, но применить к всплывающему окну не получилось.
И еще, а в Power Point-е нельзя ли создать всплывающие окошка используя Visual Basic?

Иду на dreamstime.com

[Dafi]

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

[dmitryst]

Попытался работать с 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>

[Dafi]

Codru,
можно не использовать image map (карту образа), а составить картину из фрагментов (разрезать целую картинку на части так, чтобы выделить отдельные элементы, ручки управления, тумблеры и т.д.).
Появится возможность использовать "подсветку" этих элементов при подводе мышки (желатеьно чтобы пользователь визуально "зафиксировал" момент наведения на элемент). Реализуется заменой основной картинки на "подсвеченную".
Прикрепил простой пример, кликните 2 раза на popup.htm , появится картинка составленная из 4-х одинаковых фрагментов (для примера взял готовые фрагменты), при подведении мышки к диагональным фрагментам они изменяются .

[Codru]

Спасибо за помощь. Пока сижу вспоминаю HTML, давно не занимался. Стараюсь претворить идеи в жизнь.
Единственное, пытаюсь найти разумное решение применимая без особой переделки к разным рисункам.
Работаю сейчас над предложением dmitryst-а

[dmitryst]

Codru, ну так я вам специально сделал максимально упрощенный вариант, чтобы не пришлось вспоминать слишком много :). Просто меняем рисунок и в Dreamweaver-е двигаем активные области. Если делать, как советует Dafi, придется делать по две картинки, резать их в фотошопе, потом склеивать в HTML-коде и так далее

[Viktor St]

скрипт в яве при подведении курсора без руки и нажатия на текст

тихо у вас однако:)

[Dafi]

Viktor St
Это коментарий к вопросу или вопрос?

[Viktor St]

Dafi, в принципе был вопрос, спасибо, что среагировал. Я уже нашёл.

[Codru]

Задача реализована через Adobe Flash CS3. Создает файл в формате *.fla. Для просмотра нужен Adobe Flash Player. Все довольно просто и удобно. Можно выводить не только текст, но и рисунок.
Если кого-то интересует, готов обьяснить как делается.

[xabbep]

Codru

Помогите разобраться, пишу сайт во флеше. Возникла проблема с привязкой левого меню (о компании, услуги и прочее) и вывода картинок в указанном месте сайта.
Более подробно: тело сайта разделено на три части , не считая самой шапки. 1) - левая часть меню, 2) середина - текст(картинки) 3) правая часть - другая инфа.
По умолчанию на главной странице загружается - текст (о компании). По нажатии любой ссылки из левого меню, текст "о компании" должен пропадать и появляться на его месте фотки.
При чём, при нажатии на фото, она должна увеличиться с текстовым описанием о ней.
вот скрин sderni.ru/77768

Помогите пожалуйста

[Codru]

xabbep

1. На 1-м слое ввести свое меню, затем скопировать по одному пункту в каждом новом слое.
2. Закрыть все слои, кроме слоя с которым работаем. Кликом правой кнопкой мыши по пункту меню выбрать Convert to symbol, в откр. окне выбрать Button.
3. Двойной клик по пункту меню - появится слой с пунктами: Up, Over, Down, Hit.. Скопировать Up в остальные пункты (Over, Down, Hit.). Для чего клик правой кнопкой по Up --> Copy Frames и Paste Frames в остальные.
4. Создать 2-й слой. В Over клик правой кнопкой мыши --> Insert Keyframe и сkопируйте (перетащить) нужный рисунок. Для просмотра --> Control -->TestMovie

! С 3 и 4 пунктами можно поиграться, я во все тонкости не вникал.

Изменения внесены с целью проверить видны модераторам внесение изменений в "старые" посты. Хотя информация по существу, ее можно убрать.

Практическая реализация того о чем говорилось выше есть на http://www.catedramilitara.ucoz.ru/ под названием
Staţia radio R-123M (format .swf) (http://www.catedramilitara.ucoz.ru/load/transmisiuni/statia_radio_r_123m_format_swf_arhivat/2-1-0-115)

[xabbep]

Я видимо не понятно изложил свои мысли. Нужно чтобы картинки, которые будут появляться при нажатии на ссылку не пропадали, а оставались на месте. Чтобы на любую из них можно было нажать и она увеличилась в размерах с описанием о ней. Например. Первая ссылка "Суши" , нажал, открылись фото суши. Ниже ссылка "Ролы" - открылись картинки с ролами и т.д. Могу скинуть на почту FLA.
Спасибо.