Jump to content
  • 0

всплывающие окошки с текстом


Rilo
 Share

Question

господа, надо сделать всплывающие окошки с текстом (типа помощь, подсказка), которые будут появляться при нажатии мышкой на ссылку.

окошки желательно маленькие, текст желательно форматированный (выделение жирным - достаточно)

как это можно сделать?

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

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Почитай здесь о всплывающей подсказке.

http://forum.htmlbook.ru/index.php?showtopic=6297

вот спасибо! взял. Влад, можно ли сделать, чтобы на каждое место в старанице их будет несколько всплывающее окошко было разного цвета? какой ключик и куда подставить?

Link to comment
Share on other sites

  • 0

Vlad как изменить код, чтобы подсказка всплывала, когда человек нажимает мышкой на ссылку, а не наводит е??

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

Link to comment
Share on other sites

  • 0

примерно такая же тема: навели мышь появилась подсказка, она не уходит пока не кликнешь вне не? или не выведешь из не? курсор.

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

сделал проверку - если нав?л на ссылку не убирать. Но теперь не убирается подсказка!

я так понял что событие onMouseOut при выводе со ссылки курсора происходит и для объекта-родителя

Вот код

<script>
var mouseOut_flag=true;

function show(msg){
obj=document.getElementById("layer");
obj.innerHTML="<a href=http://something/>Link</a> "+msg;
e=window.event;
obj.style.display='block';
obj.style.left=250;
obj.style.top=e.clientY+10;
//obj.style.left=x+10;
//obj.style.top=y+10;
}

function change_mouseOut_flag(){
//alert(window.event.srcElement.tagName);
if(window.event.srcElement.tagName!="A") mouseOut_flag=1;
return mouseOut_flag;
}

function hide(){
e=window.event;

//alert(e.srcElement.tagName+" "+mouseOut_flag);
if(e.srcElement.tagName=="A") mouseOut_flag=false;

if(e.srcElement.id!="layer" && e.type=="click") document.getElementById("layer").style.display='none';
if(e.type=="mouseout" && mouseOut_flag) document.getElementById("layer").style.display='none';


}

</script>

.....

<p onmouseover=show("Message") style="cursor:pointer;width:200;background-color:#ffeeff" >rollover this</p>
<p onmouseover=show('too long message) style="cursor:pointer;width:200;background-color:#ffeeff">rollover this</p>

<div id=layer onmouseout=hide() onmousemove="change_mouseOut_flag();"></div>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy