| |
|
|
| | Помогите плиз мне с нижеприведенным кодом. По идее рядом с мышью должем плавать ДИВ, но работает нормально только в Опере, в ИЕ 7 - глючит, а в Мозилле 2 не работает вообще :(
function moveAlt(tex){
var div = document.getElementById('fly_alt');
document.getElementById('fly_alt').style.display="";
document.getElementById('fly_alt').innerHTML = tex;
window.event ? cx=window.event.x : cx=id.pageX;
window.event ? cy=window.event.y : cy=id.pageY;
window.event ? div.style.top=cy+document.body.scrollTop+12+"px" : div.style.top=cy+"px";
window.event ? div.style.left=cx+12+"px" : div.style.top=cx+"px";
}
function closeAlt (id) {
document.getElementById('fly_alt').style.display="none";
}
<div style="position:absolute;z-index:200;display:none;" id="fly_alt"></div>
<a href='javascript:void(0)' onmouseout='closeAlt()' onmouseover='moveAlt("текст подсказки");'>?</a>
|
Может у кого есть более надежный и рациональный вариант?
Заранее очень благодарен. | |
| |
|
|
| |
|
|
| |
для: golovdinov
(30.03.2007 в 19:16)
| | | Вот такой вариант:
<div style="position:absolute;z-index:200;display:none;" id="fly_alt"></div>
<a href="javascript:void(0)" alt="текст первой подсказки">?</a>
<a href="javascript:void(0)" alt="текст второй подсказки">?</a>
<a href="javascript:void(0)" alt="текст третьей подсказки">?</a>
<script language="JavaScript">
function move(e)
{
if(!e) e = window.event;
var x = e.pageX ? e.pageX : e.x;
var y = e.pageY ? e.pageY : e.y;
pop.style.left = x+10;
pop.style.top = y+20;
}
var pop = document.getElementById('fly_alt');
var lnks = document.getElementsByTagName('a');
for(i in lnks)
{
lnks[i].onmouseover = function(){pop.style.display=''; pop.innerHTML = this.getAttribute('alt')}
lnks[i].onmouseout = function(){pop.style.display='none'}
lnks[i].onmousemove = move;
}
</script>
|
С точки зрения стандартов HTML немного некорректно использование атрибута alt в ссылке, но при задании нескольких элементов с подсказкой это, на мой взгляд, наиболее оптимальный вариант в данном контексте.
Если обработчики нужно задавать не для всех ссылок, их можно отсеивать, например, по имени класса. | |
| |
|
|
| |
|
|
| |
для: mesos
(30.03.2007 в 20:12)
| | | К сожалению у меня это нигде не работало :( Может есть у кого еще предложения? | |
| |
|
|
| |
|
|
| |
для: golovdinov
(31.03.2007 в 12:10)
| | | 1. Для кроссбраузерности можно, например, использовать псевдоклассы.
Посмотрите http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=34492
2. Или же передавайте функции moveAlt не только текст подсказки, но и сам объект, т.е. так:
... onmouseover="moveAlt ('текст подсказки', this)" ...
|
Ну а в самой функции уходите от объекта event (которого Мозилла не понимает) - вычисляйте абсолютные координаты объекта и привязывайте к ним координаты DIV'a, т.е. так:
function moveAlt (tex, obj)
{
var dv = document.getElementById ('fly_alt'), al = at = 12;//выделенное жирным меняете как вам надо
dv.innerHTML = tex;
while (obj.offsetParent)
{
al += obj.offsetLeft;
at += obj.offsetTop;
obj = obj.offsetParent;
}
with (dv.style)
{
display = 'block';
top = at;
left = al;
}
}
|
| |
| |
|
|
| |
|
|
| |
для: golovdinov
(31.03.2007 в 12:10)
| | | Мистика =)
Проверил в семи браузерах под Win и в трех под Linux - везде прекрасно работает!
2 CNT А что значит "Mozilla не понимает объект event"? | |
| |
|
|
| |
|
|
| |
для: mesos
(31.03.2007 в 20:36)
| | | То и значит... не понимает FF простую запись window.event
Для всех прочих браузеров - это объект, имеющий кучу свойств.
А для FF - ничто, которое is not defined | |
| |
|
|
| |
|
|
| |
для: CNT
(31.03.2007 в 20:46)
| | | Попробуйте вот так:
<a href="#" onClick="test(event)">click me</a>
<script language="JavaScript">
function test(e)
{
if(!e) e = window.event;
alert(e);
}
</script>
|
Узнаете много интересного =)
Чтобы FF понял, что вы хотите использовать свойства возникающего события в обработчике, надо явно это указать при его задании.
Строка if(!e) e = window.event; для остальных браузеров. | |
| |
|
|
| |
|
|
| |
для: mesos
(31.03.2007 в 21:00)
| | | to CNT:
у меня твой вариант в FF не работает... :-(
в чем может быть проблема? | |
| |
|
|
| |
|
|
| |
для: ddhvvn
(01.04.2007 в 19:09)
| | | Не знаю. У меня в FF2.0.0.3 всё работает AS IS, т.е. прямым копи-пасте из текста форума
Может, забыли добавить this в onmouseover? | |
| |
|
|
| |
|
|
| |
для: CNT
(01.04.2007 в 19:38)
| | | да вроде, не забыл...
ДОБАВЛЕНО
кстати, это наверное проблема в странице...
потому что я создал отдельный файл для теста вставил туда тот же скрипта и все работает!
ну ладно... | |
| |
|
|
| |
|
|
| |
для: golovdinov
(30.03.2007 в 19:16)
| | | Хотелось бы отметить один момент, что FF все-таки поддерживает событие event :
http://developer.mozilla.org/en/docs/DOM:event
Так же посмотреть с какой версии происходит поддержка основными броузерами IE, Opera, FF этого и других событий можно на странице:
http://www.w3schools.com/htmldom/dom_obj_event.asp
И смысл записи кода получается следующим
<a class="first" href="#" onmousemove="movealt('текст Подсказки №1',1,event);" onmouseout="movealt('',0);">Подсказка №1.</a>
|
При движении мыши поверх этой гиперссылки (впрочем как и при уходе с нее) происходит вызов функции:
<script type="javascript">
<!--
function movealt(txt,flag,evt)
{
floatdiv=document.getElementById('fly_alt');
floatdiv.innerHTML=txt;
with(floatdiv.style)
{
if(flag==1)
{
display='block';
left=evt.clientX+20+'px';
top=evt.clientY-20+'px';
}
else
{
display='none';
left=-100+'px';
top=-100+'px';
}
}
}
// -->
</script>
|
Полный текст HTML страницы прикрепляю здесь же. | |
| |
|
|
