За последние 24 часа нас посетили 16839 программистов и 1702 робота. Сейчас ищут 892 программиста ...

Всплывающий блок с баннером при наведении курсора мыши на ви

Тема в разделе "JavaScript и AJAX", создана пользователем Mr. T, 8 авг 2011.

  1. Mr. T

    Mr. T Активный пользователь

    С нами с:
    10 ноя 2010
    Сообщения:
    733
    Симпатии:
    0
    Адрес:
    Украина, г. Киев
    Здравствуйте,
    в Интернет сейчас часто практикуется отображение блока с баннером при наведении на видео или изображение, к примеру, ютюб. Хочу сделать примерно также, чтобы при наведении курсора мыши на изображении из нижнего края изображения выезжал блок с баннером. Кое-какие наработки удалось сделать, но все же без помощи никак. Итак, HTML-код:
    HTML:
    1. <p id="image"><img src="..." alt="..."></p>
    2. <p id="banner"><a href="..." rel="external nofollow"><img src="..." alt="..."></a></p>
    , CSS-код: [css]<style type="text/css">
    #banner { background: #ccc; height: 0px; margin: 0 6px; padding: 10px; position: absolute; text-align: center; width: 573px; }
    </style>[/css] и JAVASCRIPT-код: [js]<script type="text/javascript">
    $(function(){
    $('#banner').hide();
    $('#image').hover(function(){
    $('#banner').animate({'height':'60px','opacity':'show','top':'-=96px'},{'queue':false},'slow').animate({'opacity':'0.5'});
    });
    });
    </script>[/js]. Что не так?
    - блок выезжает не совсем с нижнего края изображения, а немного ниже;
    - баннер также имеет прозрачность 0.5, она у него должна отсутствовать вовсе.
    Вроде все, буду очень признателен за помощь.