jQuery: Hoverbilder werden falsch dargestellt

[waswiewo]

Hey Leute,

ich habe soeben - bin noch dabei - ein Script von 'Semooh' getestet. Leider werden die Hoverbilder bei mir nicht richtig dargestellt.

Ich weiß, dass es an diesem Code-Bereich liegt:

        if(opt.fade){
          var offset = node.offset();
          var hover = node.clone(true);
          hover.attr('src', hoverImg);
          hover.css({
            position: 'absolute',
            left: offset.left,
            top: offset.top,
            zIndex: 1000
          }).hide().insertAfter(node);
          node.mouseover(
            function(){
              var offset=node.offset();
              hover.css({left: offset.left, top: offset.top});
              hover.fadeIn(opt.fadeSpeed);
              node.fadeOut(opt.fadeSpeed,function(){node.show()});

Ich habe auch schon offset.left und offset.top durch die Werte 0 ersetzt. Dann wird das erste Bild perfekt dargestellt, doch die restlichen an selber Position wie das erste.

Wie kann ich denn diese offset-Geschichte so anpassen, dass die Bilder nicht so heftig nach rechts und unten verrückt werden?

Habe über google eine Seite gefunden, wo jemand beschreibt wie es gehen soll.

Hier der Link - etwas nach unten scrollen

Aber das funktioniert so auch nicht.

Hab ich irgend etwas falsch gemacht oder übersehen?

Mfg waswiewo

 

[Quaese]

Hi,

versuch mal die Positionsangaben in Abhängigkeit der Offsets des übergeordneten Elements (#main) anzugeben:

node.mouseover(
  function(){
    var offset=node.offset();
    hover.css({
      left: offset.left - hover.parents('#main').offset().left + 60,
      top: offset.top - hover.parents('#main').offset().top + 60
    });
    hover.fadeIn(opt.fadeSpeed);
    node.fadeOut(opt.fadeSpeed,function(){node.show()});
  }
);

Ciao
Quaese

 

[waswiewo]

Ja genial. Habe das + 60 bei beiden Angaben noch weggenommen, somit hat es genau den Effekt den ich erreichen wollte. Wieder dazugelernt. Vielen Dank

EDIT###########

Ich hab da nochmal ne Frage:

Ich möchte, dass das Script erst nach 500 Millisekunden greift. Sprich wenn ich mit der Maus drüber fahre, erst nach 0,5 Sekunden der Hover-Effeckt kommt.

Das macht man, da es ein jQuery-Script ist, doch mit .delay(500). Aber wo muss ich das einsetzen?. ich hab es an sehr vielen verschiedenen stellen eingesetzt. Macht macht funktionierte dann nichts mehr, macht mal nur noch der Hover-Effeckt, aber nicht zurück, und macht mal sah man keine Veränderung.

Im html-Dokument habe ich es auch versucht. Hat jemand ne Idee?

Hier der Code:

/**
 *  jquery.popupt
 *  (c) 2008 Semooh (http://semooh.jp/)
 *
 *  Dual licensed under the MIT (MIT-LICENSE.txt)
 *  and GPL (GPL-LICENSE.txt) licenses.
 *
 **/
(function($){
	$.fn.extend({
		imghover: function(opt){
			return this.each(function() {
        opt = $.extend({
            prefix: '',
            suffix: '-hi',
            src: '',
            btnOnly: true,
            fade: true,
            fadeSpeed: 500
          }, opt || {});

        var node = $(this);
				if(!node.is('img')&&!node.is(':image')){
          var sel = 'img,:image';
          if (opt.btnOnly) sel = 'a '+sel;
          node.find(sel).imghover(opt);
          return;
        }

        var orgImg = node.attr('src');

        var hoverImg;
        if(opt.src){
          hoverImg = opt.src;
        }else{
          hoverImg = orgImg;
          if(opt.prefix){
            var pos = hoverImg.lastIndexOf('/');
            if(pos>0){
              hoverImg = hoverImg.substr(0,pos-1)+opt.prefix+hoverImg.substr(pos-1);
            }else{
              hoverImg = opt.prefix+hoverImg;
            }
          }
          if(opt.suffix){
            var pos = hoverImg.lastIndexOf('.');
            if(pos>0){
              hoverImg = hoverImg.substr(0,pos)+opt.suffix+hoverImg.substr(pos);
            }else{
              hoverImg = hoverImg+opt.suffix;
            }
          }
        }

        if(opt.fade){
          var offset = node.offset();
          var hover = node.clone(true);
          hover.attr('src', hoverImg);
          hover.css({
            position: 'absolute',
            left: offset.left,
            top: offset.top,
            zIndex: 1000
          }).hide().insertAfter(node);
node.mouseover(
  function(){
    var offset=node.offset();
    hover.css({
      left: offset.left - hover.parents('#main').offset().left,
      top: offset.top - hover.parents('#main').offset().top
    });
    hover.fadeIn(opt.fadeSpeed);
    node.fadeOut(opt.fadeSpeed,function(){node.show()});
  }
);
          hover.mouseout(
            function(){
              node.fadeIn(opt.fadeSpeed);
              hover.fadeOut(opt.fadeSpeed);
            }
          );
        }else{
          node.hover(
            function(){node.attr('src', hoverImg)},
            function(){node.attr('src', orgImg)}
          );
        }
			});
		}
	});
})(jQuery);

Und die Einbindung in html:

<script type="text/javascript"> 
$(document).ready(function () { 
    $('img').imghover();
}); 
</script>

Vielleicht weiß ja einer von euch, wo ich dies einsetzen muss.

MfG waswiewo