I created two pages. One using CSS and the other using a table. I'd
like the css version to work like the table version.
The problem arises when the full image doesn't fit in the window.
Click on the moon thumb to see the problem. In IE 5.2 on MacOS
10.2.6, the moon drops down below the list of thumbs. I'd like it to
say to the right of the thumbs and be able to scroll right. In
Netscape 7.2, the larger image of the moon stays to the right of the
thumbs.
I am wondering how I can force the moon to be to the right using CSS.
I tried absolute position a bit, but I had a problem with the footer.
In this case, I do not know the size of the full size picture until I
click on the thumb.
I'd like to move away from using tables.
Robert
css version:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Swap images with CSS formating</title>
<style type="text/css">
#header {
padding: 5px;
border: 1px;
border-style: dotted;
}
#thumbs{
float: left;
width: 15%;
padding-left: 5px;
padding-bottom: 20px;
border: 1px;
border-style: dotted;
}
#picture{
float: right;
width: 81%;
padding-bottom: 20px;
border: 1px;
border-style: dotted;
}
#footer{
clear: both;
background: #eee;
border: 1px;
border-style: dotted;
}
</style>
<script type="text/javascript">
var nasaPath = "http://spaceplace.nasa.gov" +
"/en/educators/images/solarsystem/";
function genImage(link)
{
var data = "<a href='" + nasaPath + link + "_L.jpg'>\n" +
"<img src='" + nasaPath + link + "_T.jpg'\n" +
"onclick='return changeImg(\"" +
nasaPath + link + "_L.jpg\");'>\n" +
"<\/a><br><br>";
document.writeln(data);
}
function changeImg(name)
{
document.images["big_image"].src =
"http://spaceplace.jpl.nasa.gov/en/_images/common/nasa_header/logo_nasa.gif";
document.images["big_image"].src = name;
return false;
}
</script>
</head>
<body>
<div id="header">
<h1 style="text-align: center;">Solar System:</h1>
</div>
<div id="thumbs">
<script type="text/javascript">
genImage("Apollo17_Earth");
genImage("clem_full_moon");
genImage("erosreconstruct_near");
genImage("giotto_halley");
genImage("lspn_comet_halley1");
genImage("hst_pluto_charon");
genImage("idadactyl");
</script>
</div>
<div id="picture">
<img id="big_image"
src=
"http://spaceplace.jpl.nasa.gov/en/_images/common/nasa_header/logo_nasa.gif"
alt="Picture of a solar system object">
</div>
<div id="footer">
<p>These image are from NASA. See:<br>
http://spaceplace.jpl.nasa.gov/en/ed...s_images.shtml
</p>
</div>
</body>
</html>
table version:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Swap images</title>
<style type="text/css">
#footer{
clear: both;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
background: #eee;
}
</style>
<script type="text/javascript">
var nasaPath = "http://spaceplace.nasa.gov" +
"/en/educators/images/solarsystem/";
function genImage(link)
{
if (arguments.length == 1)
{ document.writeln("<tr>");}
var data = "<td width='110' valign='top'>" +
"<a href='" + nasaPath + link + "_L.jpg'>\n" +
"<img src='" + nasaPath + link + "_T.jpg'\n" +
"onclick='return changeImg(\"" +
nasaPath + link + "_L.jpg\");'>\n" +
"<\/a><br></td>";
document.writeln(data);
if (arguments.lenght == 1)
{ document.writeln("<\/tr>");}
}
function changeImg(name)
{
document.images["big_image"].src =
"http://spaceplace.jpl.nasa.gov/en/_images/common/nasa_header/logo_nasa.gif";
document.images["big_image"].src = name;
return false;
}
</script>
</head>
<body>
<h1 style="text-align: center;">Solar System</h1>
<table>
<tr>
<script type="text/javascript">
genImage("Apollo17_Earth","first");
</script>
<td width="600" height="800" align="center" valign="top" rowspan="7">
<img id="big_image"
src=
"http://spaceplace.jpl.nasa.gov/en/_images/common/nasa_header/logo_nasa.gif";
</td>
</tr>
<script type="text/javascript">
genImage("clem_full_moon");
genImage("erosreconstruct_near");
genImage("giotto_halley");
genImage("lspn_comet_halley1");
genImage("hst_pluto_charon");
genImage("idadactyl");
</script>
</table>
<div id="footer">
<p>These image are from NASA. See:<br>
http://spaceplace.jpl.nasa.gov/en/ed...s_images.shtml
</p>
</div>
</body>
</html>
