Click to See Complete Forum and Search --> : Crisp pictures


jnapier
04-30-2003, 01:08 PM
Hi! Can anyone explain to me how I can take a digital photo saved as a jpg. 480x640 with a resolution at 300x300 and develope VERY CRISP thumbnails that load quickly which will point to the larger image, which I also want to be crisp and load quickly. Any thoughts as to which is the best image editing program to do this? Any special techniques I could tweak? Please help! Thanks! jnapier

havik
04-30-2003, 03:13 PM
Try this, just edit it to meet your needs. Create thumbnails that are 50x50 pixels in a photo editor and place these images in the body tag. Then place your real images into the script.

Havik

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script type="text/javascript">

function popup(image) {

switch(image) {
case "image1":
imagesrc='<img src="enter picture 1 url here (also enter the real width and height of the pictures)" width="480" height="600" border="0" alt="" onclick="window.close()">';
imagewidth=480;
imageheight=600;
break;

case "image2":
imagesrc='<img src="enter picture 2 here (same for this width and height)" width="480" height="600" border="0" alt="" onclick="window.close()">';
imagewidth=480;
imageheight=600;
break;

default:
imagesrc="Sorry, it appears the link is broken.";
imagewidth=200;
imageheight=30;
break;
}

newwin = window. open('','','top=150,left=150,width='+imagewidth+',
height='+imageheight+',resizeable=no');
if (!newwin.opener) newwin.opener = self;
with (newwin.document) {
open();
write('<html><head></head>');
write('<body topmargin="0" leftmargin="0">' + imagesrc);
write('</body></html>');
close();
}
}


</script>

</head>

<body>

<a href="javascript::popup('image1')"><img src="picture 1 thumbnail" width="48" height="60" border="0" alt=""></a>
<a href="javascript::popup('image2')"><img src="picture 2 thumbnail" width="48" height="60" border="0" alt=""></a>


</body>
</html>

jnapier
04-30-2003, 04:54 PM
WHEW! Thanks for your reply, even tho it's almost Greek to me. I'm pretty new at html, too. But I'll check it out. Another thing I really needed to know is how to make the thumbnails to be very clear and cris AND fast downloading, rather than the fuzzy versions I often see. Can you or someone also help me in that area?
Thanks! jnapier

jnapier
04-30-2003, 05:22 PM
Hi Havik! I just tried the HTML code and couldn't get it to work. I did a print screen and am trying to send it with this reply. Can you see what the problem is? Thanks, jnapier

jdavia
05-01-2003, 03:53 AM
Your images will never be more crisp than the original. Changing its size larger or smaller either adds more pixels or takes some away. Meaning the detail is blurred one way, or lost the other way. The best digital images when taken, should be as close-up as needed to capture ezactly what you want to show. This way the pixels are not altered by sizing.

The higher the resolution, the sharper the image and the longer it will take to load. So some sacrifices have to be made. You can't have them all. Which might be why you see what you do on the internet.
You need good photos to start with, saved in the highest resolution, and a good program like PhotoShop to work with.

havik
05-08-2003, 02:29 PM
Sorry, I haven't checked this post in awhile. I can't quite see what the error is (the picture isn't readable), but I know the code works so it's probably the way you entered the code.

For some reason, the following line of code was automatically formatting incorrectly. There should be no spaces at all in this section:

newwin = window. open('','','top=150,left=150,width='+imagewidth+', height='+imageheight+',resizeable=no');


Havik