HTML Help

datalova · Joined: 06 Jun 2009 Posts: 1

HI,
I'm trying to design a page in css/html and would like to have the images fit visitor's screens when clicked. each image has its own page. Some are horizontal, some are veritcal. I had set the w and h to 100%, but for the vertical shots, doesnt seem to make them fit the screen; you still wind up scrolling. Then I tried a different percentage.. still nada! Any help appreciated.
Thank you for your time.

Here is my code..page is not online yet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style></head>

<body class="twoColElsLt">

<div id="container">
<div id="sidebar1">
<h3><em>'CLIMB</em>'</h3>
<p><strong>Print Size</strong>: </p>
<p>4.6Ft W x 6FT H</p>
<p><strong>UnFramed:</strong><strong>$1200 (USD)</strong><br />
<strong>Shipping Cost:</strong> <strong>$15</strong></p>
<p><strong>Framed $1500 (USD)<br />
Shipping Cost:</strong></p>
<p><img border="0" width="145" height="75" src="angels_clip_image001_0000.gif" /><br />
<img border="0" width="107" height="34" src="angels_clip_image002_0000.gif" alt="Self Publishing Company Visa / MasterCard" /></p>
<p><a href="http://www.pamsplace.org/index.html">Pam’s Place Inc;</a></p>
<p><strong><a href="http://www.pamsplace.org/gallery.html">Back to Gallery</a></strong></p>
</div>
<div id="mainContent">

<p><img src="../Pauls_photos/Paul_Photos_Titled/Photos 4-09/climb.JPG" width="42%" height="111%" /></p>
</div>

</div>

</div>
</body>
</html>

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

Setting a height in percents does not work. Haven't checked, but that may be a doable in CSS 3.0. Try this code although a server side script would be better.

Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>

<title>Image - Autosize Script</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function ResizeThem()
{
var maxheight = 100;
var maxwidth = 100;
var imgs = document.getElementsByTagName("img");

for ( var p = 0; p < imgs.length; p++ )
{
if ( imgs[p].getAttribute("alt") == "user posted image" )
{

var w = parseInt( imgs[p].width );
var h = parseInt( imgs[p].height );

if ( w > maxwidth )
{
imgs[p].style.cursor = "pointer";
imgs[p].onclick = function( )
{
var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
iw.focus();
};

h = ( maxwidth / w ) * h;
w = maxwidth;

imgs[p].height = h;
imgs[p].width = w;
}

if ( h > maxheight )
{

imgs[p].style.cursor="pointer";
imgs[p].onclick = function( )
{

var iw = window.open ( this.src, 'ImageViewer','resizable=1' );

iw.focus( );
};

imgs[p].width = ( maxheight / h ) * w;
imgs[p].height = maxheight;
}
}
}
}
</script>
</head>
<body onLoad="ResizeThem()">

<img src="http://img509.imageshack.us/img509/7512/spammerss3.gif" alt="user posted image"/>

<img src="http://img297.imageshack.us/img297/4980/funnyhilaryclintonib7.gif" alt="user posted image"/>

<img src="http://img297.imageshack.us/img297/1334/bgfractalfc5.jpg" alt="user posted image"/>
</body></html>

Adjust these variables as needed:

var maxheight = 100;
var maxwidth = 100;