Sodalla,

Nach einer langen und anstrengenden "Nachtschicht" habe ich nun unsere Fotogalerie mit Auswahl der anzuzeigenden Galerie, der Anzeige der Vorschaubilder und Anzeige der Fotos in Originalgrösse bei MouseOver in einer einzigen PHP-Datei endlich, endlich, endlich fertiggestellt.

Nun gibt es aber noch einen Gesichtspunkt, der mir nicht gefällt:

Das Foto in Originalgrösse wird bei MouseOver sofort angezeigt und verdeckt dadurch natürlich die darunter liegenden Fotos zum Teil. Die Überlappung ist auch kein Problem. Nur dass das grosse Foto sofort geöffnet wird, entspricht nicht ganz meinen Vorstellungen.

Die Vorschau-Bilder und die Fotos in Originalgrösse als bei OnMouseOver anzuzeigende Tooltips werden eingelesen (die Vorschaubilder in das Array $Bilder und die grossen Fotos in das Array $Grossansicht - ersteres ist hier nicht aufgeführt).

Die Vorschau-Bilder und die grossen Fotos werden - wie nachfolgend - in einer Schleife am Bildschirm ausgegeben bzw. in eigenen Div-Bereichen organisiert:

for ($i = 0; $i < sizeof ($Bilder); $i++)
{
  $Grossansicht [] = str_replace ("klein", "gross", $Bilder [$i]);
  echo "<div id='" . $i . "' class='tip'><img border='0' src='" . $Grossansicht [$i] . "'></div>";

?>

... HTML-Tabelle ...

<a href="#"
     onmouseout="popUp(event,'<?php echo $i ?>')"
     onmouseover="popUp(event,'<?php echo $i ?>')"
     onclick="return false">
     <img border="0" src="<?php echo $Bilder [$i] ?>">
  </a>

... HTML-Tabelle ...

<?php

... weiterer Code ...
}

Eine Funktion zeitverzögert aufzurufen, funktioniert über die Anweisung setTimeout('FUNKTION()', VERZÖGERUNG).

Wenn ich nun aber diesen Befehl auf meine PHP-Datei umlege, dann werden die grossen Fotos gar nicht mehr richtig angezeigt:

onmouseover="setTimeout('popUp(event,'<?php echo $i ?>')',1500)"

Die grossen Fotos werden zwar angezeigt, aber nicht mehr richtig geschlossen. Auch gibt es Probleme, wenn ich den Mauszeiger schnell über mehrere Vorschau-Bilder bewege.

Damit scheidet diese Möglichkeit - zumindest wie sie jetzt erstellt ist - leider aus.

Deswegen habe ich mir nun vorgestellt, dass es ganz ratsam wäre, die grossen Fotos mit einer kleiner Animation zeitverzögert darzustellen.

Hierzu habe ich drei Grafiken erstellt, die wie folgt gewechselt werden sollen:

MouseOver:
1. Sofortige Anzeige der Grafik "L_countdown_3.png"
2. Nach 1 Sekunde: Austausch der Grafik "L_countdown_3.png" gegen "L_countdown_2.png"
3. Nach 1 Sekunde: Austausch der Grafik "L_countdown_2.png" gegen "L_countdown_1.png"
4. Nach 1 Sekunde: Austausch der Grafik "L_countdown_1.png" gegen "L_countdown_0.png"
5. Nach 1 Sekunde: Anzeige des grossen Fotos

MouseOut:
Sofortiges Stoppen der Animation

Ist meine Vorstellung umsetzbar ?

Vielen Dank für Eure Antworten.

Gruss, Enrico

=-=-=-=-=-=-=

Der Vollständigkeit halber hier der Quelltext für die Tooltip-Datei:

var DH = 0;
var an = 0;
var al = 0;
var ai = 0;

if (document.getElementById)
{
  ai = 1;
  DH = 1;
}
else
{
  if (document.all)
  {
    al = 1;
    DH = 1;
  }
  else
  {
    browserVersion = parseInt (navigator.appVersion);

if ((navigator.appName.indexOf ('Netscape') != -1) && (browserVersion == 4))
    {
      an = 1;
      DH = 1;
    }
  }
}

function fd (oi, ws)
{
  if (ws == 1)
  {
    if (ai)
      return (document.getElementById(oi).style);
    else
    {
      if (al)
        return (document.all[oi].style);
      else
      {
        if (an)
          return (document.layers[oi]);
      }
    }
  }
  else
  {
    if (ai)
      return (document.getElementById(oi));
    else
    {
      if (al)
        return (document.all[oi]);
      else
      {
        if (an)
          return (document.layers[oi]);
      }
    }
  }
}

function pw ()
{
  if (window.innerWidth != null)
    return window.innerWidth;

if (document.body.clientWidth != null)
    return document.body.clientWidth;

return (null);
}

function popUp (evt, oi)
{
  if (DH)
  {
    var wp = pw ();
    ds = fd (oi, 1);
    dm = fd (oi, 0);
    st = ds.visibility;

if (dm.offsetWidth)
      ew = dm.offsetWidth;
    else
      if (dm.clip.width)
        ew = dm.clip.width;

if (st == "visible" || st == "show")
      ds.visibility = "hidden";
    else
    {
      if (evt.y || evt.pageY)
      {
        if (evt.pageY)
        {
          tv = evt.pageY + 20;
          lv = evt.pageX - (ew / 4);
        }
        else
        {
          tv = evt.y + 20 + document.body.scrollTop;
          lv = evt.x  - (ew / 4) + document.body.scrollLeft;
        }

if (lv < 2)
          lv = 2;
        else
          if (lv + ew > wp)
            lv -= ew / 2;

if (!an)
        {
          lv += 'px';
          tv += 'px'
        }

ds.left = lv;
        ds.top = tv;
      }
      ds.visibility = "visible";
    }
  }
}