Chapter 5.2-5,3

Chapter 5
5.2 Frames:
 Creating frame:
Frames are used to divide browser window into multiple sections where each section is treated as window
that can have independent contents. A frame can load separate HTML document in each frame in a window.
<frameset> tag : A frameset is defined as a set of frames inserted in an HTML web page. These frames
can be in the form of rows and columns in different size. Frameset tells the browser how to divide the screen
into multiple areas.
<frameset> ... </frameset>
Attributes:
cols=”pixels/percentage” Specify number and size of columns in a frameset. Default value
is 100% ( 1 column).
rows=”pixels/percentage” Specify number and size of rows in a frameset. Default value is
100% ( 1 row).
border=number Specify thickness of frame border. Default value is 5 pixels.
bordercolor=”colorname/colorcode” Specify color for border.
frameborder=”yes/no” Specify whether the border shall be visible or not.
<frame> tag : Frame tag is used to insert web page content in a frame. It is an empty tag.
Attributes:
src=”URL” Specify address of a web page to be displayed in a frame.
name=” string” Specify name of the frame which can be used as target to open a
link.
frameborder=”yes/no” Specify whether the border should visible or not.
bordercolor=”colorname/colorcode” Specify border color.
scrolling=”yes/no/auto” specify appearance of scroll bar in a frame. Default value is auto.
marginheight=number Specify space between contents of frame and top/bottom border
of frame.
marginwidth=number Specify space between contents of frame and left/right borders of
frame.
noresize Specify that a frame is not resizable.
JavaScript refers to the frameset as the top or the parent. The parent frame is always on top of the display.
The other frames inside the frameset are referred as child frames. Child windows always appear within the
parent window and can have unique name to be used in an application.
Example: - A window divided into two rows:

Code: Output:
<html>
<frameset rows="25%,75%" frameborder="Yes"
bordercolor="red">
<frame src="page1.html" name="f1">
<frame src="page2.html" name="f2"> </frameset>
</html>
Example A window divided into two columns:

Code: Output:
<html>
<frameset cols="25%,75%" frameborder="Yes"
bordercolor="red">
</frameset>
</html>
Dividing in rows and columns:

Code: Output:
<html>
<frameset rows="25%,50%" frameborder="Yes"
bordercolor="red">
<frameset cols="25%,75%">
<frame src="link.html" name="f3">
</frameset>
</frameset>
</html>
 Invisible border of frame:

By using border and frameborder attributes of <frame>, the border of a frame can be set to invisible.
Border: This attribute is used to specify thickness of the border by specifying value in terms of pixels. It is
set to 0 to make frame borders invisible on a web page.
<frame src=”url” border=” number of pixels”>
Ex: <frame src=”page1.html” border=0>
Frameborder: This attribute is used to set visibility of frame border. If it is set to ‘yes’ or ‘1’ then the frame
border is visible on web page otherwise if it is set to ‘no’ or ‘0’ then frame border is invisible.
<frame src=”url” frameborder=”yes/no”> OR <frame src=”url” frameborder=”1/0”>
Ex: <frame src=”page1.html” frameborder=”no”>
Program :
Program : Output :
<html>
<frameset rows="25%,75%" border="1" frameborder="no">
<frameset cols="25%,75%">
<frame src="link.html" name="f2">
</frameset>
</frameset>
</html>
Calling a child window:

By using JavaScript functions, one can refer to another window with reference of the frameset. A reference
to frameset which is a parent window and then reference of name of the child window, followed by the
element within the web page of child window allow access to the element.
For example:-
Consider webpage1.html contains a function ChangeContent() and webpage2.html contains a button. A
framed document which is the parent window consisting frames. In this scenario, with JavaScript function,
one can call ChangeContent() from webpage1 after clicking on button in webpage2 when both pages are
loaded in parent window.
A parent window is a window that contains all frames loaded with html documents.
Each frame has a name attribute that gives unique identity to frame. This name property is used to refer
contents of one frame into another frame.
Parent.topPage.ChangeContent();
The above statement is written inside webpage2 document. Parent is the property of window object that
refers to framed document. topPage is the name given to a frame defined inside <frameset> tag.
ChangeContent() is the name of the function defined inside webpage1 document.
Example:
Webpage1.html
<html>
<head>
<title>Web Page 1</title>
<script type="text/javascript">
function ChangeContent()
{
alert("Function Called");
}
</script>
</head>
<body>
<form>
<p>
<input name="WebPage1" value="Web Page 1" type="button" onclick="ChangeContent()"/>
</p>
</form>
</body>
</html>
Webpage2.html
<html>
<head>
</head>
<body>
<form>
<p>
<input name="WebPg2" value="Web Page 2" type="button" onclick="parent.topPage.ChangeContent()"/>
</p>
</form>
</body>
</html>
Webpage.html (framed document)
<html>
<head>
<title>Create a Frame</title>
</head>
</script>
</head>
<frameset rows="50%,50%">
<frame src="WebPage1.html" name="topPage" />
<frame src="WebPage2.html" name="bottomPage" />
</frameset>
</html>
Changing a content and focus of child window :

Changing content of a child window(frame) dynamically using JavaScript function is done with window
object’s frame property name and location property. Location property of a frame object has href property
that assign the new source to the child window(frame).
Example: Parent.topPage.location.href=” URL”;

- topPage is the name of the child window whose contents has to be modified/changed.
- URL is relative address of the page to be opened in the specified chile window
Example:
Web page 1:
<html>
<head>
{
parent.topPage.location.href="WebPage3.html";
}
</script>
</head>
<body>
<form>
<p>
<input name="WebPage1" value="Web Page 1" type="button" onclick="ChangeContent()"/>
</p>
</form>
</body>
</html>
Web page 2:
<html>
<head>
</head>
<body>
<form>
<p>
<input name="WebPage2" value="WebPage2" type="button" onclick="parent.topPage.ChangeContent
()"/>
</p>
</form>
</body>
</html>
Web page 3:
<html>
<head>
</head>
<body>
<form>
<p>
<input name="WebPage3" value="Web Page 3"
type="button" />
</p>
</form>
</body>
</html>
Parent window:
<html>
<head>
</head>
</frameset>
</html>
Focus of a window:
The last child window that is created has the focus by default. One can give any child window the focus by
changing the focus after all the web pages have loaded in their corresponding child windows.
This can be done by calling the focus() method of the child window where the focus is being given to the
web page that appears in the bottomPage child window. One can call the focus() method from a JavaScript
function or directly in response to an event such as the onclick event.
Example: parent.topPage.focus();
Writing to a child window:
The content of a child window is a web page that exists on the web server. User can dynamically create the
content when defines the frameset by directly writing to the child window from a JavaScript. The JavaScript
must be defined in the HTML file that defines the frameset and called when the frameset is loaded.
Example:
<html>
<head>
{
window.topPage.document.open();
window.topPage.document.writeln('<html>');
window.topPage.document.writeln('<head>');
window.topPage.document.writeln('<title>Web Page 3</title>');
window.topPage.document.writeln('</head>');
window.topPage.document.writeln('<body>');
window.topPage.document.writeln('<FORM">');
window.topPage.document.writeln('<P> Hello, Welcome to dynamic content of a child window');
window.topPage.document.writeln('<INPUT name="WebPage3" value="Web Page 3" type="button" />');
window.topPage.document.writeln('</P>');
window.topPage.document.writeln('</FORM>');
window.topPage.document.writeln('</body>');
window.topPage.document.writeln('</html>');
window.topPage.document.close();
}
</script>
</head>
<frameset rows="50%,50%" onload="ChangeContent()">
<frame src="" name="topPage" />
</frameset>
</html>
In the above example, a function ChangeContent ( ) is called and executed when frameset is loaded in the
webbrowser. Function contain code to change content of a frame named as ‘topPage’. first frame inside the
frameset is named as ‘topPage’ and this nme is used indside function with document.write method.
The JavaScript function is defined in the <head> tag and is called when the onload event occurs. The
topPage child window must be opened before the JavaScript function can write to the window.A child
window can be opened by calling open() method with window.topPage.document.open() statement.Once
opened, call the write() method to write HTML content to the child window to create the web page. This
example displays the some text and Web Page 3 button on a form. The final step is to call the close() method
to close the window with window.topPage.document.close() statement.
Output:
Accessing elements of another child window:
In JavaScript, some application may require accessing elements of one child window from another child window. One
can access and change the value of elements of another child window by directly referencing the element from within
JavaScript. One must explicitly specify the full path to the element in the JavaScript statement that references the
element, and it must be from the same domain as the web page; otherwise, a security violation occurs.
Framed document:
<html>
<head>
</head>
<frameset rows="50%,50%">
</frameset>
</html>
Webpage1.html:
<html>
<head>
function changelabel()
{
parent.bottomPage.form1.b1.value="label changed";
parent.bottomPage.form1.t1.value="xyz";
}
</script>
</head>
<body>
<p> Web page 1</p>
<form>
<p>
<input name="webpage 1" value="change lable" type="button" onclick="changelabel()"/>
</p>
</form>
</body>
</html>
Webpage2.html:
<html>
<body>
<p> Web page 2</p>
<form name="form1">
<input type="text" name="t1">
<input type="button" name="b1" value="Click here">
</form>
</body>
</html>
In the above example, framed document is divided into two frames. First frame with name as ‘topPage’ load
webpage1.html and second frame with name as ‘bottomPage’ loads webpage2.html.
Web page 1 requires access to elements from web page 2. So to access elements from bottomPage, browser
need unique identification of name of the frame as well as name of the elements from another child window.
Example: parent.bottomPage.form1.b1.value="label changed";
- parent refers to the framed output (main window)
- bottomPage is the name of the frame from which element has to accessed.
- form1 is the name of the form from child window that contains the element to be accessed
- b1 is the name of the button on the form.
- value is the property of button .
Output:Initial output of framed document. (Executed with IE)
After clicking on change label button in web page 1 , text in textbox and label on button in web page 2
changes as shown below.
5.3 Rollover:
Rollover is a JavaScript technique used by Web developers to produce an effect in which the appearance of
a graphical image changes when the user rolls the mouse pointer over it. For example, in online shopping
website, all product images are displayed with their name. When visitor move mouse over any image, its
details appear in the same window or a popup window.
Creating rollover :
A rollover is caused by an event called onmouseover and occurs when a visitor to a web site moves the
mouse over an object that appears on the page. An object can be an image, text, or any element of a form.
Browser reacts to the onmouseover and onmouseout event of HTML tag that defines rollover and rollback
effects for the object on the web page. When event occurs, it calls an action which can have a new value to
an attribute of an object, call to a method of an object, or call a JavaScript function.
Example:
<img height="300" src="s1.jpg" width="300" border="0" onmouseover="src='s2.png'" onmouseout="src='s1.jpg'" >
In the above example,when web page is loaded in the browser, an image named as s1.jpg will be displayed.
When mouse is moved over the image, onmouseover event occurs and s2.png image replaces s1.jpg image.
This effect is called as rollover. Similarly, when mouse is moved out of image area, onmouseout event
occurs and again s1.jpg image replaces s2.png image.
When visitor move mouse over an image, onmouseover event executes and changes the image with some
other address. This effect is called as rollover effect. When rollover takes place and visitor moves mouse out
of an image the onmouseout event executes and changes the image with original image. This effect is called
as rollback effect.
Program: Output:
<html>
<head>
<title>Product Page</title>
</head>
<body>
<TABLE width="100%" border="0">
<TBODY>
<TR valign="top">
<TD width="50">
<a>
<IMG height="300" src="s1.jpg"
width="300" border="0" onmouseover="src='s2.png'"
After moving mouse on image,
onmouseout="src='s1.jpg'">
onmouseover event will occur an image
</a>
will change.
</TD>
<TD>
<IMG height="1" src="" width="10">
</TD>
<TD>
<B><U>Java Demystified</U></B>
</FONT><FONT face="arial, helvetica, sans-serif"
size="-1">
<BR>JimKeogh / Paperback / Osborne McGraw Hill /
352pp.<BR>ISBN: 0072254548 May 2004
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
Text rollover :
A visitor can see additional information about an item described in text by placing the mouse cursor on the
text, this is known as text rollover. This eliminates the time-consuming task of using a hyperlink to display
another web page that contains this additional information.
You create a rollover for text by using the onmouseover attribute of the <A> tag, which is the anchor tag.
You assign the action to the onmouseover attribute of <A> tag.
Example:
In the following example, an image is displayed on the web browser with the name given to it as ‘cover’.
<IMG height="200" src="s1.jpg" width="200" border="0" name="cover">
A text as ‘Java Demystified’ is placed on web page as a link using <A> tag. <A> tag has onmouseover event
attribute that indicates source for an image to be displayed in the are named as ‘cover’. When mouse is move
on text, onmouseover event executes and the original image changes with another image as s2.png.
<A onmouseover="document.cover.src='s2.png'"><B><U>Java Demystified</U></B> </A>

