Bilder vergrößern

[sissi]

Hi
Ich erstelle grade meine eigene Internetseite.
Darauf befinden sich Bilder, diese sollen beim draufklicken in einem pop-up nochmal geöffnet werden und auch größer sein.
Wie geht das ???

[Tom]

Hello,

Darauf befinden sich Bilder, diese sollen beim draufklicken in einem pop-up nochmal geöffnet werden und auch größer sein.

Die einfachste Lösung ist, jedes Bild in verschiedenen Vergrößerungsstufen abzuspeichern und dann einen Link hinter das kliene Bild zu legen.

http://de.selfhtml.org/html/grafiken/verweise.htm

und wenn Du ein Popup haben willst:

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

<a href="grossesBild.jpg"
   F1 = window.open('grossesBild.jpg','Fenster1','width=310,height=400,left=0,top=0'); return false;"><img src="kleinesBild.jpg" width="160" height="34" border="0" alt="Vorschaubild"></a>

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Michael Nagler]

Hallo Tom,

Viele Grüße aus Brauschweig - da komm ich auch her :)

Mit freundlichen Grüßen,
Michael Nagler

[Tom]

Hello,

Sorry, da war was verloren gegangen:

<a href="grossesBild.jpg"
     onClick="F1 = window.open('grossesBild.jpg','Fenster1','width=310,height=400,left=0,top=0'); return false;"><img src="kleinesBild.jpg" width="160" height="34" border="0" alt="Vorschaubild"></a>

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Michael Nagler]

Hallo,

lies bitte erstmal SelfHTML ;) Du nimmst am besten zwei Versionen von jedem Bild - ein großes (für das Popup) und ein Thumbnail (kleine Version des Bildes für die Übersichtsseite - am besten mit einem guten Malprogramm erstellen). Es gibt auch Software, die dir solche Präsentationen automatisch generiert. Aber wenn du es selber machen willst, bau dir eine Seite mit den Thumbnails und verlinke jedes Bild mit target="_popup" oder noch besser per Javascript (damit kannst du das Popupfenster besser justieren und konfigurieren)

Ich hab da ein Script zu, kannste verwenden:

/**
 * Javascript Window Popper V1.01
 * ------------------------------
 * Browser unabhängiger Fenster öffner
 *
 * Methoden:
 *
 * 1) popup( url, width, height, top, left, name, features )
 *
 *    Öffnet ein neues Fenster mit der angegebenen URL, Breite und Höhe. Das Fenster wird
 *    auf dem Bildschirm zentriert, wenn die Angaben top und left fehlen.
 *
 *    Wenn kein Name angegeben wird, wird ein eindeutiger Name automatisch generiert.
 *    Falls keine Features angegeben werden, erhält das Fenster auch keine. Wenn ein Feature
 *    gewünscht wird, kann dieses einfach durch seinen Namen angegeben werden.
 *
 *    Unterstützte Features sind:
 *    toolbar, scrollbars, menubar, resizeable, status, location, directories
 *
 *    Beispiel: popup( "help.html", 420, 420, null, null, "help", "scrollbar" );
 *
 * Variablen:
 *
 * 1) defaultWidth  Voreingestellte Breite, falls der Parameter bei width popup() fehlt
 *
 * 2) defaultWidth  Voreingestellte Höhe, falls der Parameter height bei popup() fehlt
 *
 */

var defaultWidth  = 580;
var defaultHeight = 420;

// --------------------------------------------------------------------------------------
// private
var count = 0;

// popup( url, <name>, <features>, width, height, top, left )
function popup( url, width, height, top, left, name, features )
{
 if( width == null )  width  = defaultWidth;
 if( height == null ) height = defaultHeight;

if( document.all )
 {
  availWidth  = window.screen.availWidth;
  availHeight = window.screen.availHeight;

if( top  == null ) top  = ",top="  + ( availHeight / 2 - height / 2 ); else top  = ",top=" + top;
  if( left == null ) left = ",left=" + ( availWidth  / 2 - width  / 2 ); else left = ",left="+ left;
 }
 else
 {
  if( top  == null ) top  = (screen.height) ? ",screenY=" + (screen.height / 2 - height / 2 ) : ""; else top  = ",screenX="+ top;
  if( left == null ) left = (screen.width)  ? ",screenX=" + (screen.width  / 2 - width  / 2 ) : ""; else left = ",screenY="+ left;
 }

tmp = ""
 if( features != null && typeof( features ) == "string" ) {
  tmp = "toolbar=" + ( features.indexOf("toolbar") > - 1 ? "yes" : "no" ) + ",";
  tmp += "scrollbars=" + ( features.indexOf("scrollbar") > - 1 ? "yes" : "no" ) + ",";
  tmp += "menubar=" + ( features.indexOf("menubar") > - 1 ? "yes" : "no" ) + ",";
  tmp += "resizable=" + ( features.indexOf("resizable") > - 1 ? "yes" : "no" ) + ",";
  tmp += "status=" + ( features.indexOf("status") > - 1 ? "yes" : "no" ) + ",";
  tmp += "location=" + ( features.indexOf("location") > - 1 ? "yes" : "no" ) + ",";
  tmp += "directories=" + ( features.indexOf("directories") > - 1 ? "yes" : "no" ) + ",";
  features = tmp+"width="+ width +",height="+ height + top + left;
 } else {
  features = "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,"
           + "resizable=no,width="+ width +",height="+ height + top + left;
 }

// alert( features );
 if( name == null ) {
  id = count + Math.floor( Math.random() * 8192 );
  name = "Win"+id;
 }

win = window.open( url, name, features);
 count++;

if( win ) {
  win.focus();
 }
}

Mit freundlichen Grüßen,
Michael Nagler