Bildmodul mit overlib und Text

[mauerblume]

Aufrgrund speziellem Kundenwunsch arbeite ich gerade an einem Bildmodul, dass auf dem normalen Bildmodul basiert (also Bild und Link),
was aber mit einem onmouseover arbeiten soll.

Also Ziel:
das bildmodul soll so funktionieren, dass man im Backend ein Bild auswählen kann und diesem Bild einen Link zuweist. ganz normal.
Es handelt sich um kleine Bildchen (ca 100px breit).

Im Frontend aber soll nicht nur der Link funktionieren, sondern beim mouseover soll sich eine Art "Infobox" öffnen, in der zu dem Bild ein kleiner Text steht und eine etwas vergrößerte Version ( ca 200px breit) des Bildes zu sehen ist.

Das Lightbox-Modul kommt leider nicht in Frage, da die Lightbox nur funktioniert wenn auf Bilddateien verlinkt wird.

Der gewünschte Effekt soll aber immer funktionieren, egal auf was der Link führt.

Ich bin schon kurz vor dem Durchbruch.

Hier das benutze Bildmodul:

Code: Alles auswählen

<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname   :     Bild(1)
* Beschreibung:     im Gegensatz zum Originalmodul wird das Bild
*                           nur dann mit einem Link hinterlegt, wenn auch
*                           tatsächlich ein Link angegeben wurde
* Version         :     1.2
* Author          :     irgendwer von 4fb ;-)
* Created        :     keine Ahnung, 4fb fragen
* Last Modified :     04-05-2005 by Christa Tabara mit Hilfe von
*                           Andreas Kummer und emergence :-)
*Edit                :    19-11-2008 by Doreen Lehmann, kleines Infofenster
*                           mit overlib.js
************************************************/

if ("CMS_IMG[1]" != "") {

    $img = '<img src="CMS_IMG[1]" border="0" width="110px">';

    $imagelink = trim("CMS_LINK[1]");
   
    $description = "CMS_IMGDESCR[1]";

    if ($imagelink != "http://" && $imagelink != "" && $imagelink != $cfgClient[$client]["path"]["htmlpath"])
      {
        $img = sprintf("<a  href=\"CMS_LINK[1]\" onmouseover=\"return overlib('<br>\'$description\'<br><br><img src=CMS_IMG[1] width=200>');\" onmouseout=\"nd();\"><img src=\"CMS_IMG[1]\" border=\"0\" width=\"110px\"></a>");
      }
    else {$img = '<img src="CMS_IMG[1]" border="0" width="110px">';}

    echo $img;
}

if ($edit) {
echo "<br>";
echo "CMS_IMGDESCR[1]";
echo "<br>";
echo "CMS_LINKDESCR[1]";
echo "<br>";

}

?>

Ich habe mal die Anweisung, in der der Link zusammengebaut wird etwas vereinfacht, damit ich Fehlerquellen ausschliessen kann.

Also es müssen nun "class" und "target" etc. wieder eingebaut werden.


Jetzt kommt der Einbau der mouseover-Geschichte mit dem JS overlib.js

Die Datei overlib.js herunterladen.
Hier:
http://www.bosrup.com/web/overlib/?Download
Im Header des Layouts einbinden.
Fertig.


Live zu betrachten (ist noch in einigen Punkten eine Baustelle)

http://sandra-noa.de/cms/front_content.php?idcat=39

Danke für Anregungen.