• DONATE to NULLED!
    Форуму и его команде можно помочь, мотивировать модераторов разделов.     Помогите модератору этого раздела killoff лично.

Помощь Всплывающая подсказка с HTML внутри, при скачивании прикрепленного файла

Вот пример, на этой странице: Для просмотра ссылки Войди или Зарегистрируйся

В самом низу "Downloadable documents" при наведении на ссылку появляется подсказка со ссылкой внутри. Надо сделать так же.

В коде статической страницы DLE, ссылка на прикрепленный файл выглядит так:
HTML: 
[attachment=3:1500J]
А когда страница уже сгенерирована, то она приобретает такой вид:
Код: 
<span class="attachment"><a href="http://www.site.ru/engine/download.php?id=1&amp;area=static" >Ссылка</a></span>

Вот я и спрашивал как сделать так, чтобы всплывающая подсказка с текстом и ссылкой внутри, появлялась именно при наведение на ссылку для скачивания прикрепленного файла, т.е. чтобы применялось к ссылкам с классом attachment.
 
так должна появляться одна и та же информация для всех файлов?
 
Вот как можно сделать
СSS

Код: 
/* кнопка запускающая подсказку */
span.attachment a {
    background:transparent url(/images/jqtools/download.png) no-repeat scroll 0 0;
    display:block;
    height:44px;
    margin-bottom:30px;
    overflow:hidden;
    text-indent:-999em;
    width:159px;
    cursor:pointer;
}
 
/* когда курсор над кнопкой */
span.attachment a:hover {
    background-position:0 -44px ;       
}
 
/* кликаем на кнопку */
span.attachment a:focus {
    background-position:0 -88px;
}
 
/* стили для подсказки */
.tooltip {
    display:none;
    background:url(/images/jqtools/black_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
}
 
/* элемент с классом .label внутри подсказки */
.tooltip .label {
    color:yellow;
    width:35px;
}
 
.tooltip a {
    color:#ad4;
    font-size:11px;
    font-weight:bold;
}
JavaScript
Код: 
$("span.attachment a").tooltip({ effect: 'slide'});

Что пишем в редакторе

HTML: 
[attachment=3:1500J]
 
 
<div class="tooltip">
 
    <img src="/images/jqtools/eye.png" alt="Flying screens" style="float:left;margin:0 15px 20px 0" />
 
    <table style="margin:0">
 
        <tr>
 
            <td class="label">File</td>
 
            <td>flowplayer-3.2.4.zip</td>
 
        </tr>
 
        <tr>
 
            <td class="label">Date</td>
 
            <td>2010-08-27</td>
 
        </tr>
 
        <tr>
 
            <td class="label">Size</td>
 
            <td>112 kB</td>
 
        </tr>
 
        <tr>
 
            <td class="label">OS</td>
 
            <td>all</td>
 
        </tr>       
 
    </table>
 
 
 
    <a href="#">What's new in 3.2</a>
 
</div>


Или нужно сделать чтобы автоматом это добавлялось пиши что нужно добавить я напишу javascript
 
Ярослав написал(а):
Или нужно сделать чтобы автоматом это добавлялось пиши что нужно добавить я напишу javascript
Нажмите для раскрытия...

В общем насчет кода, ничего не пашет у меня, и ссылки пропали все. Совсем печаль :(

Давай я css и main.tpl кину, посмотришь.

А насчет javascript, было бы хорошо, но текст еще не придуман, я потом сам смогу прописать?

yavasilek написал(а):
так должна появляться одна и та же информация для всех файлов?
Нажмите для раскрытия...
Так есть варианты?
 
скидывай сайт помогу если доверяешь
<-------------- добавлено через 36 сек. -------------->
какая версия dle

Попробый это добавить
между
<head>
</head>
Код: 
<script type="text/javascript" src="/js/jquery.tools.min.js"></script><script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>
 
Ярослав написал(а):
Попробуй это добавить между
<head>
</head>
Код: 
<script type="text/javascript" src="/js/jquery.tools.min.js"></script><script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>
Нажмите для раскрытия...
Добавлял, ничего...
Ярослав написал(а):
скидывай сайт помогу если доверяешь
Нажмите для раскрытия...
Весь сайт, или только шаблон?
 
попробуй вот так у меня получилось :party: Цвета потом под себя сделаешь
в шаблон статики(static.tpl) добавь следующее в самом конце
HTML: 
<div class="tooltip">
  Тут любая информация
</div>
 
<style>
    .tooltip {
        display:none;
        background:#000;
        height:63px;
        padding:30px 30px 10px 30px;
        width:110px;
        font-size:11px;
        color:#fff;
    }
    .tooltip .label {
        color:yellow;
        width:35px;
    }
</style>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
  $(document).ready(function() {
      $(".attachment").tooltip({ effect: 'slide'});
    });
</script>
:nina: (немного исправил)
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху