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


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

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

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

Автор: GIK 1.5.2007, 14:51
Так попробуй, может доработаешь под свои нужды  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
У меня много картинок, и для всех будет появлятся одна, это не то... Как бы сделать для каждой ссылки свое.

Автор: GIK 2.5.2007, 10:30
Да как 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>

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