Popup - Mouseover bei Bildern

js-line

Hallo Ihr Lieben,
schon seit mehreren Stunden suche ich in verschieden Foren die Lösung für eine Optimierung einer meiner Internetseiten. Ich bin Fotografin, welche ihre Seiten selbst programmiert ... sicher nicht ohne Fehler ... aber sie funktionieren. Nun gut, aber jetzt komme ich nicht weiter, alle Lösungen, welche ich bisher fand, entsprachen nicht meinem Gesuchten.

Ich möchte, dass sich ein kleines Galeriebild beim mouseover in einem neuem Popubfenster öffnet und dieses sich auch allein wieder schließt. Ich habe diese Lösung bei pixelfotobox.de gesehen und möchte sie in meine Seite einbauen. Eine einfache Vergrößerung oder auch die Lösung mit Layern (?) funktioniert bei meinem Seitenaufbau nicht. Ich nutze Frames, bin also auf eine Lösung mit einem Popup angewiesen. Die Bilder für die Groß- und Kleinansicht sind seperat gespeichert, zudem in der bisherigen Version für die Großansicht separate html-Datein angelegt. Meine Seite, welche ich überarbeiten möchte, heißt http://www.hochzeitsfotos-dresden.de.

Ich bin dankbar für sinnvolle Antworten, mit dem Verständnis, dass meine Kenntnis über Internetprogrammierung sich nur auf einfache HTML-Kenntnisse geschränken, ich aber gegenüber Lernen von Neuem offen bin.

synaptic

also grundlegend solltest du auf die benutzung von frames verzichten und lieber mit php-includes oder serverside includes beschränken.
so kannste prima arbeiten und auch wieder "vernünftige" scripte nutzen.
und wie meinste das mit "von selber wieder schliessen" nach ablauf einer gewissen zeit oder wie??

Macrosdesign

@ synaptic guck dir mal das beispiel an auf http://www.pixelfotobox.de

dann weisste was sie meint

synaptic

ui jaa manchmal sollte man sich das beispiel ansehen, statt dem wort aufmerksamkeit zu schenken
ok das script sollte nicht allzuschwer sein, wenn du etwas zeit mitbringst kann ich dir da weiterhelfen, aber so 2 tage zeit sollteste schon mitbringen...
hab jobmässig und auch daheim grad bis zum hals zeugs zum arbeiten

js-line

Hallo synaptic, danke für die schnelle Antwort und auch Dein Bemühen. Ich freue mich über Deine Hilfe.

Grundlegend hast Du recht, Internetseiten auf php zu beschränken und ohne Frames zu arbeiten, zumal bei manchen Popups gar nicht geöffnet werden. Allerdings lernte ich mich vor über 10 Jahren mühselig in die damaligen Future ein und eine Umprogrammierung aller meiner Seiten wie die genannte http://www.hochzeitsfotos-dresden.de oder auch http://www.js-fotografie.com und eine weiterführende Seite über Afrika, würde wahrscheinlich Monate dauern. Monate, die ich besser dem widmen sollte, von dem ich etwas verstehe. Dennoch werde ich mir über eine Umstellung in Zukunft Gedanken machen müssen, da auch die Pflege der Seiten immer reichlich mit Zeit behaftet ist und sicher werd ich da auch die Hilfe von Profis benötigen (wofür mir bisher jedoch leider das nötige Kleingeld fehlt). Danke hiermit auch an Macrodesign fürs aufmerksame lesen. Manchmal ist es halt schwer zu erklären was man will.

Liebe Grüße
js-line

synaptic

hatte dich voll vergessen.. sry!!

HTML

<html>


<head>
  <title></title>
  <script type="text/javascript">
            var ua = navigator.userAgent.toLowerCase();
var divw=0;
var divh=0;


if (document.getElementById || document.all)
    document.write('<div id="imgtrailer" style="position:absolute;visibility:hidden;"></div>')


function gettrailobject()
    {
    if (document.getElementById)
        return document.getElementById("imgtrailer")
    else if (document.all)
        return document.all.trailimagid
    }


function gettrailobj()
    {
    if (document.getElementById)
        return document.getElementById("imgtrailer").style
    else if (document.all)
        return document.all.trailimagid.style
    }


function truebody()
    {
    return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }


function hidetrail()
    {
    gettrailobject().innerHTML=" ";
    document.onmousemove='';
    gettrailobj().visibility="hidden";
    }


