Ori.K

The easiest way to set the table width is to use percentages:
<table ... width="75%">

This sets the width as a percentage of the parent element (in this case,
the window frame), and works with all resolutions.

The table will not get smaller than the title image, as it is the widest
item on the page, and it is a single image and cannot be wrapped onto more
than one line.

Table height can not be set this way.

Is this what you needed, or have I misunderstood your question?


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

The problem is that you are in a frameset. Layers like the popup menu can
only exist in one frame at a time. If you want to make it popup in a
different frame, you will need to put the HTML for the menu in the target
frame, and in the start frame you will need to use:
window.frames['nameOfFrame'].document.layers
window.frames['nameOfFrame'].document.all
window.frames['nameOfFrame'].document.getElementById

At the moment, you have some problems:
  You  use:
     position:absolute; visibility:hide;
  in Netscape. This is unneccessary, Netscape will also understand
    position:absolute; visibility:hidden;
  You do not need to use JavaScript to create the styles, just use

<style type="text/css"><!--
#in1, #in2, #in3, #in4, #in5 {position:absolute; visibility:hidden; }
--></style>

Then in the toggle function, you do not support Netscape 6, Opera 6,
Mozilla, Safari or Konqueror. You should also not use browser detects if
you can avoid them. Try this instead:

function toggle(name) {
  var mW = window.frames['nameOfFrame'].document;
  //use 'var mW = document;' for the same frame
  if( mW.layers ) {
    mW.layers[flag].visibility = 'hide';
    flag=name;
    mW.layers[flag].visibility = 'show';
  } else if( mW.getElementById ) {
    mW.getElementById(flag).style.visibility = 'hidden';
    flag=name; 
    mW.getElementById(flag).style.visibility = 'vidible';
  } else if( mW.all ) {
    mW.all[flag].style.visibility = 'hidden';
    flag=name; 
    mW.all[flag].style.visibility = 'visible';
  } 
} 

function hideAll () { 
  var mW = window.frames['nameOfFrame'].document;
  //use 'var mW = document;' for the same frame
  if( mW.layers ) {
    mW.layers.in1.visibility = 'hide';
    mW.layers[flag].visibility = 'hide';
  } else if( mW.getElementById ) {
    mW.getElementById('in1').style.visibility = 'hidden';
    mW.getElementById(flag).style.visibility = 'hidden';
  } else if( mW.all ) {
    mW.all.in1.style.visibility = 'hidden';
    mW.all[flag].style.visibility = 'hidden';
  }
}

That is a good script - small yet perfectly functional. Excellent idea,
thanks for sharing.

It needs comments for older browsers (not that it matters), and you should
use round, as the number may be (eg) 34.76, and image dimensions should be
an integer, but other than that, cool script.

I noticed in your script that you explicitly set the size of the image, I
assume this is because the image may not have loaded before the script is
run, so I made this generic version from your script, which will work for
an unlimited number of images on the page. It will also work even if you
explicitly set the size of the image, and will also adjust the height as
well. It will not look quite so clean as yours, because it only resizes the
images after they load. It will not work in Netscape 4 (I think yours does),
but as almost no-one uses Netscape 4 anymore, I don't particularly care -
they will just get the default image size:

<script type="text/javascript"><!--
function opSize( oImg ) {
	var X = 1024; //the resolution the site is design for
	var prc = X / screen.width;
	var nowHght = oImg.height; //this may change if not explicitly set
	oImg.width = Math.round( oImg.width / prc );
	oImg.height = Math.round( nowHght / prc );
}
//-->