VPF::Всплывающая картинка при наведении на ссылку

Master_

Дата 1.5.2007, 12:29 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 247
Регистрация: 31.1.2007

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

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

Реализуемо ли это?

GIK

Дата 1.5.2007, 14:28 (ссылка)

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

Загрузка ...

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

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

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

Думаю да, взять хотябы свойство display=none || block и вытаскивать координаты мыши к примеру.
Если время будет напишу что нибуть, хотя в JS я уже дааавненько не влезал, наверника что нибуть новенькое-хорошенькое придумали smile

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

Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.

GIK

Дата 1.5.2007, 14:51 (ссылка)

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

Загрузка ...

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

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

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

Так попробуй, может доработаешь под свои нужды smile

Код


<style>
A.flash{

  position:absolute;
  top:120;
  left:120;
  font-size:24;
 
}
IMG.images{
  
  position:absolute;
  top:250;
  left:250;
  font-size:24;
  display:none;

}
</style>
<script>


FF=!document.all; 

 function mouseOverEndOut(rr){  
 
  if(rr)
   {
    //Координаты моуса
    posY=(FF?e.pageY:event.y);
    posX=(FF?e.pageX:event.x);
     
    document.getElementById("im").style.display="block";
    document.getElementById("im").style.top=posY+12; //к примеру 12
    document.getElementById("im").style.left=posX+12; //к примеру 12  
   
   } 
  else 
   {
     document.getElementById("im").style.display="none";
      
    
   } 

 }

</script>
<body>
<a class=flash href="#" onMouseOver="mouseOverEndOut(1)" onMouseOut="mouseOverEndOut(0)">ссылка</a>
<IMG src="sourse.gif" class=images id="im">
</body>

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

Master_

Дата 1.5.2007, 17:54 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 247
Регистрация: 31.1.2007

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

У меня много картинок, и для всех будет появлятся одна, это не то... Как бы сделать для каждой ссылки свое.

GIK

Дата 2.5.2007, 10:30 (ссылка)

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

Загрузка ...

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

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

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

Да как 2 мегабайта скачать, даже приукрасил немного smile

Код


<style>
A {
  COLOR:#316082;
  font-family:Arial;
  font-style:normal;
  font-size:15;
  text-decoration:none;
 
}
A:hover{
 COLOR: #cdcdcd;
 font-size:17;

}
 
A.flash{

  position:absolute;
  top:120;
  left:120;

 
}

A.flash2{

  position:absolute;
  top:170;
  left:120;
  
 
}
A.flash3{

  position:absolute;
  top:220;
  left:120;
 
 
}


IMG.images{
  
  position:absolute;
  top:250;
  left:250;
  font-size:24;
  display:none;

}

</style>
<script>


FF=!document.all; 

 function mouseOverEndOut(rr, imagess){  
 
  if(rr)
   {
    //Координаты моуса
    posY=(FF?e.pageY:event.y);
    posX=(FF?e.pageX:event.x);
    
    document.getElementById("im").src=imagess;
     
    document.getElementById("im").style.display="block";
    document.getElementById("im").style.top=posY+12; //к примеру 12
    document.getElementById("im").style.left=posX+12; //к примеру 12  
   
   } 
  else 
   {
     document.getElementById("im").style.display="none";
      
    
   } 

 }

</script>
<body>
<a class=flash href="#" onMouseOver="mouseOverEndOut(1, 'imag1.gif')" onMouseOut="mouseOverEndOut(0)">кудато</a>
<a class=flash2 href="#" onMouseOver="mouseOverEndOut(1,'imag2.gif')" onMouseOut="mouseOverEndOut(0)">кудато еще</a>
<a class=flash3 href="#" onMouseOver="mouseOverEndOut(1,'imag3.gif')" onMouseOut="mouseOverEndOut(0)">кудато еще раз</a>


<IMG src="imagiss.gif" class=images id="im">

</body>

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

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