<style>  
  .caption-top, .caption-bottom {  
  color: #ffffff;  
  padding: 1.2em;  
  font-weight: bold;  
  font-size: 13px;  
  font-family: arial;  
  cursor: default;  
  border: 0px solid #334143;  
  background: #000000;  
  text-shadow: 1px 1px 0 #202020;  
  }  
  .caption-top {  
  border-width: 0px 0px 8px 0px;  
  }  
  .caption-bottom {  
  border-width: 8px 0px 0px 0px;  
  }  
  .caption a, .caption a {  
  border: 0 none;  
  text-decoration: none;  
  background: #000000;  
  padding: 0.3em;  
  }  
  .caption a:hover, .caption a:hover {  
  background: #202020;  
  }  
  </style>  
  <script type="text/javascript" src="http://mega.ucoz.ua/demo/podsk_v_kart/captify.tiny.js"></script>  
  <script type="text/javascript">  
  $(function(){  
  $('img.captify').captify({  
  // Скорость при наведении курсора  
  speedOver: 'fast',  
  // Скорость при отведении курсора  
  speedOut: 'normal',  
  // Задержка  
  hideDelay: 500,  
  // Эффект анимации: 'fade', 'slide', 'always-on'  
  animation: 'slide',  
  // Прозрачность подложки подсказки  
  opacity: '0.30',  
  // css класс подсказки  
  className: 'caption-bottom',  
  // Позиция подсказки (top или bottom)  
  position: 'bottom'  
  });  
  });  
  </script>

<img src="Ссылка на картинку" alt="Текст подсказки" width="Ширина" border="0" class="captify" >