Contents

Unit 5. Regular Expression, Rollover and Frames ...............................2

Regular Expression ................................................................................................................ 2
Language of Regular Expression ....................................................................................... 2
1. Brackets ‘[]’ ............................................................................................................. 2
2. Quantifiers ............................................................................................................... 3
3. Modifiers ................................................................................................................. 3
4. Literal Characters .................................................................................................... 3
5. Metacharacters ......................................................................................................... 3
6. RegExp Methods ..................................................................................................... 4
7. String methods used with Regular Expression ........................................................ 4
Finding Non – Matching Characters .................................................................................. 5
Entering a range of Characters ........................................................................................... 5
Matching digits and non – digits ........................................................................................ 6
Matching punctuations and symbols .................................................................................. 7
Demonstration of String and RegEx functions .................................................................. 7
RegExp Object Properties .................................................................................................. 9
Frames .................................................................................................................................. 10
<Frame> Object ............................................................................................................... 10
<Frameset> Object ........................................................................................................... 11
Creating a frame ............................................................................................................... 11
Invisible Borders of frame ............................................................................................... 12
Calling a child window .................................................................................................... 13
Frame’s name and target attributes .................................................................................. 13
Changing the content and focus of child window ............................................................ 14
Writing to a child window ............................................................................................... 15
Accessing the elements of other child window................................................................ 15
Rollover................................................................................................................................ 16
Creating Rollover ............................................................................................................. 16
Text Rollover ................................................................................................................... 17
Multiple actions for rollover ............................................................................................ 17
More Efficient Rollover ................................................................................................... 18
 Unit 5. Regular Expression, Rollover and Frames

Regular Expression

 A regular expression, also known as regex, is a sequence of characters that forms a

search pattern.
 When you search for data in a text, you can use this search pattern to describe what you
are looking for.
 A regex can be a single character, or a more complicated pattern.
 Regex can be used to perform all types of search and text replace operations.
 Syntax:
/pattern/modifiers;
 A regular expression can also be defined with the ‘RegExp’ constructor as
var pattern = new RegExp (pattern, modifiers);
Where,
pattern: A string that specifies the pattern of regular expression or another regular expression.
modifier: An optional string containing any of the ‘g’, ‘m’, ‘i’ attributes that specify global,
multiline and case – insensitive matches respectively.

Example using literal notation:

var regex = /cat/gi;
var text = “The cat sat on the mat. The other CATS are playing.”;
var matches = text.match(regex);
console.log(matches);

Example using RegExp constructor:

var pattern = new RegExp(‘cat’, ‘gi’);

Language of Regular Expression

1. Brackets ‘[]’
Brackets are used to define a range of characters. This means that the pattern inside the brackets
will match any one character from the set of characters defined inside. It's a way to specify
alternatives for a single character at a particular position in the string.
Expression Description
[…] Matches any character/s between the brackets.
[^…] Matches any character/s not between the brackets.
[0-9] Matches any decimal digit from 0 to 9.
[a-z] Matches all lowercase alphabets.
[A-Z] Matches all uppercase alphabets.
 2. Quantifiers
The frequency or position of bracketed character sequences and single characters can be
denoted by a special character. Some commonly used quantifiers are as follows:
 ‘+’: Matches its preceding pattern for one or more times.
 ‘*’: Matches its preceding pattern for zero or more number of times.
 ‘?’: Matches its preceding pattern for zero or one number of times.
 ‘{n}’: Matches its preceding pattern for exactly n number of times.
 ‘{m, n}’: Matches its preceding pattern for m to n number of times.
 ‘{n, }’: Matches its preceding pattern for n or more number of times.
 ‘p$’: Matches any string with p at the beginning of it.
 ‘^p’: Matches any string with p at the end of it.

3. Modifiers
Modifiers are special flags that you can add to a regular expression to change how it works.
They help you control how regex searches through text.
Common modifiers:
 i (Case insensitive): Makes the search ignore letter case. For example, /cat/i matches
with cat, CAT, cAt, Cat, Cat, etc.
 m (multi – line): Changes how the ^ and $ characters work. With this modifier, ^
matches with the start of each line and $ matches with the end of each line. For example:
/^Hello/m;
 g (global): It tells the regex to find all the matches in the text, not just the first one.
Without this modifier, regex stops after finding the first match. For example: /cat/g;

4. Literal Characters
They are the actual characters to be matched exactly as they appear.
 Single letters (Example: “a”)
 Whole words (Example: “cat”)
 Special characters: Some characters are special in regex, like ‘.’, ‘,’, ‘*’, ‘+’ etc. If you
want to match them literally, you need to escape them with a backslash.
 Example:
var pattern = /\w + @\w +\.\w +/g;
var text = “Contact us at [email protected] or [email protected].”;
var matches = text.match(pattern);
console.log(matches); //[[email protected], [email protected]]

5. Metacharacters
 A metacharacter is simply an alphabetical character preceded by a backslash that acts
to give the combination a special meaning.
 For instance, you can search for a large sum of money using the '\d' metacharacter: /[\d]
+ 000/, Here \d will search for any string of numerical character.
 Character Description
. A single character
\s A whitespace character (space, tab, newline)
\S A non-whitespace character
\d A digit (0-9)
\D A non-digit
\w A word character (a-z, A-Z, 0-9,..)
\W A non-word character
[\b] A literal backspace character special case
[aeiou] Matches a single character in the given set
[^aeiou] Matches a single character outside the given set
foo | bar | baz Matches any one of the alternatives specified

6. RegExp Methods
Here is a list of the methods associated with RegExp along with their description.
Method Description
compile() Compiles a regular expression. Deprecated in version 1.5
exec() Tests for a match in a string. Returns the first match.
test() Tests for a match in a string. Return s true or false.
toString() Returns the string value of the regular expression.

7. String methods used with Regular Expression

Method Syntax and Description
match() str.match(regexp)
The method str.match(regexp) finds matches for regexp in the string str.
matchAll() str.matchAll(regexp)
The method str.matchAll(regexp) is used mainly to search for all matches with all groups.
replace() str.replace(regexp|str, fun|regexp)
This is a generic method for searching and replacing.
For Example,
// replace a dash by a colon
alert('12-34-56'.replace("-", ":")) // 12:34-56
// replace all dashes by a colon
alert( '12-34-56'.replace( /-/g, ":" ) ) // 12:34:56
replaceAll() str.replaceAll(regexp|str, fun|regexp)
This mehod replaces all occurrences of the string, while replace replaces only the first
occurrence.
For example,
// replace all dashes by a colon
alert('12-34-56'.replaceAll("-", ":")) // 12:34:56
search() str.search(regexp)
The method str.search(regexp) returns the position of the first match or -1 if none found
split() str.split(regexp|substring,delimiter)
Splits the string using the regexp (or a substring) as a delimiter.
 Finding Non – Matching Characters

<html>
<body>
<form name="form1">
<input placeholder="Enter here" id="name1">
<input type="button" value="Click here to Validate" onclick="validate()">
<p id="demo"></p>
</form>
<script>
function validate()
{
var str = document.getElementById("name1").value;
var pattern = /^[^aeiou]/i;
if (pattern.test(str))
document.getElementById("demo").innerHTML = "You Entered Consonant";
else
document.getElementById("demo").innerHTML = "You Entered Vowel";
}
</script>
</body>
</html>

Entering a range of Characters

To show a range of characters, use square brackets and separate the starting character from the
ending character with a hyphen. For example, [0-9] matches any digit. Several ranges can be
put inside square brackets. For example, [A-CX-Z] matches 'A' or 'B' or 'C' or 'X' or 'Y' or 'Z'.
[a-z] includes all lower-case alphabetic characters because those characters appear in sequence
in ASCII. Similarly, [A-Z] includes all upper-case alphabetic characters because those
characters appear in sequence in ASCII.

<html>
<body>
<form name="form1">
Chapter Name: <input id="Cname">
<p id="p1"></p>
Chapter Number: <input id="Cnumber">
<p id="p2"></p><br>
<input type="button" value="Click here to Validate" onclick="validate()">
</form>
 <script>
function validate()
{
var name=document.getElementById("Cname").value;
var number=document.getElementById("Cnumber").value;
var pattern_name = /^[a-zA-Z]+/;
var pattern_number=/^[1-6]/;
if(pattern_name.test(name)&&pattern_number.test(number))
{
document.getElementById("p1").innerHTML ="Valid";
document.getElementById("p2").innerHTML ="Valid";
}
else
{
document.getElementById("p1").innerHTML ="Invalid";
document.getElementById("p2").innerHTML ="Invalid";
}
}
</script>
</body>
</html>
Matching digits and non – digits
<html>
<body>
<form name="form1">
Enter Digits: <input id="digit"> <p id="p1"></p>
Enter Non-digits: <input id="non-digit"> <p id="p2"></p><br>
<input type="button" value="Click here to Validate" onclick="validate()">
</form>
<script>
function validate()
{
var d=document.getElementById("digit").value;
var D=document.getElementById("non-digit").value;
var pattern1_digit = /[0-9]+/;
var pattern2_digit=/\d/;
var pattern1_not_digit = /[^0-9]+/;
var pattern2_not_digit=/\D/;
if(pattern1_digit.test(d)||pattern2_digit.test(d))
document.getElementById("p1").innerHTML ="Valid";
else
document.getElementById("p1").innerHTML ="Invalid";
if(pattern1_not_digit.test(D)||pattern2_not_digit.test(D))
document.getElementById("p2").innerHTML ="Valid";
else
document.getElementById("p2").innerHTML ="Invalid";
}
</script>
</body>
</html>
 Matching punctuations and symbols