Program: Output:
<html> Initial Output:
<head>
<title>Rollover Text</title>
</head>
<body>
<TBODY>
<TR vAlign="top">
<TD width="50"> Text rollover for first text
<a>
<IMG height="200" src="s1.jpg" width="200" border="0"
name="cover">
</a>
</TD>
<TD>
<A onmouseover="document.cover.src='s2.png'">
<B><U>Java Demystified</U></B> </A> Text rollover for second text
<BR>
<A onmouseover= "document.cover.src='s3.png'">
<B><U>OOP Demystified</U></B> </A>
<BR>
<A onmouseover= "document.cover.src='s4.png'">
<B><U>Data Structures Demystified</U></B> </A>
</TD>
</TR>
</TBODY> Text rolover for third text
</TABLE>
</body>
</html>
Note: You can show any example with text in anchor tag and onmouseover event.
Multiple actions for rollover:
In some applications, user may want to perform multiple actions when onmouseover event occurs for any
object within the web page. This can be done by creating a JavaScript function which is called by the
onmouseover attribute when an onmouseover event happens.
Example: A function shown below must be defined inside script tag. This function first replaces an image by
setting src property of block named as ‘cover’. then it opens a new window with a message.
function Openwin()
{
document.cover.src='s2.png';
MyWindow = window.open('', 'myAdWin','height=50, width=150, left=500, top=400');
MyWindow.document.write('10% Discount for Java Demystified!');
}
Above function is called in onmouseover event used inside <A> tag for the text ‘Java Demystifed’.
<A onmouseover="Openwin()"><B><U>Java Demystified </U></B> </A>
When visitor move mouse over the text, an image changes as well as new window is opens in the web
browser that diaplays discount message.
Program: Output: Initial image
<html>
<head>
<title>Open Window</title>
function Openwin()
{
document.cover.src='s2.png';
MyWindow = window.open('', 'myAdWin','height=50,
width=150, left=500, top=400');
MyWindow.document.write('10% Discount for Java
Demystified!');
} After moving mouse on text ‘Java
function closewin() Demystified’ image will change and a new
{ window will open to show a message.
document.cover.src='s1.jpg';
MyWindow.close();
}
</script>
</head>
<body>
<TBODY>
<TR vAlign="top">
<TD width="50">
<IMG height="200" src="s1.jpg" width="200" border="0"
name="cover">
</TD>
<TD>
<A onmouseover="Openwin()" onmouseout ="closewin()" >
<B><U>Java Demystified </U></B> </A>
</TD>
</TR>
</TBODY>
</TABLE></body></html>
More efficient rollover:
An efficient way of handling rollovers is to load images into an array when your web page loads. The
browser loads each image once the first time image is referenced in the web page. Typically, the default
setting for the browser is to check the browser cache for subsequent references for the image rather than
download the image again from the web server. A visitor to your web page might have changed the default
setting, causing the browser to reload the image each time the image is referenced. This might cause a
noticeable delay. Any delay in transmission is likely to be noticed by the visitor. While most visitors accept
short delays when they're selecting a different web page, they tend to be unforgiving if the rollover takes
longer than a second or two to display the new image. You can reduce this delay by creating a JavaScript
that loads all the images into memory once at the beginning of the JavaScript, where they can be quickly
called upon as the onmouseover event occurs. Downloading images when the web page is first loaded is a
simple three-step
process:
1. Declare an image object.
2. Assign the image file to the image object.
3. Assign the image object to the src attribute of the HTML tag that is going to react to the rollover event.
In the following program, Java,OOP and Data are thre image objects that contains imges as per the src
attribute value. When mouseover event occurs for any text, a new image is refernced. This image is
downloaded by the browser when it is accessed for the first time. Then every reference to image first check
cache memory to reduce downloading delay.
Program: Output:
<html> Initial Output:
<head>
<title>More Efficient Rollover</title>
<script language="Javascript" type="text/javascript">
Java= new Image;
OOP = new Image;
Data = new Image;
if (document.images)
{
Java.src = 's1.jpg';
OOP.src = 's2.png'; Text rollover for first text
Data.src = 's3.png';
}
else
{
Java.src = '';
OOP.src = '';
Data.src = '';
document.cover = '';
}
</script> Text rollover for second text
</head>
<body>
<TABLE width="100%" border=0>
<TBODY>
<TR vAlign="top">
<TD width="50">
<a>
<IMG height="200" src="s4.png" width="200" border="0"
name="cover">
</a>
</TD> Text rolover for third text
<TD>
<IMG height="1" src="" width="10">
</TD>
<TD>
<A onmouseover= "document.cover.src=Java.src">
<B><U>Java Demystified </U></B> </A>
<BR>
<A onmouseover= "document.cover.src=OOP.src">
<B><U>OOP Demystified</U></B> </A>
<BR>
<A onmouseover= "document.cover.src=Data.src">
<B><U>Data Structures Demystified</U></B> </A>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>

Chapter 5.2-5,3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 5.2-5,3

Uploaded by

Copyright:

Available Formats

Chapter 5

Example: - A window divided into two rows:

Example A window divided into two columns:

Dividing in rows and columns:

 Invisible border of frame:

Calling a child window:

Changing a content and focus of child window :

Example: Parent.topPage.location.href=” URL”;

Output:Initial output of framed document. (Executed with IE)

<IMG height="200" src="s1.jpg" width="200" border="0" name="cover">

<A onmouseover="document.cover.src='s2.png'"><B><U>Java Demystified</U></B> </A>

You might also like