zwei praktische JavaSkripts:


 Script für Popup-Bilder:

So sieht's aus:


Java Script:

<script type="text/javascript"><!--
function ImageWindow(Imgsrc , ImgName, xSize, ySize) {  //popUp Image V2.2
   if (ImgName == '' ) ImgName = Imgsrc;                //wenn kein Name angegeben- verwende Dateinamen
   var popup = window.open(Imgsrc,"Bild",'width='+xSize+',height='+ySize+',resizable=yes');
   popup.resizeTo(xSize+12,ySize+31);                   //<-noch zu ändern!

   popup.document.write('<html><head><title>');
   popup.document.write(ImgName);
   popup.document.write('</title></head>');
   popup.document.write('<BODY leftmargin="0" topmargin="0" bgcolor="#C8C8C8">');
   popup.document.write('<img src=" '+Imgsrc+' " alt="" border="">');
   popup.document.write('</body></html>');
   popup.focus();
   if( navigator.appName.substring(0,8) == "Netscape"){   //sonst sieht man in NS garnix!
      popup.location = Imgsrc;
      popup.resizeTo(xSize+15,ySize+15);
   }
}
--></script>

Anwendung:

<a href="javascript:ImageWindow('bigBild.jpg','BildTitel',800,600)"><img src="kleinesBild.jpg" align=middle border=0></a>




 Script für Vollbild-Popup:

So sieht's aus:


Java Script:

<script language="JavaScript"><!--
function ImageFullScreen(theURL,ImgName,xSize,ySize) {        //FullScreen Image V2.2
  if (ImgName == '') ImgName = theURL.substring(theURL.lastIndexOf('/')+1,theURL.lastIndexOf('.'));
  if( navigator.appName.substring(0,8) == "Netscape" ){       //NS kann kein fullscreen,
    ImageWindow(theURL,ImgName,xSize,ySize);                  //deshalb wird die normale Popup Funktion verwendet
  }else{
    var Imgsrc = theURL;
    var popup = window.open(Imgsrc,"Bild",'fullscreen=1, scrollbars=1,left=0,top=0');
    popup.document.write('<html><head><title>'+ImgName+'</title>');
    popup.document.write('<link rel="stylesheet" href="fullscreen.css" type="text/css">');
    popup.document.write('</head><BODY leftmargin="0" topmargin="4" bgcolor="#000000"><font color="#FFFFFF">');
    popup.document.write('<a href="javascript:window.close();">zum Schließen <b>hier</b> klicken</a>');
    popup.document.write('<div align="center"> <img src=" '+Imgsrc+' "> <br>');
    popup.document.write('<b>'+ImgName+'</b></div></font>');
    popup.document.write('</body></html>');
    popup.focus();
  }
}
--></script>


Anwendung:

<a href="javascript:ImageFullScreen('bigBild.jpg','BildTitel',800,600)"><img src="kleinesBild.jpg" border=0></a>




 Download:

Hier gibt's die Skripten als JS(JavaScript)-Datei zum Downloaden:

DateiEnthält Funktionen:
ViewImage.jsImageWindow
ImageFullScreen
fullscreen.cssverschönert das aussehen von ImageFullScreen

und so bindet man eine JS-Datei ein:

<script type="text/javascript" language="JavaScript" src="ViewImage.js" ></script>

 

 

 

 

 

 

 

 

Links:

Coding
Html
  HTML tag reference guide
webmonkey