Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Всплывающая подсказка


Автор: Djuicy 5.9.2006, 14:37
Всем очередной раз доброе время суток!

Итак, новый вопрос для Мастеров. smile

Есть рисунок. На нем есть области, которые  явлются гиперссылками.
Как сделать так, чтобы при наведении на эту область всплывала подсказка 
типа alt, но  чтобы в нее можно было поместить текст в несколько строк?

Кто знает - помогите плиз....

Благодарна всем посетителям форума - очень отзывчивые и умные люди!

Автор: GIK 5.9.2006, 15:20
Попробуй сделать что нибуть с текстовым полем, пока конечного результата не привел, если что то доработаешь, если нет то позже доделаю smile 
Код

<html> 
<head>
<style type=text/css>
 #podscazka {
  display: 'none';
}
</style>
<script langusge="text/javascript">

 function visible(){
document.getElementById("podscazka").style.display="block";
}
 function hidden(){
document.getElementById("podscazka").style.display="none";
}
</script>
</head>
<body bgcolor="#ffffff">
<img src="foto.jpg" width=120 height=120 onmouseOver="visible()" onmouseOut="hidden()">
<div id="podscazka" style="position:absolute;top:20;left:20;"><input size=12 value='текст'></div>
</body>
</html>

Автор: Djuicy 5.9.2006, 15:33
Спасибо, GIK, я посмотрю что можно сделать ;) 

Однако ввиду своей JSнеграмотности попрошу как будет время - дать для сравнения код... 
Хотя может у меня все и так получится...
Буду стараться.
 

Автор: GIK 5.9.2006, 16:02
Разберешся со временем обязательно  smile 
А пока вот такой вариант, с отловом координат мыши, немного геморойно, но если немного помучатся что нибуть да и выйдет. Если что непонятно спрашивай или пиши на личный ящик smile 
Код

<html> 
<head>
<style type=text/css>
 #podscazka {
  display: 'none';
}
</style>
<script langusge="text/javascript">
   
 function setCoor(e)
    {
      x=(navigator.appName=="Microsoft Internet Explorer")?event.clientX:e.pageX; 
      y=(navigator.appName=="Microsoft Internet Explorer")?event.clientY:e.pageY; 

 if(x>=1 && x<=80 && y>=1 && y<=50){
  document.getElementById("podscazka").style.display="block";
 }else{document.getElementById("podscazka").style.display="none";}
 

 }      
   document.onmousemove = setCoor;
/*
 function visible(){
document.getElementById("podscazka").style.display="block";
}
 function hidden(){
document.getElementById("podscazka").style.display="none";
}
*/

</script>
</head>
<body bgcolor="#ffffff">
<img src="foto.jpg" width=120 height=120 style="position:absolute;top:1;left:1;">
<A href="" style="position:absolute;top:20;left:20;">ССылка</A>
<div id="podscazka" style="position:absolute;top:20;left:20;"><input size=12 value='текст'></div>
</body>
</html>

Автор: GIK 5.9.2006, 16:22
Совсем забыл о всплывающей подсказке  smile 

Переделал:
Код

<html> 
<head>
<style type=text/css>
 #podscazka {
  display: 'none';
}
</style>
<script langusge="text/javascript">
   var timeEction; var lovD=1; // :)
 function setCoor()
    {
      x=(navigator.appName=="Microsoft Internet Explorer")?event.clientX:e.pageX; 
      y=(navigator.appName=="Microsoft Internet Explorer")?event.clientY:e.pageY; 

 if(x>=1 && x<=80 && y>=1 && y<=50)
{
  if(lovD){ lovD=0; document.getElementById("podscazka").style.display="block"; 
             timeEction=window.setInterval("ection()", 100); 
           }
 }else{clearInterval(timeEction);
       document.getElementById("podscazka").style.display="none";
      lovD=1; h=0;}
}      
  document.onmousemove = setCoor;
 var h=0;
 function ection(){
 if(h==30) clearInterval(timeEction);
 h++;
 document.getElementById("txt").height=h;

}

</script>
</head>
<body bgcolor="#ffffff">
<img src="foto.jpg" width=120 height=120 style="position:absolute;top:1;left:1;">
<A href="" style="position:absolute;top:20;left:20;">ССылка</A>
<div id="podscazka" style="position:absolute;top:20;left:20;"><input size=12 id="txt" height=0 value='текст'></div>
</body>
</html>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)