VPF::Всплывающая подсказка - Форум программистов

Djuicy

Дата 5.9.2006, 14:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 30
Регистрация: 26.8.2006
Где: планета Земля

Репутация: 1
Всего: 14

Всем очередной раз доброе время суток!

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

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

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

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

GIK

Дата 5.9.2006, 15:20 (ссылка)

(нет голосов)

Загрузка ...

Добрый человек

Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: нет
Всего: 14

Попробуй сделать что нибуть с текстовым полем, пока конечного результата не привел, если что то доработаешь, если нет то позже доделаю 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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 30
Регистрация: 26.8.2006
Где: планета Земля

Репутация: 1
Всего: 14

Спасибо, GIK, я посмотрю что можно сделать ;)

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

GIK

Дата 5.9.2006, 16:02 (ссылка)

(нет голосов)

Загрузка ...

Добрый человек

Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: нет
Всего: 14

Разберешся со временем обязательно 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 (ссылка)

(нет голосов)

Загрузка ...

Добрый человек

Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: нет
Всего: 14

Совсем забыл о всплывающей подсказке 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>

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »