Resize Image to frame size

Posted on 2006-05-26
Last Modified: 2013-12-25
I have a web site dedicated to family pictures.  It uses frames.  One frame on the left that has a list of hyperlinks of different photo categories.  When you click on one of the categories it loads the a html page with a table of thumbnails.  I want the user to be able click on any of the thumbnails in frame2 on the right to display the picture in the size of the frame2 on the right.  Right now if the user clicks on the thumbnail it will display the picture in frame2 in fullsize and you only see abot 1/4 of the picture.  It's too big for the frame.  I DO NOT want to have to physically resize all of my images to a smaller resolution.  I WANT to have the browser resize the picture to fit the frame.  How can I accomplish this?  Does Front Page facilitate anything like this?

Here is my existing HTML:


<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Chrissie &amp; Jefferson</title>
<meta name="Microsoft Theme" content="bars 1011">


<p><b><font size="5">Chrissie &amp; Jefferson's Wedding Ceremony</font></b></p>
<div align="left">
      <table border="1" id="table1" cellspacing="10" style="border-color: #000000" bgcolor="#000000">
                  <td width="204">
                  <a href="images/Bauer/Wedding%20Ceremony/scan0007.jpg">
                  <img border="2" src="images/Bauer/Wedding%20Ceremony/scan0007_small.jpg" xthumbnail-orig-image="images/Bauer/Wedding Ceremony/scan0007.jpg"></a></td>
                  <td><a href="images/Bauer/Wedding%20Ceremony/scan0012.jpg">
                  <img border="2" src="images/Bauer/Wedding%20Ceremony/scan0012_small.jpg" xthumbnail-orig-image="images/Bauer/Wedding Ceremony/scan0012.jpg"></a></td>
                  <td><a href="images/Bauer/Wedding%20Ceremony/scan0028.jpg">
                  <img border="2" src="images/Bauer/Wedding%20Ceremony/scan0028_small.jpg" xthumbnail-orig-image="images/Bauer/Wedding Ceremony/scan0028.jpg"></a></td>

Question by:jbauer22
    LVL 10

    Accepted Solution

    Hi jbauer22

    Theoretically, we could have a Javascript dynamically resize your actual image files depending on their variable sizes, however, I strongly urge you to reconsider.

    The fact is that the image is made up of a certain virtual dimesion. It is 'X' pixels by 'y' pixels. Now, we could fource the image to display in 'X-20%' but and that may display the image in your frame, but what you actually will end up with is a very pixelated, distorted and unporffesional looking image. In bytes, it is still the same size, but looks terrible.

    trust me, this is not how to do it.

    What you need to do, is make 2 versions on the image. One for a thumb nail icon and one the size you want to display it. If you use photoshop, you can create an action which will do this for you in a batch file.

    I hope this helps.

    LVL 2

    Author Comment

    Trust the experts!  Thanks.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Building “do-it-yourself” web sites has become an epidemic. There are so many blogs, web sites and even books that "teach" you how to build your web site in a few extremely simple and easy steps. Building a web site has become easier than boiling an…
    Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
    The viewer will learn how to dynamically set the form action using jQuery.
    Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now