koder til "klik på billeder " på hjemmeside

Hvis du ligger inde med Photoshop, så kan den lave det hele for dig ved hjælp af et par klik

Det er nok de færreste der har råd til photoshop...

Din html fil, består af nogle forskellige tag. Tag nedenstående kode og sæt den ind imellem <head> og </head>:

<Script Language="JavaScript">
// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.

// SETUPS:
// ===============================

// Set the horizontal and vertical position for the popup

PositionX = 100;
PositionY = 100;

// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)

defaultWidth  = 500;
defaultHeight = 500;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = true;

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');     
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();       
}}
</script>


Og nedenstående sætter du inde mellem <body> og </body>:

<body>
<a href="java script:popImage('billede_small.gif','Some Title')">
<img src="billede.gif" border="0">
</a>
</body>

Når du så klikker på det lille billede (billede_small.gif), åbner der et vindue i billedets fuldestørrelse, med det storebillede inden i.

Det er selvfølgelig det store billeder der skal linkes til:

<body>
<a href="java script:popImage('billede_big.gif','Some Title')">
<img src="billede.gif_small" border="0">
</a>
</body>

billede.gif_small -> billede_small.gif

Du kan se et eksempel her: www.bokaj.dk/eksperten/gribben/

Tusind tak, det ser meget flot ud, lige det jeg forestillede mig skulle ske med mine billeder

Det kunne sagtens lavers meget mere enkelt, men det smarte er at det er lige meget hvor store dine billeder er, det finder scriptet selv ud af, og laver en boks i samme størrelse.

Håber du kan finde ud af det, ellers smid et indlæg her, så skal jeg se om jeg kan hjælpe.

Ok, tak det lyder godt, især at scriptet selv finder størrelsen, der kan jo godt være variationer.
Nu bliver det nok ikke lige med det første, jeg laver det, "ånden" skal være over mig ;-)

Men jeg vender frygteligt tilbage, hvis ikke det lykkes ;-D