Bilder auf bestimmte Weise verlinken, wie umsetzen?

gaedingar

Hallo, wollte mich langsam mal dran versuchen, die Galerien auf meiner HP mit Inhalten zu füllen - würde das ganz gerne in dem Stil machen, wie es auf dieser website gezeigt wird - dh. man hat eben diese Übersicht mit den Vorschaubildern und wenn man diese anklickt, öffnet sich das entsprechende Foto in so einem "Kasten", also nicht mit der Browserzeile und so. Wie macht man sowas, habe zur "technischen" Umsetzung leider keine Idee!

LG

driver

geht mit javascript und window.open...

http://de.selfhtml.org/javascript/objekte/window.htm#open

MeDoP

Vielleicht hilft dir mein kleiner Popup-Generator weiter?

x-seiting Popup-Creator

gaedingar

MeDoP: Danke, aber da steig ich nicht durch

driver: Klingt auch ziemlich kompliziert! *keine Ahnung von Javascript hab*

MeDoP

Wie du steigst da nicht durch?

Bildbreit und -höhe angeben. Bildadresse angeben und Beim Linktitel irgendwas. Das ersetzt du dann später durch dein kleines Vorschaubild!

gaedingar

Hey, es klappt! Danke, ein geniales Teil hast du da gebastelt^^

gaedingar

hätte da nochmal ne frage

hab die ersten fotos jetzt als popups auf meine seite gepackt, hat dank des creators von medop auch ganz gut geklappt soweit... allerdings sind die fotos im popup-fenster so seltsam nach "unten rechts" gerutscht in einigen browsern... hab's bei mir und auf dem rechner meines bruders ausprobiert, das problem tritt bei'm i-net explorer und im aol-browser auf... bei opera und firefox ist alles okay, da ist da popup genauso gross wie das fenster (400x300pixel)...

habt ihr ne idee, woran das liegen könnte, dass es im internet explorer und bei aol so seltsam asymmetrisch "verzerrt" ist? kann man das irgendwie korrigieren?

hier nochmal der link zu der seite, auf der die fotos gelistet sind:

http://www.hestamyndir.de/dim2006.html

danke + lg

driver

erweitere evtl mal dein link um folgende 2 screen angaben...

screenX = 0, screenY = 0

Code

<a href="#" onclick="window.open ('http://www.hestamyndir.de/dim2006/dim2006_01.jpg', '_blank', 'toolbar=no, location=no, status=no, menubar=no, scrollbars=no, resizable=no, width=400, height=300, screenX=0, screenY=0')">

gaedingar

schade, klappt so nicht

gaedingar

hey, hat sonst niemand eine idee?

denkt ihr, dass es mit java die gleichen probleme gibt?

Ronald

Das Problem ist, daß du auch in dem kleinen fenster eine Mini-HTML-Seite erzeugen mußt, um den Rand wegzubekommen. Die Lösung steht übrigens auf der von dir als Beispiel gezeigten HP.
Ich hab das mal für deine HP umgebaut, probiere es aus:

HTML

<html>
<head>
<title>dim2006</title>
<meta name="author" content="Nina Peters">
<script type="text/javascript" language="JavaScript">
<!--
function GrafikAnzeigen(GrafikURL, Breite, Hoehe)
{
        Fensteroptionen="toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0";


        Grafikfenster=window.open("", "", Fensteroptionen + ',width=' + Breite + ',height=' + Hoehe);
        Grafikfenster.focus();
        Grafikfenster.document.open();
        with(Grafikfenster)
        {
          document.write("<html>\n<head>\<title>DIM 2006</title>\n</head>\n<body style='margin:0px'>\n[img]"+ GrafikURL +"[/img]\n</body>\n</html>");
        }
}
//-->
</script>
</head>
<body text="#FFFFFF" bgcolor="#333333" link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF">
<font face="VERDANA,ARIAL,HELVETICA"><font size="-1">[b]DIM 2006[/b]






<p align="justify">Im Jahr 2006 wurden die (internationalen) Deutschen Islandpferdemeisterschaften erstmals auf dem [url='http://www.gestuet-forstwald.de/']Gest&uuml;t Forstwald[/url] der Familie Zingsheim in Blankenheim (Nordeifel) ausgetragen. Nachfolgend finden Sie eine kleine Auswahl meiner Fotos, die w&auml;hrend der vier Turniertage entstanden sind.</font></font>








<div align="center">
<table cellpadding="8">
<tr>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_01.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_01_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_02.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_02_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_03.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_02_klein.jpg[/img][/url]</td>
</tr>
<tr>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_04.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_04_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_05.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_05_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_06.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_06_klein.jpg[/img][/url]</td>
</tr>
<tr>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_07.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_07_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_08.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_08_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_09.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_09_klein.jpg[/img][/url]</td>
</tr>
<tr>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_10.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_10_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_11.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_11_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_12.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_12_klein.jpg[/img][/url]</td>
</tr>
<tr>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_13.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_13_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_14.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_14_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_15.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_15_klein.jpg[/img][/url]</td>
</tr>
<tr>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_16.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_16_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_17.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_17_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_18.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_18_klein.jpg[/img][/url]</td>
</tr>
<tr>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_19.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_19_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_20.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_20_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_21.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_21_klein.jpg[/img][/url]</td>
</tr>
<tr>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_22.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_22_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_23.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_23_klein.jpg[/img][/url]</td>
<td>[url='javascript:GrafikAnzeigen('http://www.hestamyndir.de/dim2006/dim2006_24.jpg','400','300')'][img]http://www.hestamyndir.de/dim2006/dim2006_24_klein.jpg[/img][/url]</td>
</tr>
</table>
</div>


<div align="center">[img]fotos/pfeil1.jpg[/img] <font face="VERDANA,ARIAL,HELVETICA"><font size="-1">[b]Kameramodell:[/b] Panasonic Lumix DMC FZ5.</font></font></div>
</p>


</body>
</html>

Alles anzeigen

Wenn deine Bilder immer das gleiche Format haben, dann könnte man es auch noch einfacher machen.

G.a.d.M.

Ronald

holgermac

hallo zusammen,
möchte gerne an diesem thema anknüpfen.wie schon einmal erwähnt habe ich meine hp mit dem baukastensysthem von 1und1 erstellt.
da ich auf meiner seite die bilder leider nicht in der größe einfügen kann wie ich es gerne hätte,würde ich ja auch gerne die bilder klein anzeigen das sie durch anklicken (popup) in einem neuen fenster angezeigt werden.
nun zur frage,geht das auch bei einem hp baukastensysthem??

holger

driver

wenn du dort selber html code einfügen kannst, ja.

musst einfach von einem bild 2 versionen erstellen.
ne kleine und ne große. die kleine tust einbinden und mit
nem link versehen, und die große dann als ziel angeben...

n grafikprogramm hast ja, oder ? im notfall geht sogar paint

Ronald

Zitat von holgermac

hallo zusammen,
möchte gerne an diesem thema anknüpfen.wie schon einmal erwähnt habe ich meine hp mit dem baukastensysthem von 1und1 erstellt.
da ich auf meiner seite die bilder leider nicht in der größe einfügen kann wie ich es gerne hätte,würde ich ja auch gerne die bilder klein anzeigen das sie durch anklicken (popup) in einem neuen fenster angezeigt werden.
nun zur frage,geht das auch bei einem hp baukastensysthem??

holger

Ich weiß nicht, welchen Vertrag du bei 1&1 hast - aber normalerweise findest du auf der Startseite neben dem Link zum Homepage-Bakasten auch einen Link "Fotoalbum" - das kann auch fast alles, was das Herz begehrt.

G.a.d.M.

Ronald

asdf-mann

hallo,

ich habe das java-script von ronald eingebaut und funktioniert tadellos. gibt es eine möglichkeit, dass automatisch die maße des zu öffnenden bildes ausgelesen und ins java-script übernommen werden?

lg!

Ronald

Mit Javascript geht das nicht, da Javascript auf dem Client ausgeführt wird. Da hast du dann nur die Möglichkeit das Fenster später in der Größe zu ändern, mein Firefox blockt so etwas aber.

Mit PHP wäre es möglich, man kann die Werte dann dem Javascript übergeben - das ist aber nicht mit 2 Worten erklärt, wenn jemand kein PHP kann.

G.a.d.M.

Ronald

asdf-mann

mit php kenn ich mich zwar ein wenig aus, aber leider steht mir auf dem webspace kein php zur verfügung. kann leider auch nicht den webspace wechseln, da ich im auftrag von jemand anderem arbeite

aber vielen dank für die extrem rasche antwort, roland!

lg!

Ronald

Grrr ...

ich heiße Ronald

G.a.d.M.

Ronald

asdf-mann

oh, tut mir leid, wollte mich nicht verschreiben.

liegt wohl daran, dass mein vater rOLANd heißt und ich deshalb die buchstaben falsch gelesen/interpretiert habe

war keine absicht. sry ronald

lg

Tags