problem with different thumbnails opening same window

**Robert** · Jul 23 '05, 01:39 PM

Re: problem with different thumbnails opening same window

"Danny" <ANTIESPAMversl ype.dcsd@pandor a.be> wrote in message news:<4UA1d.245 715$dw1.1252976 7@phobos.telene t-ops.be>...[color=blue]
> hi, lately i've been working on a website and i have used a bit of
> javascript although i'm not an expert in this mather.[/color]

You need to go to the library or bookstore and get a book on
Javascript. The book recommended by this group is: Javascript: The
Deinitive Guide by David Flanagan.

For a more basic book, I would consider: HTML for the World Wide Web
with XHTML and CSS: Visual QuickStart Guide, Fifth Edition by
Elizabeth Castro. This book is in the style of a cookbook. This is
good if it has what you want, but bad if not.

You need to abandoned the user of Front Page. It isn't compatible
with Javascript nor with browser other than IE. Front Page will kind
of work but you will get burnt by it eventually.

I could not exacly determine how you wanted your script to work but
here is something that may help.

I posted an example using frames here:

http://groups.google.com/groups?q=rccharles&hl=en&lr=&ie=UTF-8&scoring=d&selm=c6bb75ff.0409131119.1e26f1d1%40posting.google.com&rnum=6

It has the subject of Re: change image in another frame.

Here is an example using CSS:

Robert

<!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">

#thumbs{
float: left;
width: 20%;
padding-left: 5px;
padding-bottom: 20px;
}

#picture{
visibility: hidden;
float: right;
width: 74%;
padding-bottom: 20px;
border-width: medium;
border-style: dotted;
border-color: red;
background-color: grey;

}

#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/";

/*
An easier way to do this would be to make a transparent gif
image. Using a transparent gif image would avoid the use
of the css hidden visibility.

Netscape waits until the image is complete to display the new
image. In the meantime, Netscape displays the old image.
*/

var hideFirstPictur e = "hidden";

function genImage(link)
{
var data = "<a href='" + nasaPath + link + "_L.jpg'>\n " +
"<img src='" + nasaPath + link + "_T.jpg'\n" +
"onclick='retur n changeImg(\"" +
nasaPath + link + "_L.jpg\");'>\n " +
"<\/a>";
document.writel n(data);
document.writel n("<br><br>") ;
}

function changeImg(name)
{

document.getEle mentById("pictu re").style.visi bility = "hidden";
document.images["big_image"].src = name;

return false;

}
</script>
</head>
<body>
<div id="thumbs">
<h3>Solar System:</h3>
<script type="text/javascript">
genImage("Apoll o17_Earth");
genImage("clem_ full_moon");
genImage("giott o_halley");
</script>

</div>

<div id="picture">
<img id="big_image"
onload = "document.getEl ementById('pict ure').style.vis ibility =
hideFirstPictur e;
hideFirstPictur e = 'visible';"
src=
"http://spaceplace.jpl. nasa.gov/en/_images/common/nasa_header/logo_nasa.gif"[color=blue]
>[/color]
<p>This is the larger picture</p>
</div>
<div id="footer">
<p>These image are from NASA. See:<br>

http://spaceplace.jpl.nasa.gov/en/educators/teachers_ss_images.shtml

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

problem with different thumbnails opening same window

problem with different thumbnails opening same window

Comment