JavaScript: Thumbnails/Previewbilder

THUMBNAILS/PREVIEWBILDER

Tryck på bilderna nedan så kommer de att öppnas och visas i ett större format. Fönstret stängs lätt då man trycker på den förstorade bilden.
De bilder jag har här nedan visas nu i sitt egentliga format och förstoras då man trycker på dem. Man kan givetvis även visa bilderna i ett mindre format på sidan och få upp bilden i dess riktiga storlek då man trycker på bilden.

Detta sätter du i HEAD (efter <HEAD> och före </HEAD>):

<SCRIPT LANGUAGE="javascript">
<!--This is one of many scripts which are available at:     *---
//--http://www.JavaScript.nu/javascript                     *---
//--This script is FREE, but you MUST let these lines       *---
//--remain if you use this script.                          *---

//***---Detta visas då musen dras över bilden
PreviewText="Tryck för förstoring";

//***---Ruvriken av det nya fönster som innehåller den förstorade bilden
NewWindowTitle="Förstoring av bilden";

//***---Visas då musen förs över den förstorade bilden i det nya fönstret
ClickToCloseText="Tryck för att stänga fönstret";

function visaBild(imageURL, showThisSize, width, height)
{
newHeight=Math.round(height*showThisSize/width);
document.write("<A HREF=\"javascript:showRealSize('"+imageURL+"', "+width+", "+height+");\"><IMG SRC='"+imageURL+"' WIDTH='"+showThisSize+"' HEIGHT='"+newHeight+"' BORDER='0' ALT='"+PreviewText+"'></A>")
}

function showRealSize(imageURL, width, height)
{
NewImageWindow=window.open("", Math.round(Math.random()*10000000000), "width="+width+",height="+height);
NewImageWindow.document.open();
NewImageWindow.document.write("<HTML><HEAD>");
NewImageWindow.document.write("<TITLE>"+NewWindowTitle+"</TITLE>");
NewImageWindow.document.write("</HEAD>");
NewImageWindow.document.write("<BODY MARGINHEIGHT='0' TOPMARGIN='0' LEFTMARGIN='0' RIGHTMARGIN='0' MARGINWIDTH='0'>");
NewImageWindow.document.write("<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0><TR><TD><A HREF='javascript:top.close();'><IMG SRC='"+imageURL+"' WIDTH='"+width+"' HEIGHT='"+height+"' ALT='"+ClickToCloseText+"' BORDER='0' HSPACE=0 VSPACE=0></A></TD></TR></TABLE>");
NewImageWindow.document.write("</BODY></HTML>");
}
//-->
</SCRIPT>

Detta sätter du efter <BODY> och före </BODY>
(För varje bild du ska ha måste du kopiera och klistra detta till din sida en gång.
Där denna kod finns visas din bild.):
<SCRIPT LANGUAGE="javascript">  </SCRIPT>

Om du inte vet hur du ska spara JavaScriptet till din hemsida, tryck då här.