problem with different thumbnails opening same window

Discussion in 'Javascript' started by Danny, Sep 14, 2004.

  1. Danny

    Danny Guest

    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.
    On the page there are 3 thumbnails and when you click on a thumbnail a
    window with a picture (and text) on it opens.
    Each thumbnail should open a window with a different picture. So this is
    where the problem comes in : no matter wich thumbnail I click on, it's
    always the same window with the same picture that opens...
    Does it has something to do with the name of each window or the
    showWindow() -function or the .....
    the url is http://users.pandora.be/zwerfwagen/test.html


    a second problem is the following : when you click on a thumbnail and the
    new window opens, it is centered on the screen, but this is only for the
    resolution of my screen. how can i make sure that the window is always
    centered, no matter what type of screen/resolution is used?

    any help would be appreciated
    Danny
     
    Danny, Sep 14, 2004
    #1
    1. Advertising

  2. Danny

    Robert Guest

    "Danny" <> wrote in message news:<4UA1d.245715$-ops.be>...
    > 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.


    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=&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 hideFirstPicture = "hidden";

    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>";
    document.writeln(data);
    document.writeln("<br><br>");
    }

    function changeImg(name)
    {

    document.getElementById("picture").style.visibility = "hidden";
    document.images["big_image"].src = name;

    return false;

    }
    </script>
    </head>
    <body>
    <div id="thumbs">
    <h3>Solar System:</h3>
    <script type="text/javascript">
    genImage("Apollo17_Earth");
    genImage("clem_full_moon");
    genImage("giotto_halley");
    </script>


    </div>

    <div id="picture">
    <img id="big_image"
    onload = "document.getElementById('picture').style.visibility =
    hideFirstPicture;
    hideFirstPicture = 'visible';"
    src=
    "http://spaceplace.jpl.nasa.gov/en/_images/common/nasa_header/logo_nasa.gif"
    >

    <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>
     
    Robert, Sep 15, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Christopher Brewster
    Replies:
    5
    Views:
    349
    John Machin
    Nov 14, 2008
  2. bluebaron
    Replies:
    3
    Views:
    754
    Jonathan N. Little
    Nov 4, 2009
  3. Guest
    Replies:
    2
    Views:
    185
    Foo Man Chew
    Dec 29, 2003
  4. Larry Bud

    Opening a window in the same session

    Larry Bud, Mar 1, 2006, in forum: ASP General
    Replies:
    3
    Views:
    141
    Mike Brind
    Mar 2, 2006
  5. Replies:
    4
    Views:
    182
Loading...

Share This Page