Bild öffnen...

    Hallo Leute,


    ich habe ein Problem. Ich möchte auf meiner Seite ein Bild darstellen lassen. Dieses jedoch in sehr klein. 50 mal 60 pixel oder so. Wenn man auf das Bild drauf klickt soll es sich in einem neuen Fenster in Originalgröße öffnen.


    Ich habe es bereits auf meinem Webspace und weiß auch wie man es in klein und an der gewünschten Stelle darstellt (<img align="right" height="64px" ) aber wie bekomme ich das mit dem öffnen hin geht das auch über "target blank"?


    grüße Patrick

    Wenn du es nur in Html realisieren willst, musst du das kleine Bild und das große Bild auf dem PC/Server abspeichern.


    Beim kleinen Bild kannst du einen Link setzen. Im Htmltext schreibst du:

    Code
    1. <a href="link.htm"><img src="bildname.gif" width="50" border="0"></a>


    Du hast das kleine Bild nun verlinkt mit einer anderen Html Seite. In der kannst du ja das große Bild einfügen.


    Benutzt du Frames oder willst du es einfach nur groß anzeigen? Bei Frames gib noch den target="namedesframe" eingibst. Dort wo du den target Befehl setzt wird die Seite aufgemacht.

    Hey Ulrich,


    zumindest war das Thema noch nicht vergessen..


    Ja, so hatte ich mir das vorgestellt. Kannst du mir den Code geben vielleicht auch noch einen mit einem MouseOver Efeect?


    Danke


    Patrick

    Hallo Patrick,
    Du kannst den Quelltext doch einsehen. Im Firefox: Ansicht - Seitenquelltext anzeigen.


    Dieses hier in der Head-Sektion:

    HTML
    1. <script type="text/javascript">var urls = new Array()urls[0] = "elm02.jpg"urls[1] = "elm03.jpg"urls[2] = "elm04.jpg"var bilder = new Array()for (i = 0; i < urls.length; i++) { bilder[i] = new Image () bilder[i].src = urls[i] } pop = 0function oeffne (i) { var breite = bilder[i].width; var hoehe = bilder[i].height; if (!document.all) {breite++; hoehe++} var positionX = Math.round ((screen.availWidth / 2) - breite / 2); var positionY = Math.round ((screen.availHeight / 2) - hoehe / 2); if (pop) pop.close () pop=window.open('','Popup', 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,fullscreen=0,width=' + breite + ',height=' + hoehe + ',top=' + positionY + ',left=' + positionX); pop.document.write ('<html><head></head><body>') pop.document.write ('<div id="popupdiv" style="position: absolute; left: 0px; top: 0px;">') pop.document.write ('<img src="' + urls[i] + '">') pop.document.write ('</div></body></html>') pop.document.close () pop.focus() }</script>


    Bei urls[0], urls[1] usw. musst Du die URLs Deiner Bilder eintragen.
    Im Body dann für jedes Bild das folgende:

    Code
    1. <a href="elm02.jpg" onclick="oeffne(0); return false;"><img src="elm02lk.jpg" border="0"></a>


    und die URLs und den Index des Bildes in oeffne(index) jeweils anpassen.


    Ich nehme an, beim Mouseover möchtest Du eine kleine Beschreibung des Bildes anzeigen. Dazu müsstest Du einmal nach"javascript tooltips" googeln.


    Viele Grüße - Ulrich

    Hallo Ulrich,


    danke erstmal für deine ausführliche Antwort!


    Ich ziemlicher Anfänger... ich arbeite mit Mambo und da wird einem viel erleichtert.Ich kann da dann halt nur so einen Seiteneditor öffen..und dann? Kannst du mir vielleicht noch sagen, wo ich diesen Code einsetzen muss?


    Sorry, dass ich so lange nicht geantwortet habe.


    Grüße


    Patrick

    Hallo Patrick,
    mit Mambo kenne ich mich jetzt wieder nicht aus. Auf jeden Fall musst Du in irgendeiner Form den HTML-Quelltext editieren können.
    Dort findest Du zwei Tags:

    Code
    1. <head>

    und

    Code
    1. </head>

    . Dazwischen musst Du den ersten Abschnitt einfügen.
    Dann wie du es mit Mambo kennst, die Bilder (Thumbnails) mit den Links auf die großen Bilder einfügen. Anschließend findest Du im Quelltext Code der Form:

    Code
    1. <a href="elm02.jpg"><img src="elm02lk.jpg"></a>


    für jedes Bild, wobei elm02.jpg die Adresse des großen und elm02lk.jpg die Adresse des kleinen Bildes (Thumbnail) ist.
    Im a-href-Tag dann einfügen:

    Code
    1. onclick="oeffne(0); return false;"


    wobei 0 der Index des Bildes in der Liste der URLs im ersten Codeabschnitt ist. Das öffnet dann das Popup-Fenster. Wenn etwas nicht geht, dann lade die HTML-Datei hoch und poste hier die Adresse.
    Viele Grüße - Ulrich