Use one frame to change images in another frame.

Discussion in 'Javascript' started by Leoa, Jun 14, 2007.

  1. Leoa

    Leoa Guest

    Hi All,

    I'm having a hard time figuring out the DOM syntax to get one frame
    that has thumnails of images to display at full size in another frame
    (onmouseover).

    I looked at a couple tutorials and have come up with the broken script
    below. Please Help.-

    ------------------------------------------
    master_frame.html------------------------------

    <html>
    <head>
    <title>Frames Set, Index with Bannere and Footer</title>
    </head>
    <frameset rows="64,*,64">
    <frame name="top" scrolling="no" noresize src="top.html">
    <frameset cols="150,*">
    <frame name="index" src="index.html">
    <frame name="main" src="main.html">
    </frameset>
    <frame name="bottom" scrolling="no" noresize src="bottom.html">
    </frameset>
    </html>


    ---------------------------------------------
    index.html------------------------------------
    //contains thumbnails
    <html>
    <head><title> Event 1</title>

    <script language="javascript" type="text/javascript">
    <!-- hide script from old broswers

    if (document.images)
    {
    image1= new Image;
    image2= new Image;
    image3= new Image;

    image1.src="images/large/1.gif";
    image2.src="images/large/2.gif";
    image3.src="images/large/3.gif";

    }
    else{
    image1="";
    image2="";
    image3="";
    document.placeholder="";
    }
    //-->

    </script>

    </head>
    <body>
    <h2> Event 1</h2>
    <div class="content">


    <img src="images/placeholder.gif" name="placeholder">

    <a href="#"
    onMouseover="parent.main.getElementByID('overimage').src=image3.src"
    onMouseout="document.placeholder.src=image3.src"><img src="images/
    thumb/1t.gif"></a>



    </body>
    </html>

    ----------------------------------------
    main.html-----------------------------------
    //large image display

    <html>

    <body>
    <img id="overimage">

    </body>
    </html>
     
    Leoa, Jun 14, 2007
    #1
    1. Advertising

  2. Leoa

    Leoa Guest

    I've worked in the program and I was able to get it to change the
    image in the next frame:

    1. First probem is I can't seem to figure out how to get x to be a
    different url when the user mouse over the thumb nail:

    2. is there a way that I can only update the image and not dynamicly
    create the whole page? the larger image stacks in the context
    frame.

    html>
    <head>
    <title>
    </title>
    <script language="javascript" type="text/javascript">

    if (document.images)
    {
    image1= new Image;
    image2= new Image;
    image3= new Image;

    image1.src="images/large/1.gif";
    image2.src="images/large/2.gif";
    image3.src="images/large/3.gif";
    var x=image1.src="images/large/1.gif";

    }
    else{
    image1="";
    image2="";
    image3="";
    document.placeholder="";
    }




    function writeContent(thispage)
    {
    //parent.content.document.write("<html> <head> <\/head> <body
    bgcolor='green'><h1>")
    parent.content.document.write("You are now <br>looking at
    page"+thispage+"<img src="+x+" name='placeholder'>")
    //parent.content.document.write("<\/h1><\/body><\/html>")

    }
    </script>
    </head>
    <body>
    nav<br>


    <img src="1t.gif" onMouseover="javascript:writeContent(1)">




    </body>
    </html>
     
    Leoa, Jun 14, 2007
    #2
    1. Advertising

  3. Leoa

    ASM Guest

    Leoa a écrit :
    > Hi All,
    >
    > I'm having a hard time figuring out the DOM syntax to get one frame
    > that has thumnails of images to display at full size in another frame
    > (onmouseover).
    >
    > I looked at a couple tutorials and have come up with the broken script
    > below. Please Help.-
    >
    > ------------------------------------------
    > master_frame.html------------------------------
    >
    > <html>
    > <head>
    > <title>Frames Set, Index with Bannere and Footer</title>
    > </head>
    > <frameset rows="64,*,64">
    > <frame name="top" scrolling="no" noresize src="top.html">
    > <frameset cols="150,*">
    > <frame name="index" src="index.html">
    > <frame name="main" src="main.html">
    > </frameset>
    > <frame name="bottom" scrolling="no" noresize src="bottom.html">
    > </frameset>
    > </html>
    >
    >
    > ---------------------------------------------
    > index.html------------------------------------
    > //contains thumbnails
    > <html>
    > <head><title> Event 1</title>


    for instance place here this code :

    <base target="main">

    > <script language="javascript" type="text/javascript">
    > <!-- hide script from old broswers
    >
    > if (document.images)
    > {
    > image1= new Image;
    > image2= new Image;
    > image3= new Image;
    >
    > image1.src="images/large/1.gif";
    > image2.src="images/large/2.gif";
    > image3.src="images/large/3.gif";
    >
    > }
    > else{
    > image1="";
    > image2="";
    > image3="";
    > document.placeholder="";
    > }
    > //-->
    >
    > </script>
    >
    > </head>
    > <body>
    > <h2> Event 1</h2>
    > <div class="content">
    >
    >
    > <img src="images/placeholder.gif" name="placeholder">
    >
    > <a href="#"
    > onMouseover="parent.main.getElementByID('overimage').src=image3.src"
    > onMouseout="document.placeholder.src=image3.src"><img src="images/
    > thumb/1t.gif"></a>


    parent.main.document !!!!
    ^^^^^^^^^

    <a href="images/large/3.gif"
    onmouseover="parent.main.document.getElementByID('overimage').src=image3.src"
    onmouseout="document.placeholder.src=image3.src"
    onclick="return false;"><img src="images/thumb/1t.gif"></a>


    or :

    <a href="images/large/3.gif"
    onmouseover="parent.main.document.images['overimage'].src=image3.src"
    onmouseout="document.placeholder.src=image3.src"
    onclick="return false;"><img src="images/thumb/1t.gif"></a>


    > </body>
    > </html>



    > main.html-----------------------------------
    > //large image display
    >
    > <html>
    >
    > <body>
    > <img id="overimage">


    <img id="overimage" name="overimage" src="" alt="Viewer">

    > </body>
    > </html>
    >



    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Jun 17, 2007
    #3
  4. Leoa

    dd Guest

    On Jun 14, 9:47 pm, Leoa <> wrote:
    > image1= new Image;


    Why does this work without parentheses ? I just tried the
    following little test and in Fiddler I saw both image
    requests being made, and I see "hello" get document.written.

    <html><body>
    <script>
    img1 = new Image;
    img1.src="http://example.com/i1.gif";

    img2 = new Image();
    img2.src="http://example.com/i2.gif";

    myarray = new Array;
    myarray[2]="hello";
    document.write(myarray[2]);
    </script>
    </body></html>

    Why have all the books and JS examples on the web shown
    the parentheses all these years if they weren't needed ?

    I already switched to using =[]; for new arrays (in case
    anyone suggests it).
     
    dd, Jun 18, 2007
    #4
  5. Leoa

    -Lost Guest

    dd wrote:
    > On Jun 14, 9:47 pm, Leoa <> wrote:
    >> image1= new Image;

    >
    > Why does this work without parentheses ? I just tried the
    > following little test and in Fiddler I saw both image
    > requests being made, and I see "hello" get document.written.


    You know, I don't really know, but I have always used parentheses when
    the end goal required a parameter. For example:

    var arr1 = new Array(10); // I know it will contain 10 elements
    var arr2 = new Array; // no clue of the length, I just need an array

    Maybe you could post this as a new thread and someone else could provide
    further feedback?

    > <html><body>
    > <script>
    > img1 = new Image;
    > img1.src="http://example.com/i1.gif";
    >
    > img2 = new Image();
    > img2.src="http://example.com/i2.gif";
    >
    > myarray = new Array;
    > myarray[2]="hello";
    > document.write(myarray[2]);
    > </script>
    > </body></html>
    >
    > Why have all the books and JS examples on the web shown
    > the parentheses all these years if they weren't needed ?
    >
    > I already switched to using =[]; for new arrays (in case
    > anyone suggests it).


    That is still, in my opinion, user preference. One theory however is
    that it reduces overhead by using a literal instead of the constructors
    invoked by "new Object" or "new Array." Actually, theory is probably
    wording it incorrectly.

    It *does* reduce overhead.

    This is the same relative theory about using the unary + operator as
    opposed to using Number to type cast.

    I cannot remember where I read this, it had to have been the FAQ, or Mr.
    Cornford's site, maybe even the JavaScript Toolbox perhaps. Although I
    couldn't find it in any of those locations.

    --
    -Lost
    Remove the extra words to reply by e-mail. Don't e-mail me. I am
    kidding. No I am not.
     
    -Lost, Jun 18, 2007
    #5
  6. Leoa

    Leoa Guest

    Hi lost,

    thanks for replying to my message. It was a real headache to figure
    out. But I found another ( cheesey way) of doing this.

    <html>
    <head>
    <meta name="robots" content="noindex,nofollow">

    <title>
    </title>
    <script language="javascript" type="text/javascript">
    var x;


    function myfunction(txt)
    {
    x=txt;
    parent.content.document.getElementById('changeImg').innerHTML =
    "<img src="+x+" name='placeholder'>";
    }
    </script>
    </head>
    <body bgcolor="#f3efcc">
    <a href="left5.html" TARGET="_self">page 1</a> <a href="page1.html"
    TARGET="_self">page 2</a> <br><br>


    <img src="images/thumb/1t.gif" onMouseover="myfunction('images/large/
    1.gif')">
    <img src="images/thumb/2t.gif" onMouseover="myfunction('images/large/
    2.gif')">





    </body>
    </html>


    Again, Thankyou.



    On Jun 18, 11:15 am, -Lost <> wrote:
    > dd wrote:
    > > On Jun 14, 9:47 pm, Leoa <> wrote:
    > >> image1= new Image;

    >
    > > Why does this work without parentheses ? I just tried the
    > > following little test and in Fiddler I saw both image
    > > requests being made, and I see "hello" get document.written.

    >
    > You know, I don't really know, but I have always used parentheses when
    > the end goal required a parameter. For example:
    >
    > var arr1 = new Array(10); // I know it will contain 10 elements
    > var arr2 = new Array; // no clue of the length, I just need an array
    >
    > Maybe you could post this as a new thread and someone else could provide
    > further feedback?
    >
    >
    >
    >
    >
    > > <html><body>
    > > <script>
    > > img1 = new Image;
    > > img1.src="http://example.com/i1.gif";

    >
    > > img2 = new Image();
    > > img2.src="http://example.com/i2.gif";

    >
    > > myarray = new Array;
    > > myarray[2]="hello";
    > > document.write(myarray[2]);
    > > </script>
    > > </body></html>

    >
    > > Why have all the books and JS examples on the web shown
    > > the parentheses all these years if they weren't needed ?

    >
    > > I already switched to using =[]; for new arrays (in case
    > > anyone suggests it).

    >
    > That is still, in my opinion, user preference. One theory however is
    > that it reduces overhead by using a literal instead of the constructors
    > invoked by "new Object" or "new Array." Actually, theory is probably
    > wording it incorrectly.
    >
    > It *does* reduce overhead.
    >
    > This is the same relative theory about using the unary + operator as
    > opposed to using Number to type cast.
    >
    > I cannot remember where I read this, it had to have been the FAQ, or Mr.
    > Cornford's site, maybe even the JavaScript Toolbox perhaps. Although I
    > couldn't find it in any of those locations.
    >
    > --
    > -Lost
    > Remove the extra words to reply by e-mail. Don't e-mail me. I am
    > kidding. No I am not.- Hide quoted text -
    >
    > - Show quoted text -
     
    Leoa, Jun 18, 2007
    #6
  7. Leoa

    dd Guest

    On Jun 18, 5:15 pm, -Lost <> wrote:
    > You know, I don't really know, but I have always used parentheses when
    > the end goal required a parameter. For example:
    >
    > var arr1 =newArray(10); // I know it will contain 10 elements
    > var arr2 =newArray; // no clue of the length, I just need an array
    >
    > Maybe you could post this as anewthread and someone else could provide
    > further feedback?


    I just noticed that at the JavaScript 1.5 reference
    site at mozilla, even they don't use new Array;
    http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array
    Search for new Array(); and you find it several times.
     
    dd, Jun 19, 2007
    #7
  8. Leoa

    -Lost Guest

    Re: Use one frame to change images in another frame. OT: JSLintand Constructors

    dd wrote:
    > On Jun 18, 5:15 pm, -Lost <> wrote:
    >> You know, I don't really know, but I have always used parentheses when
    >> the end goal required a parameter. For example:
    >>
    >> var arr1 =newArray(10); // I know it will contain 10 elements
    >> var arr2 =newArray; // no clue of the length, I just need an array
    >>
    >> Maybe you could post this as anewthread and someone else could provide
    >> further feedback?

    >
    > I just noticed that at the JavaScript 1.5 reference
    > site at mozilla, even they don't use new Array;
    > http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array
    > Search for new Array(); and you find it several times.


    Yep.

    Offhand I decided to check the mighty Mr. Crockford's JSLint to see what
    it would say, and it actually spit the error:

    "Missing '()' invoking a constructor."

    ....on:

    var arr1 = new Array;

    Now, again, I see the call operator being necessary only (and obviously)
    when you need to pass a parameter. I have witnessed no catastrophic
    behavior from this, but nor have I tested it farther than checking the
    instanceof arr1.

    One thing I do not agree with is:

    "Error: Use the array literal notation []."

    Granted, we know about the optimization benefits from using literals.
    However, to teach "whoever" that it is an error is erroneous in and of
    itself.

    I guess if you absolutely needed an array of a specific size and don't
    know its contents, JSLint would have you do:

    var arr1 = [];
    for (var i = 0; i < 100; i++)
    {
    arr1 = null; // or '' or *whatever*
    }

    I think I'll stick to "new Array(100)".

    And speaking of which, the documentation and prevention of the increment
    and decrement operators boggles me. Is:

    for (var i = 0; i < 100; i = i + 1)

    ....actually supposed to be more efficient than the normal
    (aforementioned) method?

    --
    -Lost
    Remove the extra words to reply by e-mail. Don't e-mail me. I am
    kidding. No I am not.
     
    -Lost, Jun 20, 2007
    #8
    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. Søren M. Olesen
    Replies:
    0
    Views:
    583
    Søren M. Olesen
    Nov 13, 2003
  2. Noozer
    Replies:
    0
    Views:
    3,003
    Noozer
    Oct 22, 2005
  3. ABC
    Replies:
    0
    Views:
    596
  4. Fokke Nauta
    Replies:
    3
    Views:
    942
    Fokke Nauta
    Apr 29, 2009
  5. Kathryn
    Replies:
    4
    Views:
    340
Loading...

Share This Page