thumbnail view

**nubs75** · 01-23-2006 02:08 PM

I am trying to create a thumbnail page that will display the thumbnailed images inline. The url to my page is: http://microsale-pos.com/brochure.htm. I thought that i had it working but when i posted it and clicked on a thumbnai nothing appeared. any suggestions?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Brochure</title>
<script>
function changeImage(filename)
{
	document.mainimage.src = filename;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
</script>
<body bgcolor="#666666" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFF00">
<div align="center"> 
  <table width="737" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
    <tr>
      <td width="507" bgcolor="#FFFFFF">
<div align="center"><img src="Images/Micro$ale-POS%20Logo%20new.jpg" width="500" height="163" alt=""></div></td>
      <td width="171" bgcolor="#FFFFFF">
<div align="center">
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="159" height="76">
            <param name="movie" value="brochurepartners.swf">
            <param name=quality value=high>
            <embed src="brochurepartners.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="159" height="76"></embed> 
          </object>
        </div></td>
    </tr>
  </table>
  <table width="737" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td bgcolor="#000000"><div align="center"><font color="#FFFF00"><strong>Click 
          on thumbnails to view larger image:</strong></font></div></td>
    </tr>
  </table>
  <table width="737" height="746" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td width="136" height="746" bordercolor="#FFFFFF" bgcolor="#000000"> 
        <div align="center"> 
          <table width="137" height="720" border="0" cellpadding="0" cellspacing="0">
            <tr> 
              <td width="226" height="120" bordercolor="#FFFFFF" bgcolor="#000000"> 
                <div align="center"><a href="javascript:changeImage('image1.jpg')"><img src="Images/Brochure/image1.jpg" alt="" width="81" height="108" border="0"></a></div></td>
            </tr>
            <tr> 
              <td height="120" bordercolor="#FFFFFF" bgcolor="#000000"> 
                <div align="center"><a href="javascript:changeImage('image2.jpg')"><img src="Images/Brochure/image2.jpg" alt="" width="81" height="108" border="0"></a></div></td>
            </tr>
            <tr> 
              <td height="120" bordercolor="#FFFFFF" bgcolor="#000000"> 
                <div align="center"><a href="javascript:changeImage('image3.jpg')"><img src="Images/Brochure/image3.jpg" alt="" width="81" height="108" border="0"></a></div></td>
            </tr>
            <tr> 
              <td height="120" bordercolor="#FFFFFF" bgcolor="#000000"> 
                <div align="center"><a href="javascript:changeImage('image4.jpg')"><img src="Images/Brochure/image4.jpg" alt="" width="81" height="108" border="0"></a></div></td>
            </tr>
            <tr> 
              <td height="120" bordercolor="#FFFFFF" bgcolor="#000000"> 
                <div align="center"><a href="javascript:changeImage('image5.jpg')"><img src="Images/Brochure/image5.jpg" alt="" width="81" height="108" border="0"></a></div></td>
            </tr>
            <tr> 
              <td height="120" bordercolor="#FFFFFF" bgcolor="#000000"> 
                <div align="center"><a href="javascript:changeImage('image6.jpg')"><img src="Images/Brochure/image6.jpg" alt="" width="81" height="108" border="0"></a></div></td>
            </tr>
          </table>
        </div>
        </td>
      <td width="601" bgcolor="#000066"> <div align="center"><font color="#FFFF00" size="5"> 
          <center>
            <center>
              <table width=310 height="407" border=0 cellpadding=0 cellspacing=0>
                <tr> 
                  <td align=center valign="middle" bgcolor="#000066"> <img src="Images/Brochure/image1.jpg" name="mainimage" width="550" height="720"></td>
                </tr>
              </table>
            </center>
          </center>
          </font></div></td>
    </tr>
  </table>

**Selrach** · 01-23-2006 02:14 PM

Well you might want to give the entire url to the image...

Code:

javascript:changeImage('Images/Brochure/image1.jpg')

Also you might think about actually using thumbnails instead of resized full pics.

**jzwp** · 01-23-2006 02:48 PM

hey its a good thing i decided to get DSL
I should be up with it this time next week. I'll try again later

**bokeh** · 01-23-2006 03:36 PM

Originally Posted by jzwp

hey its a good thing i decided to get DSL
I should be up with it this time next week. I'll try again later

I agree! A 3.5 megabyte webpage is a joke. Why don't you do it properly? Try to keep the whole thing below 50 kilobytes, 100 kilobytes absolute maximum.

Thread: thumbnail view

Thread Tools

Display

thumbnail view

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions