[Помогите] Помогите с картинками

Тема в разделе "Wordpress", создана пользователем C1sD, 10 авг 2013.

  1. C1sD

    C1sD

    Регистрация:
    17 апр 2013
    Сообщения:
    11
    Симпатии:
    0
    Вообщем нужно чтобы при наведении на картинку высвечивался текст. Пример ссылка.
     
  2. art-denis

    art-denis

    Регистрация:
    2 авг 2013
    Сообщения:
    45
    Симпатии:
    6
    У меня на работе через браузер Mozilla и общий сервак, по этой ссылки - картинки отображаются, но информация к картинкам всплывает не при наведении курсора на картинку. А когда курсор где-то между другими картинками на белом фоне.
    Видать на том сайте, нужно ещё допиливать эту функцию или кое какие скрипты на тонких клиентах работают не корректно.
     
  3. Bnopen

    Bnopen Команда форума

    Регистрация:
    3 мар 2013
    Сообщения:
    1.264
    Симпатии:
    534
    C1sD, по вашей ссылке у меня тоже не отображается нормально описания.
    Для этих целей может вам подойдут вот эти модули:

    Хотя в них выделять можно и область изображения, я думаю, что без проблем можно сделать при наведении на изображение + поиграться со стилями.
     
  4. redjek

    redjek

    Регистрация:
    15 авг 2013
    Сообщения:
    6
    Симпатии:
    2
    Можно и кодом

    в /heder пишем
    Код:
    <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://shablon-for.ucoz.net/js/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>
    Теперь присваиваете к картинке класс Captify и прописываете подсказку alt="Текст подсказки"

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