Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   Создание всплывающего окна при подводе курсора к элементу рисунка (http://forum.oszone.net/showthread.php?t=117099)

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

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

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

Codru 14-09-2008 00:48 898533
dmitryst На стационарных компах, флешка только для переноса с одного компа на другого. Я знаю, что подобное возможно, но в программировании отстал безнадежно.
Спасибо за содействие.

dmitryst 14-09-2008 00:59 898538
Цитата:
Цитата Codru
На стационарных компах »
:biggrin: . Ну я понял, что не в Африке :laugh:

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

Busla 14-09-2008 01:51 898570
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 14-09-2008 02:42 898592
dmitryst, извините за несообразительность.
В общем желательно чтобы окошко с текстом всплыла над рисунком. Хочется, чтобы рисунок занял наибольшую площадь экрана. А еще, чтобы окошко свернулась автоматически при удалении курсора.
Второй вариант больше устраивает. Мне бы только помощь для одного элемента рисунка, остальные я бы сделал сам (органов управления много), тем более, что подобных рисунков около десяток. Тем более, что в одном случае -просто изучение органов управления, в другом, последовательность настройки (изучение, зачет). В общем, что-то подобное тренажеру.

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

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

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

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

Иду на dreamstime.com

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

dmitryst 15-09-2008 23:25 900245
Цитата:
Цитата 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>

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

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

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

Viktor St 27-12-2008 13:49 991449
скрипт в яве при подведении курсора без руки и нажатия на текст

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

Dafi 04-01-2009 14:35 997052
Viktor St
Это коментарий к вопросу или вопрос?

Viktor St 04-01-2009 14:59 997061
Dafi, в принципе был вопрос, спасибо, что среагировал. Я уже нашёл.

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

xabbep 12-03-2010 14:10 1366941
Codru

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

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

Codru 12-03-2010 20:52 1367300
Вложений: 1
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)

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


Время: 05:32.

Время: 05:32.
© OSzone.net 2001-