Bildvergrößerung onmouseover

[buffy2511]

Hallo zusammen,

ich brauche sowas in der Art: http://www.stadthotel-magni.de/

Jedoch funktioniert das leider nicht bei mehreren Galerien untereinander.

Hat vllt. jemand einen Tipp für mich?

Vielen Dank.

Edit: Perfekt wäre es, wenn das Bild nicht so ruckartig käme, sondern mit einem leichten Fading-Effekt.

[Ben-]

Verstehe nicht so richtig, was Du mit "Jedoch funktioniert das leider nicht bei mehreren Galerien untereinander." meinst.
Hast Du denn bisher schon Javascript Code, den du verwendest? Oder wofür genau brauchst Du einen Tipp? Mit Jquery lässt sich sowas eigentlich simpel realisieren.

[buffy2511]

Ja, habe ich. Den habe ich mir aus dem Quelltext der Website gezogen.

Aber - ich habe es jetzt hingekommen.

Das Problem war, dass der Hoverfunktion lief, wenn ich eine Galerie verwendet habe.

Da es aber um eine Projektauflistung geht, soll es pro Projekt eine solche Galerie - zumindest der ähnlich - geben. Da funktionierte es dann nicht mehr. Sprich: Das gewünschte Bild wurde während der Mouseover-Funktion nicht in dem div angezeigt.

Nun habe ich ganz simpel ein $i hinter den Galerienamen gepackt, und dann gings.

Ich poste zum Verständnis nochmal den Code. Vllt. hilft es dann ja auch noch anderen ;-)

Header:

<SCRIPT TYPE="text/javascript">
                        <!--

                        function newImage(arg) {
                            if (document.images) {
                                rslt = new Image();
                                rslt.src = arg;
                                return rslt;
                            }
                        }

                        function changeImages() {
                            if (document.images && (preloadFlag == true)) {
                                for (var i=0; i<changeImages.arguments.length; i+=2) {
                                    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
                                }
                            }
                        }

                        var preloadFlag = false;
                        function preloadImages() {
                            if (document.images) {
                                pic_anzeige_1 = newImage("upload/aktuelles/'.$picture_1.'");
                                pic_anzeige_2 = newImage("upload/aktuelles/'.$picture_2.'");
                                pic_anzeige_3 = newImage("upload/aktuelles/'.$picture_3.'");
                                preloadFlag = true;
                            }
                        }

                        // -->
                        </SCRIPT> 

Funktionsdatei:

$content .= "<img name=\"pic_anzeige[$i]\" src=\"upload/aktuelles/$picture_1\" alt=\"\" />";
$content .= "<a href=\"#\" onmouseover=\"changeImages('pic_anzeige[$i]', 'upload/aktuelles/$picture_2'); return true;\" onmouseout=\"changeImages('pic_anzeige[$i]', 'upload/aktuelles/$picture_1'); return true;\">";
                $content .= "<img src=\"upload/aktuelles/tn/$picture_2\" alt=\"\" border=\"0\" />";
                $content .= "</a>";