VPF::Баннер с всплывающим текстом по наведению

KuZyagroup

Дата 23.10.2010, 16:15 (ссылка)

(нет голосов)

Загрузка ...

magento solution

Профиль
Группа: Участник
Сообщений: 283
Регистрация: 16.4.2007
Где: Kiev

Репутация: 1
Всего: 4

Есть баннер картинка, по наведению на неё мышкой нужно что бы всплывал текст. Если убрать мышку то текст должен исчезать. Размер картинки и текста не известен заранее.

Код


<div id="holder">
    <img id="img" src="image.jpg" />
    <div id="popup">
          <p>....<span>....</span>....<strong>....</strong>........</p>
    </div>

</div>

Сложность в том что, если мышь попадает на всплывающий #popup то #holder получает событие mouseout. Как это побороть?

Код


var CategoryPopup = {
    init: function(img) {
        this.steps = 50;
        this.holder = $('holder');
        this.img= $('img');
        this.popup = $('popup');
        
        this.holder .setStyle({ height:this.img.getHeight()+'px',  marginBottom:'10px',  overflow:'hidden',});
        this.popup.setStyle({ position:'relative', marginTop:'-10px',});
        
        this._mouseover = this.mouseOverHandler.bind(this);
        this._mouseout  = this.mouseOutHandler.bind(this);
        this._mouseover_child = this.mouseOverChildHandler.bind(this); 
        this._mouseout_child  = this.mouseOutChildHandler.bind(this)       
        
        Event.observe(this.categoryDescHolder, "mouseover", this._mouseover );
        Event.observe(this.categoryDescHolder, "mouseout",  this._mouseout );
        Event.observe(this.categoryDescriptionPopup, "mouseover", this._mouseover_child );
        Event.observe(this.categoryDescriptionPopup, "mouseout",  this._mouseout_child );
    },
    
    mouseOverHandler : function(e) {
        var steps = this.steps;        
        var _height = this.popup.getHeight();        
        for (var i=1; i<=steps; i++) {
            this.popuping(this.categoryDescriptionPopup,(_height/steps*i), 5*i)    
        }
    },
    
    mouseOutHandler : function(e) {  
        var steps = this.steps;
        var _height = this.popup.getHeight();        
        for (var i=steps; i>=1; i--) {
            this.popuping(this.categoryDescriptionPopup,(_height/steps*i), 5*(steps-i+1))
        }
    },
    
    mouseOverChildHandler : function(e){ 
        console.log('mouseOverChildHandler');
    },
    
    mouseOutChildHandler : function(e){ 
        console.log('mouseOutChildHandler');
    },
    
    popuping : function(popup,_top,deley){
        setTimeout(function() { 
            popup.setStyle({ top:"-"+_top+"px"});
        }, deley);     
    },    
}

Я не совсем понимаю что должно быть в mouseOverChildHandler и mouseOutChildHandler.
И хотелось бы более прямой метод чем у меня popuping

P.S. к моему сожалению прототайп поменять на jQuery не могу, на нем цмс завязан(

KuZyagroup

Дата 23.10.2010, 17:17 (ссылка)

(нет голосов)

Загрузка ...

magento solution

Профиль
Группа: Участник
Сообщений: 283
Регистрация: 16.4.2007
Где: Kiev

Репутация: 1
Всего: 4

Примеры как надо:
http://www.pointydesign.com/

Код


jQuery(document).ready(function($){
    $j('.boxgrid.captionfull').hover(
        function(){
            $j(".cover",this).stop().animate({top:'100px'},
            {queue:false,duration:160});
        },
        function(){
            $j(".cover",this).stop().animate({top:'200px'},
            {queue:false,duration:160});
        });
});

http://www.wizardry.ua/

Код


jQuery('#pr1').hover(function() {
    jQuery("#addon1").animate({ marginTop: "0px" },500);
    jQuery("#addon1").queue("fx", []);
}, function() {
    jQuery("#addon1").animate({ marginTop: "180px" },500);
    jQuery("#addon1").queue("fx", []);
});

Эх, если бы код на prototype был бы так прост...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »