[go: up one dir, main page]
Scribd
Upload
36 views26 pages

Regular Expression, Rollover and Frames-1

Css

Uploaded by

siddhichoudhari88
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
36 views26 pages

Regular Expression, Rollover and Frames-1

Css

Uploaded by

siddhichoudhari88
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Unit 5 Regular Expression, Rollover and Frames

<frame> tag :
The <frame> tag in HTML was used to define a specific section or "frame" of a
webpage. A webpage could be split into multiple frames using the <frameset> element, and
each frame would load a different HTML document.
Syntax:
<frameset rows="50%, 50%">
<frame src="top.html">
<frame src="bottom.html">
</frameset>

Attributes of <frame>
1. src: Specifies the URL of the document to be loaded in the frame.
Ex:<frame src="example.html">

2. name: Defines the name of the frame, which can be used for targeting links to open in
that specific frame.

Ex: <frame src="example.html" name="contentFrame">

3. Scrolling: Defines whether the scrollbars should appear in the frame. It can take the
following values:
"yes": Scrollbars always appear.
"no": Scrollbars never appear.
"auto": Scrollbars appear automatically if needed.
Ex:
<frame src="example.html" scrolling="auto">
4. noresize: Prevents the user from resizing the frame. By default, frames can be resized
by dragging their borders
<frame src="example.html" noresize>
5. frameborder: Defines whether the frame should have a border. It takes values:

"1": Displays a border.

"0": No border.

6. marginwidth
Sets horizontal margin between content and edge

7. marginheight:
Sets vertical margin between content and edge

Example
<frame src="example.html" marginwidth="10" marginheight="10">

<frameset cols="25%, 75%">


<frame src="menu.html" name="menuFrame" scrolling="no" frameborder="1">
<frame src="content.html" name="contentFrame">
</frameset>

<frameset>:
The <frameset> tag was used to divide a webpage into multiple sections or "frames."
Each frame could display a different webpage, allowing you to view several pages at once.
Syntax:
<frameset rows="row_size" cols="column_size">
<frame src="URL_of_page">
<frame src="URL_of_page">
</frameset>
 rows: Divides the window horizontally.
 cols: Divides the window vertically.
 <frame src="...">: Defines the content to be shown in each frame.

Attributes
1. rows:
 Specifies the number and size of rows in the frameset (dividing the page horizontally).
 Values can be percentages ("50%"), pixels ("200"), or * (splits remaining space).
Ex:
<frameset rows="50%, 50%">
2. cols:
 Specifies the number and size of columns in the frameset (dividing the page
vertically).
 Similar to rows, you can use percentages, pixels, or
Ex:
<frameset cols="30%, 70%">
3. frameborder:
 Controls whether the borders between frames are visible or not.
 Values: 0 (no border), 1 (border visible)
4. border
 Defines the thickness of the borders between the frames
Ex:
<frameset cols="50%, 50%" border="5">
5. framespacing:
 Specifies the space between frames (in pixels).
Ex:
<frameset cols="50%, 50%" framespacing="10">

Example
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="50%, 50%" frameborder="1" border="5" framespacing="10">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</html>

page1.html:
<html>
<head>
<title>Page 1</title>
</head>
<body>
<h1>Welcome to Page 1</h1>
<p>This is the content of the first frame.</p>
</body>
</html>

page2.html
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Welcome to Page 2</h1>
<p>This is the content of the second frame.</p>
</body>
</html>

Design frameset tag for representing following layout


Frame1

Frame2 Frame3 Frame4

<html>
<head>
<title>Frameset Layout</title>
</head>
<frameset rows="30%, 70%" border="5">
<!-- Frame1 at the top -->
<frame src="frame1.html">

<!-- Frame2, Frame3, Frame4 in the second row -->


<frameset cols="30%, 40%, 30%" border="5">
<frame src="frame2.html">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
</frameset>
</html>
We would need the following files:
frame1.html:
<html>
<head>
<title>Frame 1</title>
</head>
<body>
<h1>
<center>Frame 1</center>
</h1>
</body>
</html>

frame2.html:
<html>
<head>
<title>Frame 2</title>
</head>
<body>
<h1>
<center>Frame 2</center>
</h1>
</body>
</html>

frame3.html:
<html>
<head>
<title>
Frame 3
</title>
</head>
<body>
<h1>
<center>Frame 3</center>
</h1>
</body>
</html>

frame4.html:
<html>
<head><title>Frame 4</title></head>
<body>
<h1>
<center>Frame 4</center>
</h1>
</body>
</html>

<iframe> tag:
The <iframe> tag in HTML is used to embed another webpage or content (like a video or
map) inside your webpage. It's like a window that shows another page within your page.
Attributes of <iframe>:
1. src:
o The URL of the page or content you want to display inside the iframe.
o Example: src="https://www.example.com"
2. width:
o Sets the width of the iframe in pixels or percentage.
o Example: width="600"
3. height:
o Sets the height of the iframe in pixels or percentage.
o Example: height="400"
4. frameborder:
o Controls whether the iframe has a border.
o Values: 0 (no border), 1 (border).
o Example: frameborder="0"
5. scrolling:
o Defines whether scrollbars appear inside the iframe.
o Values: yes (always), no (never), auto (shows scrollbars if needed).
o Example: scrolling="auto"
6. allowfullscreen:
o Allows the iframe content (such as a video) to go fullscreen.
o Example: allowfullscreen="true"
7. name:
o Assigns a name to the iframe, which can be used to target the iframe with links
or scripts.
o Example: name="myIframe"

8. Marginwidth
Sets horizontal margin between content and edge

9. marginheight:
Sets vertical margin between content and edge

Syntax:
<iframe
src="URL_of_the_page"
width="width_in_pixels_or_percentage"
height="height_in_pixels_or_percentage"
frameborder="value"
scrolling="value"
>
</iframe>
Example
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<h1>Embedding a Website using Iframe</h1>
<iframe src="https://www.msbte.org.in"
width="600"
height="400"
frameborder="1"
scrolling="auto">
</iframe>
</body>
</html>
Output

3. Write a script for creating following frame structure


FRAME1
FRAME2 FRAME3
 FRUITS
 FLOWERS
Fruits File
 CITIES Content of fruit file

FRUITS, FLOWERS and CITIES are links to the webpage fruits.html, Flowers.html,
cities.html respectively. When these links are clicked Corresponding data appears in
FRAME 3.

MainProgram.html

<html>
<head>
<title>
MSBTE FrameSet Question
</title>
</head>
<frameset rows="20%,80%">
<frame src="frame1.html">
<frameset cols=",*">
<frame src="frame2.html">
<frame src="frame3.html" name="frame3">
</frameset>
</frameset>
</html>

Frame1.html

<html>
<head>
<title>Frame1</title>
</head>
<body>
<h1>
<center>
Frame1
</center>
</h1>
</body>
</html>

Frame2.html
<html>
<head>
<title>Frame2</title>
</head>
<body>
<h1>
Frame2
</h1>
<ul>
<li><a href="fruits.html" target="frame3">Fruits</a> </li>
<li><a href="flowers.html" target="frame3">Flowers</a></li>
<li><a href="cities.html" target="frame3">Cities</a></li>
</ul>
</body>
</html>

Frame3.html
<html>
<head>
<title>Frame3</title>
</head>
<body>
<h1>
<center>
Frame3
</center>
</h1>
</body>
</html>

fruits.html
<html>
<body>
<h1>Fruits File</h1>
<p>Content of fruit file</p>
</body>
</html>
flowers.html
<html>
<body>
<h1>Flowers File</h1>
<p>Content of flowers file</p>
</body>
</html>

cities.html
<html>
<body>
<h1>Cities File</h1>
<p>Content of cities file</p>
</body>
</html>
Invisible Borders of Frame:
The following ways to make frame border invisible
1. Using <iframe> tag
1.1 The tag <iframe> is used to define an inline frame.
1.2 It is possible to remove borders from the <iframe> tag by using frameborder attribute
1.3 frameBorder attribute can have two values :
0 (for disabling the border)
1 (for enabling the border)
1.4 Its default value is 1.
Steps :
1. Use the <body> element
2. Add <h1> element withing <body>
3. Add the <iframe> element with src and frameborder attributes within <body>
4. Use 0 as value for frameborder attribute
Example:
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<h1>Embedding a Website using Iframe</h1>
<iframe src="https://www.msbte.org.in"
width="600"
height="400"
frameborder="0"
scrolling="auto">
</iframe>
</body>
</html>

2. Using <frameset> tag or <frame> tag

2.1 It is possible to make borders invisible of all frames which are containing
within <frameset> tag by using frameborder attribute
2.2 if we set border to 0(zero), the it will disable the border of all frames

Example
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="50%, 50%" frameborder="0">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</html>
page1.html:
<html>
<head>
<title>Page 1</title>
</head>
<body>
<h1>Welcome to Page 1</h1>
<p>This is the content of the first frame.</p>
</body>
</html>
page2.html
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Welcome to Page 2</h1>
<p>This is the content of the second frame.</p>
</body>
</html>

Changing a Content and Focus of Window


 The content and focus of child window can be changed from another child window by
modifying its source file using javascript
 We can call or access one child window/frame from another child window/frame by
using “parent” property.
 window.parent return immediate parent of window.
 href attribute of frame is used to assign the new source to child window.
ParentWindow.html
<html>
<head>
<title>Parent Window </title>
</head>
<frameset cols="*,*">
<frame src="page1.html" name="p1">
<frame src="page2.html" name="p2">
</frameset>
</html>
Page1.html
<html>
<head>
<title>Page 1</title>
</head>
<body>
<h1>Welcome to Page 1</h1>
<p>This is the content of the first frame.</p>
<script>
function show()
{
parent.p2.location.href="radio.html";
}
</script>
<br>
<input type="button" value="Click" onclick="show()">
</body>
</html>

radio.html
<html>
<head>
<title>radio</title>
</head>
<body>
<h1>Called Window</h1>
<p>This is the content of the called window</p>
Select Gender
<br>
Male<input type="radio" name="gender" value="Male">
<br>
Female<input type="radio" name="gender" value="Female">
</body>
</html>
Page2.html
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Welcome to Page 2</h1>
<p>This is the content of the second frame.</p>
</body>
</html>

Calling Child Window


 A window that opens inside a parent window is called child window.
 We can call or access one child window /frame from another child window/frame by
using “parent” property.
 Parent property returns parent window of current window.
 Parent property contains child window object.
Syntax:
window.parent
OR
parent
Example

Parent.html

<html>
<head>
<title>Parent Window with Frames</title>
</head>
<frameset cols="50%,50%">
<frame src="frame1.html" name="p1">
<frame src="frame2.html" name="p2">
</frameset>
</html>

Frame1.html
<html>
<head>
<title>Frame 1</title>
</head>
<body>
<h1>Frame 1</h1>
<p>This is the first frame.</p>
<input type="button" name="button1" value="Click Me" onclick="parent.p2.show()">
</body>
</html>

Frame2.html
<html>
<head>
<title>Frame 2</title>
</head>
<body>
<h1>Frame 2</h1>
<p id="content">This is the content of frame 2.</p>
<script>
function show() {
document.getElementById("content").innerHTML = "Content updated from Frame 1!";
}
</script>
</body>
</html>

//Writing to Child window


 We can write the content on child window from another window by using write() of
document object.
 We can call or access one child window /frame from another child window/frame by
using “parent” property.
 Parent property returns parent window of current window.
 Parent window contains child window object
 Child window object contains document object
 We uses write method of document object.

Parent.html
<html>
<head>
<title>Parent Window with Frames</title>
</head>
<frameset cols="50%,50%">
<frame src="frame1.html" name="p1">
<frame src="frame2.html" name="p2">
</frameset>
</html>

Frame1.html
<html>
<head>
<title>Frame 1</title>
</head>
<body>
<h1>Frame 1</h1>
<p>This is the first frame.</p>
<input type="button" name="button1" value="Click Me" onclick="show()">
<script>
function show()
{
parent.p2.document.write("<h1>This message written by Frame1</h1>");
}
</script>
</body>
</html>

Frame2.html
<html>
<head>
<title>Frame 2</title>
</head>
<body>
<h1>Frame 2</h1>
<p id="content">This is the content of frame 2.</p>
</body>
</html>
Output

Accessing Elements of Another Child window


We can access the element of one child window from other child window using method of
document object
Also content of document can be changed without refreshing the web pages by using
innerHTML property.
Important methods of document object are
1. getElementById()
2. getElementByName()
3. getElmentByTagName()
4. getElementByClassName()

Parent.html
<html>
<head>
<title>Parent Window with Frames</title>
</head>
<frameset cols="50%,50%">
<frame src="frame1.html" name="p1">
<frame src="frame2.html" name="p2">
</frameset>
</html>
Frame1.html
<html>
<head>
<title>Frame 1</title>
</head>
<body>
<h1>Frame 1</h1>
<p>This is the first frame.</p>
<script>
function show() {
parent.p2.document.getElementById("content").innerHTML = "Paragraph tag
accessed from Frame1";
}
</script>
<input type="button" name="button1" value="Click Me" onclick="show()">
</body>
</html>

Frame2.html
<html>
<head>
<title>Frame 2</title>
</head>
<body>
<h1>Frame 2</h1>
<p id="content">This is the content of frame 2.</p>
</body>
</html>

Parent.html

Rollover:
A rollover in JavaScript refers to changing the appearance or behaviour of
an element (usually an image or button) when the user hovers the mouse pointer over
it.
It's a common effect used in web design to improve interactivity, often with
buttons, links, or images.
Rollover is a JavaScript technique used by web developers to produce an
effect in which appearance of a graphical image change when the user rolls the mouse
pointer over it.

Features of rollover
1. Enables interaction between the user and the web page
2. Makes an image appear or disappear when mouse is moved over it.
3. Makes a hidden image or element to appear when the mouse is over it.
4. Makes an element of the page change the color of entire web page when the
mouse is moved over it.
5. Causes text to highlighted with bold colours when mouse is moved on text
element

Creating Rollover
1. JavaScript rollovers are created by adding an onmouseover and onmouseout
event on images.
2. onmouseover is triggered when mouse moves over an image and the onmouseout
is triggered when the mouse moves aways from the image.

Example:
<html>
<head>
<title> RollOver Example</title>
</head>
<body>
<a
onmouseover="mouse_over()"
onmouseout="mouse_out()"
>
<img src="RED.jpg" id="myimg">
</a>
<script>
function mouse_over()
{
document.getElementById("myimg").src="GREEN.jpg";
}

function mouse_out()
{
document.getElementById("myimg").src="ORANGE.jpg";
}
</script>
</body>
</html>

Output
After running

onmouseover

Onmouseout

Text Rollover
We can create a rollover for text by using the onmouseover attribute of anchor
tag <a> and then assign the action to the onmouseover attribute.
We can change the current image with specific image when moving mouse on text.

Consider example display the flag of nation on moving mouse cursor over the name
of current nation.
Example

<html>
<head>
<title>Text Rollover - Flag Example</title>
</head>
<body>

<h2>Hover over a nation to see its flag:</h2>

<!-- Links that change the image when hovered -->


<a onmouseover="showFlag('india.jpg')" onmouseout="clearFlag()">India</a> |
<a onmouseover="showFlag('usa.jpg')" onmouseout="clearFlag()">USA</a> |
<a onmouseover="showFlag('germany.jpg')"
onmouseout="clearFlag()">Germany</a>

<!-- Placeholder for the flag image -->


<img id="flag" src="default.jpg" alt="Flag will appear here">

<script>
// Function to change the flag image
function showFlag(flagSrc) {
document.getElementById("flag").src = flagSrc;
}

// Function to clear the flag (reset to default image)


function clearFlag() {
document.getElementById("flag").src = "default.jpg";
}
</script>

</body>
</html>

Multiple Actions For Rollover:

1. Rollover is triggered when action or events perform using mouse


2. It can be possible to perform multiple actions with rollover using different mouse
event handlers.

Event Event Descriptions


Performed Handler
click onclick Triggered when an element (e.g.,
button, link) is clicked.
mouseover onmouseover Triggered when the mouse pointer
moves over an element (enters the
element's area).
mouseout onmouseout Triggered when the mouse pointer
leaves an element (exits the
element's area).
mousedown onmousedown Triggered when the mouse button is
pressed down on an element.
mouseup onmouseup Triggered when the mouse button is
released after being pressed down on
an element.
mousemove onmousemove Triggered when the mouse pointer
moves over an element, tracking the
movement continuously.

<html>
<head>
<title>Mouse Rollover Example</title>
</head>
<body>
<h1>Check the document for mouse events</h1>
<div id="box"
style=
"width: 400px; height:400px;
border: 2px solid blue;
text-align:center;
background-color:green;"
onclick="handleClick(event)"
onmousedown="handleMouseDown(event)"
onmouseup="handleMouseUp(event)"
onmousemove="handleMouseMove(event)"
onmouseover="handleMouseOver(event)"
onmouseout="handleMouseOut(event)"
oncontextmenu="handleContextMenu(event)">
Hover or Click Me
</div>

<script>
function handleClick(event) {
console.log(" clicked at "+event.clientX + "," +event.clientY);
}

function handleMouseDown(event) {
console.log('Mouse button pressed: ' + event.button);
}

function handleMouseUp(event) {
console.log('Mouse button released');
}

function handleMouseMove(event) {
document.getElementById('box').innerHTML = "Mouse Position
"+event.clientX + "," + event.clientY;
}

function handleMouseOver(event) {
document.getElementById('box').style.backgroundColor = 'lightcoral';
}
function handleMouseOut(event) {
document.getElementById('box').style.backgroundColor = 'lightblue';
}

function handleContextMenu(event) {
console.log('Right-click (context menu) event!');
}
</script>
</body>
</html>

You might also like