function trailOn(thumbimg,imgtitle,imgscription,imgsize,filesize,credit,level,thw,thh,flvvid,samplepath)
    {
    //if(ua.indexOf('opera') == -1 && ua.indexOf('safari') == -1)
        //{
        gettrailobj().left="-500px";
        divthw = parseInt(thw) + 2;

        if(flvvid){
            var vidsample = samplepath + flvvid;
            newHTML = "";
            newHTML = newHTML + '<div align="center" style="width:'+thw+'px; font-family: verdana; font-size: 11px; padding: 0px; border: 1px solid #333333; background-color: #FFFFFF; layer-background-color: #FFFFFF; background-image: url(images/img_load.gif); background-repeat: no-repeat;">';
            newHTML = newHTML +    '<object width="'+thw+'" height="'+thh+'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">';
            newHTML = newHTML + '<param name="movie" value="swf/flashthumb.swf">';
            newHTML = newHTML + '<param name="quality" value="best">';
            newHTML = newHTML + '<param name="loop" value="true">';    
            newHTML = newHTML + '<param name="FlashVars" value="myfile=' + vidsample + '&watermarkvid='+show_watermark_hover+'">';
            newHTML = newHTML + '<EMBED SRC="swf/flashthumb.swf" LOOP="true" QUALITY="best" FlashVars="myfile=' + vidsample + '&watermarkvid='+show_watermark_hover+'" WIDTH="'+thw+'" HEIGHT="'+thh+'">';
            newHTML = newHTML + '</object><div align="left" style="padding: 3px;"><b>Title: </b>'+imgtitle+'<br><b>Description: </b>'+imgscription+'</div></div>';
            gettrailobject().innerHTML = newHTML;
        } else {
            gettrailobject().innerHTML = '<table><tr><td><div style="background-color: #000000; layer-background-color: #000000; border: 0pt none #000000; padding: 0pt; width:'+divthw+'px;"><div style="background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px solid #000000; background-image: url(images/img_load.gif); background-repeat: no-repeat;"><center><img src="'+thumbimg+'" border="0" width="'+thw+'" height="'+thh+'"></center><div style="padding:3px"><b>Title: </b>'+imgtitle+'<br><b>Description: </b>'+imgscription+'<br></div></div></div></td></tr></table>';
        }


        gettrailobj().visibility="visible";
        divw = parseInt(thw)+25;
        divh = parseInt(thh)+130;
        document.onmousemove=followmouse;
        //}
    }


function followmouse(e)
    {
    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
    var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
if(typeof e != "undefined")
    {
    if(docwidth < 15+e.pageX+divw)
        xcoord = e.pageX-divw-5;
    else
        xcoord = 15+e.pageX;
    if(docheight < 15+e.pageY+divh)
        ycoord = 15+e.pageY-Math.max(0,(divh + e.pageY - docheight - truebody().scrollTop - 30));
    else
        ycoord = 15+e.pageY;
    }
else if (typeof window.event != "undefined")
    {
    if(docwidth < 15+truebody().scrollLeft+event.clientX+divw)
        xcoord = truebody().scrollLeft-5+event.clientX-divw;
    else
        xcoord = truebody().scrollLeft+15+event.clientX;


    if(docheight < 15+truebody().scrollTop+event.clientY+divh)
        ycoord = 15+truebody().scrollTop+event.clientY-Math.max(0,(divh + event.clientY - docheight - 30));
    else
        ycoord = truebody().scrollTop+15+event.clientY;
    }
    gettrailobj().left=xcoord+"px"
    gettrailobj().top=ycoord+"px"
    }


  </script>
</head>
<body>
<p style="margin-top:300px;">
<a class="photo_links" href="http://galerie.kkw-forum.de/klopfer/DSCF6505.JPG">
<img border="0" class="photos" onmouseout="hidetrail();" onmouseover="trailOn('http://galerie.kkw-forum.de/klopfer/DSCF6505.JPG','Der dicke Fritz','joa direkt auf die cam zugelaufen','','','','1','268.006700168','200','','');" src="http://galerie.kkw-forum.de/klopfer/th_DSCF6505.JPG"/>
</a>
</p>
</body>
</html>

Alles anzeigen

das is jetzt so der code von der anderen page.. wenn du damit net klarkommst oder nich ganz so viel schnickschnack brauchst, sag bescheid

Popup - Mouseover bei Bildern

Tags

Benutzer online in diesem Thema