It is all non-word and non-space characters. This includes characters such as periods, commas,
exclamation marks, and quotation marks. For example, !, @, #, $, %, ^, &, *, (, ), _, +, |, }, {,
:, ”, ?, >, <, \, ], [, ‘, ;, ., /, ,.

<html>
<body>
<form name="form1">
Enter String: <input id="p">
<p id="p1"></p>
<input type="button" value="Click here to Validate" onclick="validate()">
</form>
<script>
function validate()
{
var str=document.getElementById("p").value;
var pattern_punc = /[!@#$%^&*\(\)_\+{}|":<>\?\[\]\;'/\.,"]+/g;
if(pattern_punc.test(str))
document.getElementById("p1").innerHTML ="String Contains punctuations
and symbol";
else
document.getElementById("p1").innerHTML ="String not Contains
punctuations and symbol";
}
</script>
</body>
</html>

Demonstration of String and RegEx functions

<html>
<body>
<form name="form1">
Enter String: <input id="p" size="50">
<p id="p1"><b></b></p>
<input type="button" value="replace" onclick="r()">
<input type="button" value="replaceAll" onclick="ra()">
<input type="button" value="match" onclick="m()">
<input type="button" value="matchAll" onclick="ma()">
<input type="button" value="search" onclick="s()">
<input type="button" value="exec" onclick="e()">
<input type="button" value="test" onclick="t()">
<input type="button" value="split" onclick="sl()">
</form>
function ra()
{
var str=document.getElementById("p").value;
var pattern = /java/g;
var r2=str.replace(pattern,"JAVA")
document.getElementById("p1").innerHTML =r2;
}
function m()
{
var str=document.getElementById("p").value;
var pattern = /java/;
var m1=str.match(pattern)
document.getElementById("p1").innerHTML =m1;
}
function ma()
{
var str=document.getElementById("p").value;
var pattern = /java/g;
var m2=str.match(pattern)
document.getElementById("p1").innerHTML =m2;
}
function s()
{
var str=document.getElementById("p").value;
var pattern = /java/g;
var s=str.search(pattern)
document.getElementById("p1").innerHTML =s;
}
function e()
{
var str=document.getElementById("p").value;
var pattern = /java/g;
var e1=pattern.exec(str)
document.getElementById("p1").innerHTML =e1;
}
function t()
{
var str=document.getElementById("p").value;
var pattern = /java/g;
var t1=pattern.test(str)
document.getElementById("p1").innerHTML =t1;
}
function sl()
{
var str=document.getElementById("p").value;
var pattern = /java/g;
var splt=str.split(pattern)
document.getElementById("p1").innerHTML =splt;
}
</script>
</body>
</html>
 RegExp Object Properties
 In javascript, Regular expressions are used to perform pattern matches in strings. They
can be created by
o Literal syntax. For example, to match 10 digit numbers:
 var mobileNumber = /\d{10}/.
o With RegExp constructor function. For example,
 var mobileNumber = new RegExp("\\d{10}", "g").
Property Description
constructor Returns the function that created the RegExp object’s prototype.
global Checks whether the ‘g’ modifier is set.
ignoreCase Checks whether the ‘i’ modifier is set.
multiline Checks whether the ‘m’ modifier is set.
lastIndex Specifies the index at which to start the next match.
source Returns the text of the RegExp pattern.

<html>
<body>
<form name="form1">
<input type="button" value="constructor" onclick="constructor()">
<input type="button" value="global" onclick="global()">
<input type="button" value="ignoreCase" onclick="ignoreCase()">
<input type="button" value="lastIndex" onclick="lastIndex()">
<input type="button" value="Multiline" onclick="multiline()">
<input type="button" value="source" onclick="source()"><br>
<p id="p2"></p>
<p id="p1"></p>
</form>
<script>
function constructor()
{
var pattern = new RegExp("JavaScript","ig");
var r=pattern.constructor;
document.getElementById("p1").innerHTML =r;
document.getElementById("p2").innerHTML ="Returns the function that created the
RegExp object's prototype";
}
function global()
{
var pattern = new RegExp("JavaScript","ig");
var r1=pattern.global;
document.getElementById("p1").innerHTML =r1;
document.getElementById("p2").innerHTML ="Checks whether the 'g' modifier is
set";
}
function ignoreCase()
{
var pattern = new RegExp("JavaScript","ig");
var r2=pattern.ignoreCase;
document.getElementById("p1").innerHTML =r2;
document.getElementById("p2").innerHTML ="Checks whether the 'i' modifier is
set";
}
 function lastIndex()
{
var pattern = new RegExp("JavaScript","ig");
var r3=pattern.lastIndex;
document.getElementById("p1").innerHTML =r3;
document.getElementById("p2").innerHTML ="Specifies the index at which to start
the next match";
}
function Multiline()
{
var pattern = new RegExp("JavaScript","ig");
var r4=pattern.multiline;
document.getElementById("p1").innerHTML =r4;
document.getElementById("p2").innerHTML ="Checks whether the 'm' modifier is
set";
}
function source()
{
var pattern = new RegExp("JavaScript","ig");
var r5=pattern.source;
document.getElementById("p1").innerHTML =r5;
document.getElementById("p2").innerHTML ="Returns the text of the RegExp
pattern";
}
</script>
</body>
</html>
Frames
 HTML Frames are used to divide the browser window into multiple sections where
each section can load a separate html document.
 A collection of frames in the browser window is known as frameset.
 The window is divided into frames in a similar way the tables are organized into rows
and columns.

<Frame> Object
 It is an element that represents the html frame which defines one particular window
(frame) within a frameset.
 It defines the set of frames that make up the browser window.
 It is a property of the window object.
 It has no end tag but needs to be closed properly.
 A <frame> should be used within a <frameset> tag only, since it defines a particular
area in which another HTML document can be displayed.
 The attributes of the <frame> element are as follows:
Attribute Description
src It is used to give the filename that should be loaded in the frame. Itsvalue can be any url.
name It is the name of the frame, which is used to indicate that a document should be loaded into
a frame.
frameborder It specifies whether or not the borders of that frame are shown. Possible values are 0 or 1.
marginwidth It specifies the space between the left and right of the frame’s border and content. The value
is given in pixels.
marginheight It specifies the space between the top and bottom of the frame’s border and content. The
 value is given in pixels.
noresize It prevents the user from being able to resize the frame by dragging the frame borders.
scrolling It controls the appearance of scrollbars that appear on the frame. Possible values are yes,
no and auto.
longdesc It allows to provide a link to another page which contains a long description of the contents
of the frame.

<Frameset> Object

 Frameset object holds two or more frame elements and each frame element in turn holds
a separate document.
 This object states only how many columns or rows there will be in the frameset.
 Syntax:
<frameset> . . . </frameset>
 The attribute of the <frameset> are as follows:
Attribute Description
cols It specifies how many columns are to be contained in the frameset and the size of each column.
rows It works like the ‘cols’ and takes the same values, but is used to specify the number of rows in the
frameset.
border It specifies the width of the border of each frame in pixels.
frameborder It specifies whether a 3D border should be displayed within frames. Possible values are 0 or 1.
bordercolor It sets the color of the border between frames.
framespacing It specifies the amount of space between frames in a frameset. It can accept any integer value.

Creating a frame
 To use frames on a page we use <frameset> tag instead of <body> tag.
 The <frameset> tag defines, how to divide the window into frames.
 The rows attribute of <frameset> tag defines horizontal frames and cols attribute
defines vertical frames.
 Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frames.
 Following is the example to create three horizontal frames –
frame.html
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "30%, 40%, * ">
<frame name = "top" src = "frame1.html" />
<frame name = "main" src = "frame2.html" />
<frame name = "bottom" src = "frame3.html" />
</frameset>
</html>
frame1.html
<html>
<head>
<title>HTML Frames</title>
</head>
<body>
<h2>This is Top frame </h2>
</body>
</html>

frame2.html
<html>
<head>
<title>HTML Frames</title>
</head>
<body>
<h2>This is Main frame </h2>
</body>
</html>

frame3.html
<html>
<head>
<title>HTML Frames</title>
</head>
<body>
<h2>This is Bottom frame </h2>
</body>
</html>

Invisible Borders of frame

Frame gets border by default, if we want to set the border of a frame invisible ,then we need to
set the attributes ‘frameborder’=0 and ‘border’=0. Example to set invisible border of frame
given below:

<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "30%,70%" >
<frame name = "top" src = "frame1.html" frameborder="0" border="0"/>
<frameset cols = "*, *">
<frame name = "main" src = "frame2.html" frameborder="0" border="0"/>
<frame name = "bottom" src = "frame3.html" frameborder="0" border="0"/>
</frameset>
</frameset>
</html>

Consider code for frame1.html, frame2.html and frame3.html same as above.

 Calling a child window

 A window that opens inside parent window is called child window.

 There are 4 child windows in the above picture.
 Using the frame in frameset means creating child windows inside the parent window.
 Each frame represents a child window and frameset represents parent window.
 To refer frame in the child window for each frame specify the name attribute then we
can refer child window by using its name preceded with parent property.
 For example: parent.frame2.display()

main_frame.html
<html>
<frameset cols="25%,75%">
<frame name="frame1" src="frame1.html"></frame>
<frame name="frame2" src="frame2.html"></frame>
</frameset>
</html>

frame1.html
<html>
<body>
<h3> Frame 1</h3>
<input type="button" name="button1" value="click"onclick="parent.frame2.display()"/>
</body>
</html>

frame2.html
<html>
<head>
<script>
function display()
{
document.write("<h3>This function is called from frame1</h3>");
}
</script>
</head>
<body>
<h3> Frame 2 </h3>
</body>
</html>

Frame’s name and target attributes

One of the most popular uses of frames is to place navigation bars in one frame and then load
main pages into a separate frame.
target_name.html
<html>
<head>
<title>HTMLTargetFrames</title>
</head>
<frameset cols="30%,70%">
<frame src = "menu.html" name = "menu_page" />
<frame src = "main.html" name = "main_page"/>
</frameset>
</html>

main.html
<html>
<body>
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>

menu.html
<html>
<body>
<a href = "https://www.google.com" target = "main_page">Google</a> <br/><br/>
<a href = "https://www.gmail.com" target="main_page">Gmail</a> <br/><br/>
<a href = "https://www.yahoo.com" target = "main_page">Yahoo</a>
</body>
</html>

Changing the content and focus of child window

The content and focus of child window can be changed from another child window. This can
be done by changing the source file for the particular frame by using JavaScript. The href
attribute of frame is used to assign the new source to the child window.
<html>
<frameset cols="25%, 75%">
<frame name="frame1" src="frame1.html"></frame>
<frame name="frame2" src="frame2.html"></frame>
</frameset>
</html>
<html>
<head>
<script>
function display(){
parent.frame2.location.href="https://www.google.com";
}
</script>
</head>
<body>
<h4> Frame 1</h4>
<input type="button" name="button1" value="Click Here..." onclick="display()">
</body>
</html>
<html>
<body>
<h4> Frame 2</h4>
<p>Content of Frame 2 will be changed after clicked on cleck here button of Frame 1</p>
</body>
</html>
 Writing to a child window
We can write the contents on child window from another child window by using the write()
method of document object.

<html>
<head>
<title>Parent window</title>
</head>
<frameset cols="*,*">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>
</html>
<html>
<head>
<title>child window</title>
<script>
function display()
{
parent.frame2.document.write("<h3>This message is written by frame 1</h3>");
}
</script>
</head>
<body>
<h4> Frame 1</h4>
<p>Click below button to write on frame 2</p>
<input type="button" name="button1" value="Click Here" onclick="display()">
</body>
</html>
<html>
<head>
<title>child window</title>
</head>
<body>
<h4> Frame 2</h4>
<p id="demo"> contents of frame 2 </p>
</body>
</html>

Accessing the elements of other child window

We can access the elements of child window from another child window. The element of child
window can be modified from another child window. If we want to change the name of button,
then it is possible to change the name of button from other child window.
<html>
<head>
<title>Parent window</title>
</head>
<frameset cols="30%,70%">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>
</html>
<html>
<head>
<script>
function display()
{
parent.frame2.document.getElementById("para").innerHTML="Element of frame2 is
accessed from frame1";
}
</script>
</head>
<body>
<h4> Frame 1</h4>
<input type="button" name="button1" value="click Here..." onclick="display()">
</body>
</html>
<html>
<body>
<h2> Frame 2</h2>
<h3 id="para"> frame 2 Content </h3>
</body>
</html>

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.
 Rollover also refers to a button on a Web page that allows interactivity between the
user and the Web page.

Creating Rollover
 A rollover is created by making use of ‘onmouseover’ event when the mouse pointer is
moved onto an element or onto one of its children.
 The <img> tag is used to define the image object.
 The value assigned to the src attribute of the <img> tag identifies the image itself.
 Now using onmouseover event you can change the image.
<html>
<head>
<title>Image Rollover</title>
</head>
<body>
<h2>Image Rollover</h2>
<h3>Move cursor over and out of an image to see result</h3>
<img src= “https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTnLqt7Y1gm8bYfrVNlUZJxSaso1GUy8sU_eQ&usqp=CAU”
onmouseover="src ='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPY-
f6bhIp95dhyMyXRWxvc_Kw-zZow3g5OA&usqp=CAU'" onmouseout = " src = 'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRW_K62fzNMBM0o97zU1ZTZ2ho6UsVNQIamN3sz1Rc83N4r_
e6sB1cHw0HmzCHiJA93_hM&usqp=CAUg'">
</body>
</html>

Text Rollover

 Rollover operation is also possible with text.

 If the mouse is moved on text then particular effect will be taken place and moved out
of text then the effect will reverse.
 For example, if mouse is over the apple text then image will be displayed is apple if
mouse is over the pineapple text then image will be displayed is pineapple.
 In the program we have used <img> tag and gave its name as “fruits” & <a> tag along
with src attribute.
 The src attribute is accessed using document.fruits.

<html>
<body>
<h2>text rollover</h2>
<a onmouseover="document.fruits.src='https://images.everydayhealth.com/images/apples-101-
about-1440x810.jpg?sfvrsn=f86f2644_1'">
<h3>apple</h3>
</a>
<a onmouseover="document.fruits.src='https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRAjcii1Eb3k8OWnnBCzOU3kC1AAz9qpYEcgw&usqp=CAU'">
<h3>pineapple</h3>
</a>
<img src="https://webartdevelopers.com/blog/wp-content/uploads/2022/02/rolling-text-hover-
animation.gif" alt="" name="fruits" width="330" height="250">
</body>
<html>

Multiple actions for rollover

 We can perform multiple action using rollover when mouse is over the text it will
display image and its description with respect to the text.
 Also by using rollover when mouse is over an image it will display text.
 In below example when user moves cursor over text fruits then image will display with
description and when user moves cursor on image then text will display.
<html>
<head>
<script>
function display1()
{
document.fruit.src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTwkTy-
Tz7sCGADJjcFDQgjmgsUZgVgnYv_iQ&usqp=CAU";
document.getElementById("p1").innerHTML="This is fruit image which is displayed
by using text rollover"
}
function display2()
{
document.getElementById("p2").innerHTML="This is description of flowers which is
displayed by using image rollover"
}
</script>
</head>
<body>
<h2>Multiple acions using rollover</h2>
<a onmouseover="display1()"> <h3>Fruits</h3> </a>
<img src="" name="fruit">
<p id="p1"></p>
<a onmouseover="display2()">
<img src="https://cdn1.1800flowers.com/wcsstore/Flowers/images/catalog/191167xlx.jpg"
width="250" height="250">
</a>
<p id="p2"></p>
</body>
</html>
More Efficient Rollover
We can add event to the html element by using addEventListener i.e we can register the
mouseover and mouseout event by using event listener.
Syntax :
addEventListener (“mouseover/mouseout”, function_name);

<html>
<body>
<script>
function mouseout()
{
document.getElementById("p1").innerHTML= "This is mouseout event..."
}
document.addEventListener("mouseover", function()
{ document.getElementById("p1").innerHTML="This is mouseover event..."});
document.addEventListener("mouseout", mouseout);
</script>
<h1 id="p1">Rollover using addEventListener... </h1>
</body>
</html>