Brooke: Kombination Bild(mouse)over effekt + Popup Effekt

HiHo,

Muss sagen das ich nicht gerade neu bin auf dem gebiet aber auch nicht aufem Kopf gefallen

Ich suche seit Tage und Nächten! Nach einer Kombinations möglichkeit zweilerlei Dingen

1. Mouseover Effekt von einem Bild, wo das eine Bild von einem Graustufigen Ton in die Normalen Farben wechselt.

2. Mouseover Effekt von einem Bild, was ein popup öffnet und dieses Bild in mehreren zeilen beschreibt (soll kein neues fenster öffnen aber auch nicht der normale alt="" tag das ist mir zu wenig und sieht schrecklich aus..)

Zum ersten Punkt habe ich eine sehr gute lösung jedoch schaffe ich es nicht Punkt 1. und Punkt 2. miteinander zu kombinieren.

Das hier ist das fadescript im Head Tag:

<script type="text/javascript">
<!--
IE  = document.all &&!window.opera;
GK  = window.sidebar;
AOB = [];
x   = 0;

function Fader()
{
  this.timeOut=false;
  this.fade=function(y)
    {
      clearTimeout(this.timeOut);
      this.value=Number(eval('this.object.'+this.attr))+(this.delta*this.evt[y]);
      if(this.value>=this.min && this.value<=this.max)
        {
          eval('this.object.'+this.attr+'='+this.value)
          this.timeOut=setTimeout('AOB['+this.index+'].fade('+y+')',this.rate);
        }
    }
}

function init_fader(obj,delta,rate,min,max,dir)
{
  if(IE || GK)
    {
      AOB.push(new Fader(x));
      OB        = AOB[x];
      OB.index  = x;
      OB.object = obj;
      if(IE)
        {
          OB.attr = 'filters.alpha.opacity';
          OB.faktor = 1;
        }
      else
        {
          OB.attr   = 'style.MozOpacity';
          OB.faktor = 100;
        }
      OB.delta = delta/OB.faktor;
      OB.rate  = rate;
      OB.min   = min/OB.faktor;
      OB.max   = max/OB.faktor;
      OB.evt=[-1,1];if(dir)OB.evt.reverse();
      OB.object.onmouseover = new Function('f1','AOB['+x+'].fade(0)');
      OB.object.onmouseout  = new Function('f2','AOB['+x+'].fade(1)');
      OB.fade(0);x++;
    }
}

//-->
</script>

So sieht momentan der Befehl im Body Tag aus:

<div class="Ruffy"><img src="gfx/chars/1.jpg" width="61" height="34" style="filter:alpha(opacity=20);-moz-opacity:0.2" onmouseover="init_fader(this,5,20,20,99,1)" /></div>

Das ist einzig und allein das Fading Script.

lg Brooke

  1. Hi,

    Zum ersten Punkt habe ich eine sehr gute lösung jedoch schaffe ich es nicht Punkt 1. und Punkt 2. miteinander zu kombinieren.

    Das hier ist das fadescript im Head Tag:

    <script type="text/javascript">
    <!--
    IE  = document.all &&!window.opera;
    GK  = window.sidebar;
    AOB = [];
    x   = 0;

    function Fader()
    {
      this.timeOut=false;
      this.fade=function(y)
        {
          clearTimeout(this.timeOut);
          this.value=Number(eval('this.object.'+this.attr))+(this.delta*this.evt[y]);
          if(this.value>=this.min && this.value<=this.max)
            {
              eval('this.object.'+this.attr+'='+this.value)
              this.timeOut=setTimeout('AOB['+this.index+'].fade('+y+')',this.rate);
            }
        }
    }

    function init_fader(obj,delta,rate,min,max,dir)
    {
      if(IE || GK)
        {
          AOB.push(new Fader(x));
          OB        = AOB[x];
          OB.index  = x;
          OB.object = obj;
          if(IE)
            {
              OB.attr = 'filters.alpha.opacity';
              OB.faktor = 1;
            }
          else
            {
              OB.attr   = 'style.MozOpacity';
              OB.faktor = 100;
            }
          OB.delta = delta/OB.faktor;
          OB.rate  = rate;
          OB.min   = min/OB.faktor;
          OB.max   = max/OB.faktor;
          OB.evt=[-1,1];if(dir)OB.evt.reverse();
          OB.object.onmouseover = new Function('f1','AOB['+x+'].fade(0)');
          OB.object.onmouseout  = new Function('f2','AOB['+x+'].fade(1)');
          OB.fade(0);x++;
        }
    }

    //-->
    </script>

    Das ist einzig und allein das Fading Script.

    Heißt das, es ist das Script für punkt 1?

    Punkt 2 klingt so als wolltest du einen Tooltip machen, allerdings ohne "title" zu benutzen ("alt" geht nur im IE, und ist eigentlich nicht für Tooltips gedacht).

    Du musst also einen Layer erzeugen ("div") und ins DOM anhängen. Und dann entsprechend zeigen ("style.display = "block") und eben nicht anzeigen (display = "none").
    Absolut positionieren, und an Hand der Mausposition, oder wie du halt willst, ausrichten.

    War das deine Frage?

    Gruß