change image in another frame

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Robert
    #1

    change image in another frame

    Hi,
    I'm trying to make a slide show, with two frames: on the left frame small
    thumbnails, and on the right frame the big sized image. Of course when the
    user clicks on a thumbnail in the left frame, this image should be shown in
    the right frame.

    As I have a large number of pictures I don't want to have a separate page
    for each picture, and use javascript instead.

    I would like to use this in the left frame (see full code below):
    parent.right_fr ame.big_image.s rc=N.jpg

    My question:
    I wonder if this is widely supported.

    TIA.

    ******
    The code: three pages: the frameset, the left frame and the right frame.

    The frameset:
    <html>
    <head><title>.. .</title></head>
    <frameset cols="25%,75%">
    <frame src="thumbs.htm " name="left_fram e">
    <frame src="diapo.htm" name="right_fra me">
    </frameset>
    </html>


    The left frame (thumbs.htm):
    <html><head>
    <script language="javas cript">
    function change_img(N){ parent.right_fr ame.big_image.s rc=N + ".jpg"; }
    </script>
    </head>
    <body>
    <a href="javascrip t:change_img(1) ;"><img src="1s.jpg"></a>
    <br>
    <a href="javascrip t:change_img(2) ;"><img src="2s.jpg"></a>
    ....
    </body>
    </html>

    The right frame (diapo.htm):
    <html><head></head>
    <body>
    <img id="big_image" src="1.jpg">
    </body>
    </html>

    --
    Rob
    Tags: None
    • Robert
      #2
      Re: change image in another frame

      Help, I've tried my page with another browser, and it doesn't work.
      So is there in Javascript a safe and reliable way to do what I want: that
      when the user clicks on a thumbnail in one frame, an image is changed in
      another frame?

      Thanks.
      --
      Rob

        Comment

        • Robert
          #3
          Re: change image in another frame

          I'd very much like to hear some advice on this: how to change an image in
          one frame when there is an event in another frame...
          Thanks.

          --
          Rob

            Comment

            • Robert
              #4
              Re: change image in another frame

              Robert <nospam@yahoo.c om> wrote in message news:<41422e52$ 0$329$ba620e4c@ news.skynet.be> ...[color=blue]
              > I'd very much like to hear some advice on this: how to change an image in
              > one frame when there is an event in another frame...
              > Thanks.[/color]


              Here is the segment of code you are looking for:
              top.frames["right_fram e"].document.image s["big_image"].src=



              I have coded up an example using some images from NASA. I used a
              function to avaid having to type the names more than once and to avoid
              typing the full name.

              Many people in this forum perfer to use this coding for the anchor and
              image tags:
              <a href="L.jpg">
              <img src="T.jpg"
              onclick='return change_img("L.j pg");'>
              </a>

              You will notice if for some reason the viewer doesn't have javascript
              enabled, the viewer will still get the larger image loaded in the left
              frame.

              I created a separate variable data so I could debug with an alert
              statement. I removed the alert statements. The \n insert a newline in
              the text. This is for debugging too.

              The loading of the NASA logo in the right frame is because Netscape
              lets the old image up until the complete new image is loaded. When
              this delay happened, I thought my code wasn't working. Putting up the
              logo gets rid of the old image.

              I tried this on MacOS 10.2.6 with Netscape 7.2, IE 5.2, and Safari
              1.0.

              Robert

              frames.html

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
              "http://www.w3.org/TR/html4/frameset.dtd">
              <html>
              <head><title>So lor System Objects</title></head>
              <frameset cols="25%,75%">
              <frame src="thumbs.htm l" name="left_fram e">
              <frame src="diapo.html " name="right_fra me">
              </frameset>
              </html>


              thumbs.html

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              "http://www.w3.org/TR/html4/loose.dtd">
              <html>
              <head>
              <title>Swap images</title>
              <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='retur n change_img(\"" +
              nasaPath + link + "_L.jpg\");'>\n " +
              "<\/a>";
              document.writel n(data);
              document.writel n("<br>");
              }

              function change_img(name )
              {
              top.frames["right_fram e"].document.image s["big_image"].src=
              "http://spaceplace.jpl. nasa.gov" +
              "/en/_images/common/nasa_header/logo_nasa.gif";

              top.frames["right_fram e"].document.image s["big_image"].src=
              name;
              return false;
              }
              </script>
              </head>
              <body>
              <script type="text/javascript">
              genImage("Apoll o17_Earth");
              genImage("clem_ full_moon");
              genImage("giott o_halley");
              </script>
              <br><br>
              ....
              </body>
              </html>



              diapo.html

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              "http://www.w3.org/TR/html4/loose.dtd">
              <html>
              <head>
              <title>Solor Object</title>
              </head>
              <body>
              <img id="big_image"
              src=
              "http://spaceplace.jpl. nasa.gov/en/_images/common/nasa_header/logo_nasa.gif"[color=blue]
              >[/color]
              <p>These image are from NASA. See:<br>
              http://spaceplace.jpl.nasa.gov/en/educators/teachers_ss_images.shtml

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

                Comment

                Previous template Next
                Working...