Всплывающие подсказки

(Ответов: 1, Просмотров: 868)
  1. Студент Аватар для Felix Raven
    • Регистрация: 19.01.2010
    • Сообщений: 79
    • Репутация: 16
    Привет всем!
    сверстал я сайт но никак не могу доделать мелочь одну. Мне нужно чтобы при клике на ссылку под ним выехала подсказка или блок с соц. кнопками к примеру или с формой поиска...

    Вот скрины:



    В общем я нашел неплохое решение http://ruseller.com/lessons.php?rub=2&id=136

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

    Вот код скрипта

    Код:
    a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
    font-weight:bold;
    text-decoration:none;
    }
    a.tt span{ display: none; }
     /*background:; ie hack, something must be changed in a for ie to execute it*/
        a.tt:hover{ z-index:25; color: #aaaaff; background:;}
        a.tt:hover span.tooltip{
        display:block;
      position:absolute;
        top:0px; left:0;
        padding: 15px 0 0 0;
        width:200px;
        color: #993300;
        text-align: center;
        filter: alpha(opacity:90);
        KHTMLOpacity: 0.90;
        MozOpacity: 0.90;
        opacity: 0.90;
        }
        a.tt:hover span.top{
        display: block;
        padding: 30px 8px 0;
        background: url(bubble.gif) no-repeat top;
        }
        a.tt:hover span.middle{ /* different middle bg for stretch */
        display: block;
        padding: 0 8px; 
        background: url(bubble_filler.gif) repeat bottom; 
        }
        a.tt:hover span.bottom{
        display: block;
        padding:3px 8px 10px;
        color: #548912;
        background: url(bubble.gif) no-repeat bottom;
        }
    Код:
    <a href="#" class="tt">
        Тут текст термина (который нуждается в подсказке)
        <span class="tooltip">
        <span class="top">
        </span>
        <span class="middle">
        Тут текст всплывающей подсказки
        </span>
        <span class="bottom">
        </span>
        </span>
        </a>
    Верстаю сайты
    • 0
  2. Дипломник
    • Регистрация: 17.10.2010
    • Сообщений: 134
    • Репутация: 15
    возможно я использую не правильный скрипт
    Скрипт правильный

    Все просто. У вас конфликтуют CSS, из-за этого и "слетает" все.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Как убрать всплывающие окна на сайте
Вопросы от новичков 17 04.10.2011 16:49

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры