Zur Navigation

Bilder in vorgegebener Fenstergröße öffnen. [3]

21 C)-(iLL@

Es sollte schon serverseitig geschehen, dass die Quelle (src) des Bildes in den HTML img-Tag geschrieben wird.

Wenn Du das mit html-Dateien machen möchtest, dann muss die Größe entweder immer fix sein (d.h. Du musst bei jedem Hinzufügen eines neuen Bildes die Größe im Link anders übergeben) oder Du bekommst Probleme mit dem Laden. Das "onload", welches die Funktion "resizeToImage" ausführt, darf erst dann ausgeführt werden, wenn das Bild geladen ist.

Das Problem ist, wenn Du den Dateinamen mit Javascript übergeben möchtest (z.b. über ein verstecktes Feld im Fenster, welches die Gallerie aufruft), löst der Browser das onload-Ereignis zu früh aus, d.h. bevor das Bild geladen ist (da die Quelle des Bildes beim Laden ja noch nicht bekannt ist(!)) - es gibt dann für JS in dem Moment keine Möglichkeit festzustellen, wie groß das Bild sein wird.

Dann gibt es auch keine Fensteranpassung, außer Du wartest bis das Bild geladen ist und aktualisierst dann mit F5 - aber wer will das schon :)

Eine Möglichkeit wäre auch, für jedes Bild eine HTML-Datei anzulegen, in der das Bild fix eingetragen ist. Das ist aber nicht sehr schön.

05.09.2005 15:55 | geändert: 05.09.2005 15:57

22 Theo24 (Gast)

Hallo,
Ich bin durch zufall auf diese Seite gekommen weil ich acuh gerne die Popups mit Bidl hätte...
Klappt soweit auch alles, nur was ist mit dem internet Explorer los, da bekomm ich nur ne weiße seite mit garnix....

Kann mir das einer erklären, bzw. die Lösung des roblems verraten?

Quelltext sieht folgendermaßen aus:

<html>
<head>
<title>EC-Jugendkreis Böhl-Iggelheim</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
a:link    { color:#FFFFFF; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; font-weight: bold; line-height: 1;}
a:visited { color:#FFFFFF; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; font-weight: bold; line-height: 1;}
a:hover   { color:#FFFFFF; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; font-weight: bold; line-height: 1;}
</style>

<script language="JavaScript">
<!--
function popup(name,eigenschaften)
{
window.open('',name,eigenschaften);
}
//-->
</script>

</head>
<body bgcolor="#B2D1F0"  topmargin="0" leftmargin="0" marginhight"0" rightmargoin="0" marginleft="0">
<table width="995" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td valign="top"> 
      <table width="995" border="0" cellspacing="0" cellpadding="0" height="100">
        <tr> 
          <td rowspan="2" background="../images/head_1.jpg" width="35">&nbsp;</td>
          <td width="500" background="../images/head_bg.jpg" height="35">&nbsp;</td>
          <td rowspan="2" background="../images/head_2.jpg" width="25">&nbsp;</td>
          <td rowspan="2" width="94" background="../images/head_logo.jpg">&nbsp;</td>
          <td rowspan="2" background="../images/head_bg3.jpg" valign="top"><br>
          <font face="Verdana, Arial, Helvetica, sans-serif" size="5"><b>&nbsp;EC-Jugendkreis<br>&nbsp;&nbsp;&nbsp;Böhl-Iggelheim </b> </font></td>
          <td rowspan="2" width="30" background="../images/head_end.jpg">&nbsp;</td>
        </tr>
        <tr> 
          <td background="../images/head_bg2.jpg" height="65">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td> 
      <table width="995" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td width="150" valign="top"> 
            <table width="150" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td height="20" background="../images/tab_1.jpg">&nbsp;</td>
              </tr>
              <tr> 
                <td bgcolor="#0066CC" height="11">&nbsp;</td>
              </tr>
              <tr> 
                <td background="../images/tab_line_b.jpg" height="30"></td>
              </tr>
              <tr> 
                <td bgcolor="#0066CC">
		  &nbsp;&nbsp;&nbsp;<a href="jk_home.html">Home</a><br>
                  &nbsp;&nbsp;&nbsp;<a href="jk_facts.html">Facts</a><br>
                  &nbsp;&nbsp;&nbsp;<a href="jk_programm.html">Programm</a><br>
                  &nbsp;&nbsp;&nbsp;<a href="jk_bilder.html">Bilder</a><br>
		  &nbsp;&nbsp;&nbsp;<a href="jk_gaestebuch.html">G&auml;stebuch</a><br>
		  &nbsp;&nbsp;&nbsp;<a href="jk_links.html">Links</a><br>
		  &nbsp;&nbsp;&nbsp;<a href="jk_kontakt.html">Kontakt</a><br>
              </tr>
              <tr> 
                <td bgcolor="#0066CC" height="11">&nbsp;</td>
              </tr>
              <tr> 
                <td background="../images/tab_line_bo.jpg" height="40"></td>
              </tr>
              <tr> 
                <td bgcolor="#FC830A">
		  &nbsp;&nbsp;&nbsp;<a href="tb_home.html">Home</a><br>
                  &nbsp;&nbsp;&nbsp;<a href="tb_waswo.html">Was, Wo, ..?</a><br>
                  &nbsp;&nbsp;&nbsp;<a href="tb_termine.html">Termine</a><br>
                  &nbsp;&nbsp;&nbsp;<a href="tb_location.html">Location</a><br>
		  &nbsp;&nbsp;&nbsp;<a href="tb_interaktiv.html">Interaktiv</a><br><br>
              </tr>
              <tr> 
                <td background="../images/tab_line_o.jpg" height="20">&nbsp;&nbsp;&nbsp;<a href="impressum.html">Impressum</a></td>
              </tr>
              <tr> 
                <td height="20" background="../images/tab_2.jpg">&nbsp;</td>
              </tr>
            </table>
          </td>
          <td width="24">&nbsp;</td>
          <td width="821" valign="top"> <br>
            <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
              <tr> 
                <td> 
                  <table width="600" border="0" cellspacing="0" cellpadding="0">
                    <tr> 
                      <td colspan="2" height="20" bgcolor="#0066CC"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#FFFFFF"><b>&nbsp;Bilder: Geh auf's Ganze 2001</font></b></font></td>
                      <td height="20" width="150" background="../images/tab_b1.jpg">&nbsp;</td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr> 
                <td bgcolor="#0066CC"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">
		<br>
		&nbsp;Klicke auf die Bilder um sie zu vergr&ouml&szlig;ern<br>
		<br>
		<br>
		&nbsp;<b><u>Offener Abend mit Torsten Dobinski 25.04.2001</u></b><br>
		<p align="center">
		&nbsp;<a href="../bilder/jk_bilder_2001_gag_01.jpg" target="Popup" onclick="javascript:popup('Popup','width=837,height=592')"><img src="../thumb/jk_bilder_2001_gag_01.jpg" border="0"></a><a href="../bilder/jk_bilder_2001_gag_02.jpg" target="Popup" onclick="javascript:popup('Popup','width=470,height=347')"><img src="../thumb/jk_bilder_2001_gag_02.jpg" border="0"></a><a href="../bilder/jk_bilder_2001_gag_03.jpg" target="Popup" onclick="javascript:popup('Popup','width=780,height=297')"><img src="../thumb/jk_bilder_2001_gag_03.jpg" border="0"></a><br>
		&nbsp;<a href="../bilder/jk_bilder_2001_gag_04.jpg" target="Popup" onclick="javascript:popup('Popup','width=389,height=306')"><img src="../thumb/jk_bilder_2001_gag_04.jpg" border="0"></a><a href="../bilder/jk_bilder_2001_gag_05.jpg" target="Popup" onclick="javascript:popup('Popup','width=466,height=303')"><img src="../thumb/jk_bilder_2001_gag_05.jpg" border="0"></a><a href="../bilder/jk_bilder_2001_gag_06.jpg" target="Popup" onclick="javascript:popup('Popup','width=455,height=324')"><img src="../thumb/jk_bilder_2001_gag_06.jpg" border="0"></a><br>
		</p>
		<p align="right"><a href="jk_bilder.html">Zurück zur Bilderseite</a>&nbsp;</p>
		</font></td>
              </tr>
              <tr> 
                <td> 
                  <table width="600" border="0" cellspacing="0" cellpadding="0">
                    <tr> 
                      <td background="../images/tab_b2.jpg" width="150">&nbsp;</td>
                      <td colspan="2" bgcolor="#0066CC">&nbsp;</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td valign="top"> 
      <table width="995" border="0" cellspacing="0" cellpadding="0" height="45">
        <tr> 
          <td height="45" width="145" background="../images/end_wme.jpg">&nbsp;</td>
          <td background="../images/end_bg.jpg" width="227">&nbsp;</td>
          <td width="225" background="../images/copyright.jpg">&nbsp;</td>
          <td background="../images/end_bg.jpg" valign="middle" width="398"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font size="5" color="#FFFFFF"><i><b>EC-Jugendkreis & Treff-Bar</b></i></font></font></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

23.11.2005 21:42

23 Jörg Kruse

Hallo Theo24,

du hast vergessen, den Kommentar innerhalb des <style> Elementes wieder zu schließen: deswegen interpretieren der IE und auch Opera alles nachfolgende nicht mehr - während bei Firefox wohl die Fehlerkorrektur den Fehler auffängt. So sollte es auch bei den anderen Browser funktionieren:

<style type="text/css">
<!--
a:link    { color:#FFFFFF; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; font-weight: bold; line-height: 1;}
a:visited { color:#FFFFFF; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; font-weight: bold; line-height: 1;}
a:hover   { color:#FFFFFF; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; font-weight: bold; line-height: 1;}
-->
</style>

mfG Jörg

23.11.2005 22:00

24 Yogie (Gast)

Mir hat bereits der erste Quelltext zur Lösung des problems geholfen
funzt auch echt prima

aber wie geb ich jetzt die position des popups an?

06.01.2006 16:45

25 Jörg Kruse

Hallo Yogie,

die Position des Popups kannst du mit left und top bestimmen, z.B.:

<a href="bild-1.html" target="Popup" onclick="javascript:popup('Popup','width=200,height=200,left=100,top=50')">Bild Nr. 1</a>

06.01.2006 17:14

26 yogie (Gast)

^^ hätt ich auch selber drauf kommen müssen %D
aber auf jeden fall vielen dank =D

06.01.2006 17:23

27 djust

hallo, ich habe über google dieses bilderscript gefunden und bei mir eingebaut. es funktioniert mit firefox wunderbar, allerdings schneidet er mir beim IE immer ein teil des rechten rands ab. die höhe stimmt.
da mittlerweile ein paar neue browserversionen erschienen sind, muss vielleicht was im quelltext modifiziert werden? ich würde mich sehr über eure hilfe freuen.

26.10.2008 17:06 | geändert: 26.10.2008 17:18

28 Jörg Kruse

Hallo djust,

kannst du einen Beispielcode oder einen Link zu einer Beispielseite posten? und in welcher Version des IE wird der schwarze Balken angezeigt?

26.10.2008 17:31

29 djust

hallo jörg,
bei mir erscheint kein schwarzer balken. die breite des fensters in der das bild angezeigt wird ist im IE7 ledeglich zu gering. ansonsten funktioniert alles wunderbar. der code ist 1:1 von der ersten seite dieses threads hier.

26.10.2008 18:07

30 Jörg Kruse

Auf Seite 1 befinden sich ganz viele Codes - welchen Beitrag meinst du?

26.10.2008 20:14