[sega]

Помогите найти скрипт или способ, чтобы при наведении на картинку в краткой новости появлялся хинт с кратким описанием новости?
Картинка выводится стандартным методом DLE (thumb)
Примерно как на картинке!
http://s017.radikal.ru/i432/1209/ab/1ece20c05c70.jpg

[JohnJ]

самый простой способ: сделать картинку и описание в одном контейнере
<div class="thumb_container"><img class="thumb"/><div class="description></div></div>
а в стилях кроме всего остального прописать:
.description {display:none}
.thumb_container:hover .description {display:block;}

По этому принципу создаются выпадающие меню без использования скриптов.

[maxefect]

Поясняю от лица, JohnJ
<div class="thumb_container"><img class="thumb"/><div class="description></div></div>

<div class="description>Коммент</div> - тут между тегами пишите что угодно. просто при наведении у вас будет резко все это появлятся ... а чтобы сделать все плавно нужно либо на JS написать время появление div, либо воспользоваться CSS3 (что разумеется логичнее)

[vladendark]

Сообщение от maxefect

. просто при наведении у вас будет резко все это появлятся ... )

Счасте появится после

PHP код:

-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s; 


и без скриптов. ну а IE 7-8.... давай, до свидания!

[JohnJ]

если кто-то пользуется ie-7, ie-8, то значит они любят резкие переходы и т.п. Не стоит их лишать такой возможности

[sega]

Вроде всё просто, а у меня не работает!
<div class="thumb_container"><img class="thumb"/><div class="description></div></div> Надо же в каждой новости писать?

Как я понял это не совсем то, что нужно!
У меня в новостях уже есть краткое описание, но его просто не видно в блоке ниже картинки (картинка в размер блока)
height: 200px;
overflow: hidden;
Вот! А надо при наведении на картинку или может на сам блок, появлялся хинт не обрезаной краткой новостью.
По типу модуля "быстрый просмотр полной новости из краткой" (я его переделал в просмотр краткой новости из краткой-обрезаной)! Я его пока и использую, но с ним не удобно!

Не знаю как ещё объяснить!
Посмотрите! Маленький монитор под каждой новостью http://stopani.ru

Кнопка работает так:
<a href="#" onclick="show_full('{news-id}'); return false;">

Если поменять на <a href="#" onmouseover="show_full('{news-id}'); return false;">
То приходится всё время закрывать окно
А как сделать onmouseout ума не хватает.

[JohnJ]

Посмотрите пример. http://jsfiddle.net/JohnJ/9bFSa/2/
Там я удалил из первого тега <a> onmouseover и назначил класс "show_fast".
Затем в скрипте сделал следующее

 $(document).ready(function () {
            $('a.show_fast').mouseenter(function () {
                show_full($(this).data('id'));
            }).mouseleave(function () {
                hide_full();
            });
        })

Т.е. на каждый элемент <a> навешал события через скрипт: одно событие вызывает функцию показа окна, другое - функцию скрытия.
Естественно, что ajax-запрос я сэмулировал, как и формирование окна. Поэтому в примере - просто скрываю его. На приведённом в пример сайте происходит нечто похожее:

$('#show_full_aj').dialog('close');$('#show_full_aj').remove();$('#show_full_bf').remove();

Пробуйте.

[sega]

Не получается!

Вот мой код

<script type="text/javascript">
<!--
function show_full(id) {
$(function(){
        $.ajax({
            type: "POST",
            url: dle_root+"engine/modules/show_full.php",
            data: "id="+id,
            dataType: "xml",
            success: function(xml) {
                $('div#show_full_aj').remove();
                $('#show_full_bf').remove();
            jQuery(xml).find('site').each(
                    function()
                    {
                    title = jQuery(this).find('title').text(),
                    desc = jQuery(this).find('des').text();
                     rate = jQuery(this).find('rate').text();
                $('body').append("<div  id=\"show_full_aj\"   style=\"overflow:  auto;padding:3px!important;\"></div><div  onmouseout=\"$('#show_full_aj').dialog('close');$('#show_full_aj').remove();$('#show_full_bf').remove();\"  id=\"show_full_bf\"  style=\"position:fixed;top:1px;width:100%;height:100%;background:#000;opacity:  0.8;filter:  alpha(opacity=80);\"><br></div>");

                    $('#show_full_aj').dialog({
                    draggable: false,
                    
                    zIndex: 900,
                    width: 520,
                    height: 400,
    
                    
                    buttons:  [   {         text: "Закрыть",         click: function() {  $('#show_full_aj').remove();$('#show_full_bf').remove();$(this).dialog("close");  }   }],
                    close: function(event, ui) { $('div#show_full_aj').remove();$('#show_full_bf').remove(); },
                      title: title,
                    autoOpen: true
            });  
                      $('.ui-dialog-buttonset').html('<p align="left">'+rate+'</p>');            
                      $('.ui-dialog').css({position:'fixed',top:$(window).height()/2-280});  
                                           $('#show_full_aj').html( desc);        
               });      
                    
            }
            
        });
    });
}
//-->
</script>

Что надо изменить?

[JohnJ]

добавить ниже функцию скрытия окна (например, hide_full) и вызывать её в нужное время.