Results 1 to 4 of 4

Thread: Change Image and Update two frames in Javascript

  1. #1
    Join Date
    Aug 2009
    Posts
    124

    Change Image and Update two frames in Javascript

    I have very recently started to study JavaScript. I am finding it interesting but there are certain topics that confuse me alot. One such topic is to update two frames simultaneously. There are two frames displayed initially and by clicking on a Change button both the existing frames are to be updated. Also another topic asks a program to change the image on clicking the Change button and another to change the height and width of the image.

  2. #2
    Join Date
    Apr 2008
    Posts
    2,005

    Re: Change Image and Update two frames in Javascript

    Use the following function in <Head> tag of your program to swap the image:
    Code:
    function SwpImg()
    {
    document.getElementById("Pic").src="Img1.gif";
    }
    The body should contain the following code:
    Code:
    <img id="Pic" src="Img2.gif" width="100" height="100" />
    <br />
    <input type="button" onclick="SwpImg()" value="CHANGE">
    Using this code, when the user clicks on the Change button the existing image is swapped by a new one. This is done by using a function to facilitate the necessary action.

  3. #3
    Join Date
    May 2008
    Posts
    2,389

    Re: Change Image and Update two frames in Javascript

    I hope this following JScript coding will help you to update the two frames displayed on the screen. This code makes 4 frames- frame_1.htm, frame_2.htm, frame_3.htm and frame_4.htm:
    Code:
    <HTML>
    
    <HEAD>
    <TITLE>Updating Frames</TITLE>
    
    <SCRIPT type="text/javascript">
    function frmup()
    {
    document.getElementById("Frame A").src="frame_3.htm";
    document.getElementById("Frame B").src="frame_4.htm";
    }
    </SCRIPT>
    
    </HEAD>
    
    <BODY>
    <iframe src="frame_1.htm" id="Frame A"></iframe>
    <iframe src="frame_2.htm" id="Frame B"></iframe>
    <input type="button" onclick="frmup()" value="Update Frames">
    </BODY>
    
    </HTML>

  4. #4
    Join Date
    May 2008
    Posts
    2,012

    Re: Change Image and Update two frames in Javascript

    Code:
    <head>
    <script type="text/javascript">
    function picsz()
    {
    document.getElementById("Pic").height="85";
    document.getElementById("Pic").width="85";
    }
    </script>
    </head>
    
    <body>
    <img id="Pic" src="pic.gif" width="300" height="450" />
    <input type="button" onclick="picsz()" value="Picture Size Change">
    </body>
    The above code is what I used to change the size of the image. Initially the image is displayed is a larger size then the size in which it is displayed after clicking on the Picture size Change button. Even I had hard time to configure out the right logic for this program.

Similar Threads

  1. How to keep rollover image onClick in javascript?
    By MAGALY in forum Software Development
    Replies: 4
    Last Post: 08-03-2010, 08:02 PM
  2. How to create Javascript Image Rotation
    By abbase in forum Software Development
    Replies: 3
    Last Post: 31-10-2009, 01:48 PM
  3. Javascript Change Style
    By Berth in forum Software Development
    Replies: 3
    Last Post: 18-09-2009, 03:00 PM
  4. Javascript reload image
    By Ehsaan in forum Software Development
    Replies: 3
    Last Post: 29-06-2009, 09:38 PM
  5. Upload image randomly with JavaScript Page
    By Zubeen in forum Software Development
    Replies: 3
    Last Post: 25-02-2009, 02:54 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Page generated in 1,711,687,020.75901 seconds with 17 queries