Текст при щелчке - JavaScript, Ajax

BloodWizard · 11.05.2010, 18:46

Я только начал учить JavaScript... Мне нужно просто при нажатии на какую-либо картинку и выводилась нужный текст в поверх всего контента... (ну что-то типа как на ALLnokia.ru при выводе инфы о телефоне там есть рядом с каждой характеристикой оранжевый значок при нажатии которого выходит инфа о характеристике )

GROWZER · 12.05.2010, 00:09

Код:

<div id="iText" style="position:absolute; top:10px; left:10px; display:none">тут текст</div>
<div onclick="document.getElementById('iText').style.display='block';"><img src="001.jpg"/></div>

если я правильно понял что нужно... то гдето так... при нажатии на блок с картинкой будет появляться первый блок div...

BloodWizard · 12.05.2010, 11:37

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

GROWZER · 12.05.2010, 13:33

в первом блоке в style там где top:10px; - это указывает что отступ от верхнего края страниц (можно указывать какой нужно с расчётом где находиться картинка чтоб было возле нее)...
также left:10px; - это отступ от левого края... можно указывать в процентах или от нижнего (ex: bottom:10px

карая и правого (ex: right:10px

тоже можно...
если непонятно... нужно почитать про CSS...

BloodWizard · 12.05.2010, 18:57

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

GROWZER · 12.05.2010, 20:48

Код:

<html>
<head>
<script>
function mousePageXY()
{
  var x = 0, y = 0;
  
  e = window.event;

  if (e.pageX || e.pageY)
  {
    x = e.pageX;
    y = e.pageY;
  }
  else if (e.clientX || e.clientY)
  {
    x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
    y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
  }

  return {"x":x, "y":y};
}


NC = (document.layers);
IE = (document.all);
DOM = (document.getElementById);

function ShowMessage() {

  mCur = mousePageXY();
  document.getElementById("Itext").style.display = 'block';
  newPosX = mCur.x;
  newPosY = mCur.y;

if (NC) {
  document.layers["Itext"].top = newPosY;
  document.layers["Itext"].left = newPosX;
}

if (DOM) { 
  document.getElementById("Itext").style.top = newPosY;
  document.getElementById("Itext").style.left = newPosX;
}

if (IE) { 
  document.all["Itext"].style.top = newPosY;
  document.all["Itext"].style.left = newPosX;
} 
}
</script>

</head>
<body>
<div id="Itext" style="position:absolute; z-index:10; display:none;">Message фылвоадлфыовдлаофывдла</div>
<div onclick="ShowMessage()"><img src="001.jpg"/></div>
</body>
</html>

при щелчке на картинку показывает поле див с текстом на позиции где сейчас находиться курсор...

BloodWizard · 12.05.2010, 21:23

Спасибо заработало... но почему-то только в IE а в Mozila нет, а в Гугл Хром просто сверху открывает блок(((((

11.05.2010, 18:46	#1
BloodWizard Пользователь Регистрация: 23.10.2008 Сообщений: 46	Текст при щелчке Я только начал учить JavaScript... Мне нужно просто при нажатии на какую-либо картинку и выводилась нужный текст в поверх всего контента... (ну что-то типа как на ALLnokia.ru при выводе инфы о телефоне там есть рядом с каждой характеристикой оранжевый значок при нажатии которого выходит инфа о характеристике )

12.05.2010, 00:09	#2
GROWZER Пользователь Регистрация: 16.06.2009 Сообщений: 47	Код: `<div id="iText" style="position:absolute; top:10px; left:10px; display:none">тут текст</div> <div onclick="document.getElementById('iText').style.display='block';"><img src="001.jpg"/></div>` если я правильно понял что нужно... то гдето так... при нажатии на блок с картинкой будет появляться первый блок div...

12.05.2010, 11:37	#3
BloodWizard Пользователь Регистрация: 23.10.2008 Сообщений: 46	GROWZER спасибо, помогло... Но возник ещё один вопрос... вот тут когда я щёлкаю на картинку то блок появляется сверху страницы а как сделать так чтобы появлялся прям у картинки ну или возле мышки Последний раз редактировалось BloodWizard; 12.05.2010 в 11:59.

12.05.2010, 18:57	#5
BloodWizard Пользователь Регистрация: 23.10.2008 Сообщений: 46	Не css я лчуше знаю чем ява скрипт... ну просто может есть какая-нибудь функция для получения положения мыши.... Последний раз редактировалось BloodWizard; 12.05.2010 в 20:08.

12.05.2010, 21:23	#7
BloodWizard Пользователь Регистрация: 23.10.2008 Сообщений: 46	Спасибо заработало... но почему-то только в IE а в Mozila нет, а в Гугл Хром просто сверху открывает блок((((( Последний раз редактировалось BloodWizard; 12.05.2010 в 21:26.

12.05.2010, 13:33	#4
GROWZER Пользователь Регистрация: 16.06.2009 Сообщений: 47	в первом блоке в style там где top:10px; - это указывает что отступ от верхнего края страниц (можно указывать какой нужно с расчётом где находиться картинка чтоб было возле нее)... также left:10px; - это отступ от левого края... можно указывать в процентах или от нижнего (ex: bottom:10px карая и правого (ex: right:10px тоже можно... если непонятно... нужно почитать про CSS...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
EmbeddedWB. Как вызвать окно сохранения файла при щелчке по ссылке	apx_angel	Работа с сетью в Delphi	0	22.11.2009 20:38
При нажатиии кнопки, текст....	Nice42ru	Помощь студентам	2	25.10.2009 15:58
Мерцание модального окна при щелчке на родительское	Vadik(R)	Общие вопросы Delphi	11	14.10.2009 19:37
Вызов DBEdit при двойёном щелчке мышью	.Phoenix	БД в Delphi	8	26.09.2009 04:35
Посылаемые сообщения при щелчке на рабочем столе	chandrasecar	Win Api	4	09.11.2008 10:57