Scribd
Upload
218 views

Topic 5 CSS

1) Regular expressions are patterns used to match character combinations in strings. They are created using forward slashes and include special characters to define the search pattern. 2) A program demonstrates testing if a string contains the letters 'a' or 'z' using the regular expression /[az]/. 3) Regular expressions use special characters like ., *, ?, etc. to define patterns to search for. Methods like test(), match(), and replace() are used with regular expressions to search and manipulate strings.

Uploaded by

Pratiksha Jadhav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
218 views

Topic 5 CSS

1) Regular expressions are patterns used to match character combinations in strings. They are created using forward slashes and include special characters to define the search pattern. 2) A program demonstrates testing if a string contains the letters 'a' or 'z' using the regular expression /[az]/. 3) Regular expressions use special characters like ., *, ?, etc. to define patterns to search for. Methods like test(), match(), and replace() are used with regular expressions to search and manipulate strings.

Uploaded by

Pratiksha Jadhav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Client Side Scripting Language 5-1 Regular Expression, Rollover and

Frames

Regular Expression, Rollover


and Frames

5.1 Regular Expression


Definition : Regular Expression is a special text string that defines the search pattern. It is a logical
expression.
For example – for counting specific characters in a string or to replace some substring by another
substring we need to create a regular expression.
We can create a regular expression pattern using forward slash /. For instance –
re = /abc/
Regular expression is a powerful way for searching and replacing the characters in the string.
Ex. 5.1.1 : Write a Java program to test if the string contains the letter ‘a’ or ‘z’ or both.
Sol. :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function TestString(str)
{
re=/[az]/;
if(re.test(str))
{
alert("The letter a or z or both are present in the string");
}
else
{
alert("String does not contain a or z or both");
}
}

</script>
</head>
<body>
<h2>Example of Regular Expression</h2>
<script type="text/javascript">
var input_str=prompt("Enter some string here","");
TestString(input_str);
</script>
</body>
</html>
TM
Technical Publications - An up thrust for knowledge
(5 - 1)
Client Side Scripting Language 5-2 Regular Expression, Rollover and
Frames
Output

Script Explanation : In above JavaScript, Special Character Meaning


(1) We have accepted input string using prompt pop
. Any character except newline
up box. Whatever input string is entered by the
user is stored in variable input_str. A The character a

(2) This string is then passed to the function TestString ab The string ab
function. This section is written in the <head> a|b a or b
section.
a* 0 or more a's
(3) In this function the regular expression is written as
\ Escapes a special character
re=/[az]/;
[ab-d] One character of: a, b, c, d
The regular expression begins and ends with slash /.
(4) a pair of square brackets [ ] appears following the [^ab-d] One character except: a, b, c, d

first slash. This tells the browser to search the text [\b] Backspace character
for characters that appear within the brackets. In this \d One digit
expression, two characters are within the square
\D One non-digit
brackets : ‘a’ and ‘z’ , which tells the browser to
determine whether the text includes a or z, or both. \s One whitespace
That's what is the regular expression! \S One non-whitespace
(5) This regular expression is assigned to the variable
\w One word character
re.
\W One non-word character
(6) Using test() method we can search for desired
characters from the input string input_str. * 0 or more

+ 1 or more
5.1.1 Language of Regular Expression
The words of regular expression are called special ? 0 or 1

characters. Various special characters that can be used {2} Exactly 2


in Regular expression along with their meanings are {2, 5} Between 2 and 5
written in the following table :
{2,} 2 or more
Client Side Scripting Language 5-3 Regular Expression, Rollover and
Frames
(…) Group of pattern Ex. 5.1.2 : Write a Java program that checks whether
the string entered by the user contains digits or not.
^ Start of string
Sol. :
$ End of string <!DOCTYPE html>
<html>
\b Word boundary
<head>
\n Newline <script type="text/javascript">
function TestString(str)
\r Carriage return
{
\t Tab re=/[^[0-9]]/; // [0-9] indicates any digit
if(re.test(str))
\0 Null character {
alert("The string does not contain
Methods that use regular expressions any digit");
Method Description }
else
exec A RegExp method that executes a search for {
a match in a string. It returns an array of alert("String contains some digit(s)");
}
information or null on a mismatch.
}
test A RegExp method that tests for a match in a </script>
string. It returns true or false. </head>
<body>
match A String method that executes a search for a <h2>Example of Regular Expression</h2>
match in a string. It returns an array of <script type="text/javascript">
information or null on a mismatch. var input_str=prompt("Enter some input","");
TestString(input_str);
matchAll A String method that returns an iterator </script>
containing all of the matches, including </body>
capturing groups. </html>
Output
search A String method that tests for a match in a
string. It returns the index of the match, or
–1 if the search fails.

replace A String method that executes a search for a


match in a string, and replaces the matched
substring with a replacement substring.

split A String method that uses a regular


expression or a fixed string to break a string
into an array of substrings.

5.1.2 Finding Non Matching Characters


We can find the non matching characters from the given
text by placing ^ as the first character within a square [
]. Click OK button and you will get -
Client Side Scripting Language 5-4 Regular Expression, Rollover and
Frames tells the browser to
 The \W special symbol
determine whether the text contains other than a
letter, number, or an underscore.
 Using \W is equivalent to using [a-zA-Z0-9_]. The
last _ indicates space character.

5.1.6 Matching Words


 Any word in the text is defined as set of characters. A
word is determined by a word boundary that is the
space between two words.
 The boundary can be defined by using special
symbol \b
 For example – From the string ‘Boycott’ we can get a

5.1.3 Entering a Range of Characters match for ‘cot’ by using regular expression

For matching any digit we need not have to enter every /\bcot\b/

digit right from 0 to 9. Similarly for matching letters we 5.1.7 Replacing a Text using Regular Expressions
need not have to test with every single

alphabet. We can achieve this by entering range of Using replace function we can replace the desired
characters. pattern. The first parameter in the replace function is
For example – to match a digit we must have a regular the string which is to be replaced and the second
expression as [0-9]. Thus placing the range within a parameter is the replacing string.
square bracket helps us to evaluate a complete range of For example- Consider following JavaScript in which
set of characters. the word ‘country’ is replaced by ‘India’
<!DOCTYPE html>
Suppose we enter [j-s] then that means match the
<html>
characters j, k, l, m, n, o, p, q, r and s. <head>
<script type="text/javascript">
5.1.4 Matching Digits and Non Digits
function TestString(str)
Determining whether the string contains digits or non {
digits is a common task in any search pattern. For new_str=str.replace("country","India");
document.write(new_str);
instance – in the application of validating telephone
}
number this is the most wanted task. </script>
This can be simplified by JavaScript by writing the </head>
regular expression. <body>
<script type="text/javascript">
If we write \d then that means search the text for str="I love my country";
digits and if we write \D then that means search the document.write(str);
text for non-digits. </script>

5.1.5 Matching Punctuations and Symbols <form name="form1">


 The \w special symbol tells the browser to <input type="button" value="Replace"
onclick="TestString(str)">
determine whether the text contains a letter,
</form>
number, or an underscore. </body>
</html>
Client Side Scripting Language 5-5 Regular Expression, Rollover and
Frames
Output

5.1.8 Returning a Matched Character


The exec() method searches string for text that matches with the regular expression. If it finds a match , it
returns an array of results, otherwise it returns null.
If we want to search for particular pattern from a text then exec() method can be used as follows –
pattern.exec(text)
This function returns an array of matched result.

Example Program
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function TestString(str1,str2)
{
re=/India/g;
result1=re.exec(str1);
result2=re.exec(str2);
if(result1)
document.write("<br/>The First text contains the word "+result1);
else
document.write("<br/>The First text does not contain the word 'India' ");

if(result2)
document.write("<br/>The Second text contains the word "+result2);
else
document.write("<br/>The Second text does not contain the word 'India' ");
}
</script>
</head>
<body>
<script type="text/javascript">
str1="I love my country";
str2="India has rich heritage and culture";
document.write(str1);
Client Side Scripting Language 5-6 Regular Expression, Rollover and
Frames
document.write("<br/>"+str2);
</script>
<form name="form1">
<input type="button" value="Check for Match" onclick="TestString(str1,str2)">
</form>
</body>
</html>
Output

5.1.9 Regular Expression Object Properties


There are various regular expression object properties that help in matching particular word, character, last
character, index at which to start the next match and so on. These properties are enlisted in the following
table –

Regular Expression Object Properties


$1 (through $9) Parenthesized substring matches
$_ Same an input

$* Same as multiline
$& Same as lastMatch
$+ Same as lastParen
$` Same as leftContent
$' Same as rightContext
global Search globally (g modifier in use)
ignoreCase Search case-insensitive (i modifier in use)
input The string to search if no string is passed
lastIndex The index at which to start the next match
lastMatch The last match characters
lastParen The last parenthesized substring match
leftContext The substring to the left of the most recent match
multiline Whether strings are searched across multiple lines
prototype Allows the addition of properties to all objects
rightContext The substring to the right of the most recent match
source The regular expression pattern itself
Client Side Scripting Language 5-7 Regular Expression, Rollover and
Frames
Example Program
<!DOCTYPE html>
<html>
<head>
<title>Pattern Matching using Regular Expression </title>
<script type="text/javascript">
function TestString(str)
{
// for each Sunil - replace it with Mr. and then Sunil
alert(str.replace(/Sunil/g, 'Mr.$&'));
}
</script>
</head>
<body>
<script type="text/javascript">
str= "Sunil kumar, Sunil Shetty,Sunil Kale";
document.write(str);
</script>
<button onclick="TestString(str)">Change</button>
</body>
</html>
Output

Ex. 5.1.3 : Develop and demonstrate, using Javascript document that collects USN(the valid format is: A digit
from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper case characters
followed by three digits:no embedded spaces allowed) of the user.Event handler must be included for the form
element that collects this information to validate the input. Message in the alert windows must be produced when
errors are detected.
Client Side Scripting Language 5-8 Regular Expression, Rollover and
Frames
Sol. :
<!DOCTYPE html>
<html>
<head>
<title>Pattern Matching using Regular Expression </title>
<script type="text/javascript">
function TestString(str)
{
document.write("The given string is: ");
document.write("<em>"+str+"</em>"+"<br/>");
var i=str.match(/[1234][A-Z]{2}\d{2}[A-Z]{2}\d{3}/);
if(i==null)
return false;
else
return true;
}
</script>
</head>
<body>
<h3>
<script type="text/javascript">
var input_str=prompt("Enter Your University Seat number here","");
if(TestString(input_str))
document.write("valid Seat Number");
else
document.write("Invalid Seat Number");
</script>
</h3>
</body>
</html>
Output
Client Side Scripting Language 5-9 Regular Expression, Rollover and
Frames
5.2 Frames Using frameset we can divide the rows and columns in
 HTML frames allow us to present documents in
any number of frames. For example
<frameset rows = “20%,30%,50%” cols = “30%,*”>
multiple views.
This will create a frames in the browser’s window as
 Using multiple views we can keep certain
follows -
information visible and at the same time other
views are scrolled or replaced.
 For example, within the same window, one frame
can display a company information, a second frame
can be a navigation menu and a third frame may
display selected document that can be scrolled
through or replaced by navigating in the second
frame.
Fig. 5.2.2 Frames
 Various frames can be set in one browser window .
 In every layout frame we can load the desired html
page by using frame src. For example :
<frame src="D:\\html_examples\\bulleted1.html"
name="Left_Vertical">
By this statement, we are loading the web page
bulleted1.html in the specific frame and the frame is
named as Left_Vertical.

Attributes in frameset tag

Attribute Value Purpose


Fig. 5.2.1 Frames
cols pixels It specifies the number and
5.2.1 Create a Frame
% size of columns in a frameset
 To set the frames in the browser window we use
frame set. For example : *
<frameset cols="150,*"> rows pixels It specifies the number and
will allow us to divide the window into two columns (i.e. % size of rows in a frameset.
in two vertical frames). One frame occupying the size of
*
150 pixels and the other occupies the remaining portion
of the window. Here * means any number of pixels. Attributes of frame tag
Similarly The <frame> tag has no end tag. The <frame> tag
<frameset rows="*,120"> defines one frame within a <frameset> tag. Various
will divide the window into two rows (i.e. in two attributes of frame tag are
horizontal frames). The second part of horizontal Attribute Value Purpose
frame will be of 120 pixels and upper horizontal frame frameborder 0 or 1 Value 1 specifies that the
will occupy remaining portion of the window. frame is displayed with
border and 0 indicates that
Similarly we can also specify the frameset in percentage
there is no border.
form. For example
<frameset rows="30%,70%"> name Some It specifies name of the frame
name
Client Side Scripting Language 5 - 10 Regular Expression, Rollover and
Frames
Nosize Due to this attribute, we Output
cannot resize the particular
frame.
scolling yes, no or It specifies whether or not to
auto display the scrollbar along
with the frame.
src URL It specifies the name of the
Document to be displayed
within the frame.

Example of Browser containing frame


Step 1 : Create a main HTML document which will
display three HTML documents in three vertical frames Script Explanation :

FrameSet.html
The above HTML document, the <frameset> tag is used
<!DOCTYPE html> to define frameset. The col attribute is used to create the
<html> three column frames.
<frameset cols="25%,*,50%">
<frame src="frame1.html"> 5.2.2 Invisible Borders of Frame
<frame src="frame2.html"> The borders of the frames can be made invisible by
<frame src="frame3.html">
setting the attributes “frameborder” and “border” = 0.
</frameset>
</html>
For example –
Step 2 : Create frame1.html, frame2.html and frame3.html <!DOCTYPE html>
files as follows – <html>
<frameset cols="30%,70%">
Frame1.html
<framesrc="frame1.html"frameborder="0" border="0"/>
<!DOCTYPE html>
<framesrc="frame2.html"frameborder="0" border="0"/>
<html> </frameset>
<body> </html>
<h1> Frame 1 </h1>
Output
</body>
</html>

Frame2.html
<!DOCTYPE html>
<html>
<body>
<h1> Frame 2 </h1>
</body>
</html>

Frame3.html
<!DOCTYPE html>
<html>
<body>
<h1> Frame 3 </h1>
</body>
</html>
Client Side Scripting Language 5 - 11 Regular Expression, Rollover and
Frames
5.2.3 Calling a Child Window
The main window defining the frames in it is called parent window and each frame contains the child
windows. For example –

We can call one child window from another child window. Following is a JavaScript in which we are
calling the function defined in another child window from one window.

Example Program
Step 1 : Create parent window script in which two frames are defined –
Test.html
<!DOCTYPE html>
<html>
<frameset cols="30%,70%">
<frame src="frame1.html" name="LeftPage"/>
<frame src="frame2.html" name="RightPage"/>
</frameset>
</html>
Step 2 : Write the frame1.html file as a LeftPage frame. The code for this is as follows –
frame1.html
<!DOCTYPE html>
<html>
<body>
<h1> Frame 1 </h1>
<form>
<input type="button" name="Frame1" value ="Click Me" onclick="parent.RightPage.MyFunction()"/>
</form>
</body>
</html>
Client Side Scripting Language 5 - 12 Regular Expression, Rollover and
5.2.4 Frames and Focus of Child
Changing the Content
Step 3 : The definition of MyFunction is present in the Window
second frame. Hence the code for this is - You can change the content of a child window from a
Frame2.html JavaScript function by modifying the source web page
<!DOCTYPE html> for the child window.
<html>
We can assign the new source to the child window’s
<head>
<title>Frame 2</title> href attribute.
<script language="Javascript" Example Program : In the following example we are
type="text/javascript"> displaying two frames – Frame1 on the left hand side
function MyFunction() and Frame to at the right hand side. When the user
{ clicks the button present in the frame1, the frame2 is
document.write("Some Function is Called... "); removed and is replaced by Frame3.
}
Step 1 : We will write the JavaScript for displaying two
</script>
frames on the parent window –
</head>
<body>
MainWindow.html
<h1> Frame 2 </h1>
<!DOCTYPE html>
</body>
<html>
</html>
<frameset cols="30%,70%">
Step 3 : Now we will execute the parent JavaScript i.e. <frame src="frame1.html" name="LeftPage"/>
test.html on web browser <frame src="frame2.html" name="RightPage"/>
</frameset>
</html>
Step 2 : The frame1 contains one button componenet. The
code for this is as follows –
Frame1.html
<!DOCTYPE html>
<html>
<head>
<script language="Javascript" type="text/javascript">
function MyFunction()
{
parent.RightPage.location.href='frame3.html'
}
Just click the Click Me button and you can see the </script>
changes in another child window – </head>
<body>
<h1> Frame 1 </h1>
<form>
<input type="button" name="Frame1"
value ="Click Me" onclick="MyFunction()"/>
</form>
</body>
</html>
Step 2 : The code for frame2 is as follows –
Frame2.html
<!DOCTYPE html>
<html>
<head>
Client Side Scripting Language 5 - 13 Regular Expression, Rollover and
Frames
5.2.5 Accessing Elements of Another Child Window
<title>Frame 2</title>
</head> It is possible to change the elements of one frame from
<body> another frame. For example – we can change the label
<h1> Frame 2 </h1>
of ‘button’ component of right frame from one the left
</body>

</html> frame. For that purpose we will add the code


Step 3 : The code for Frame3 is as follows – parent.RightPage.form2.Frame2.value=New_Label
Frame3.html Following Java program illustrates this
<!DOCTYPE html>
<html> Ex. 5.2.1 : Write JavaScript to change the label of
<body> button element present in frame2 from frame1.
<h1> Frame 3 </h1> Sol. :
<p> Note that the frame is changed from Frame2
to Frame3</p>
Step 1 : We will write the main JavaScript file which
</body> will load both the frames – Frame1 and Frame2
</html> MainWindow.html
Step 4 : Get the output on the Web browser by loading <!DOCTYPE html>
<html>
MainWindow.html. The output is as follows –
<frameset cols="30%,70%">
<frame src="frame1.html" name="LeftPage"/>
<frame src="frame2.html" name="RightPage"/>
</frameset>
</html>
Step 2 : The frame1 contains a single button. We expect
that on clicking this button the label of button element of
second frame should be changed.
Frame1.html
<!DOCTYPE html>
<html>
<head>
<script language="Javascript" type="text/javascript">
Just click the Click Me button and you will get the function MyFunction()
following output {

parent.RightPage.form2.Frame2.value="Calculate"
}
</script>
</head>
<body>
<h1> Frame 1 </h1>
<form name="form1">
<input type="button" name="Frame1"
value ="Click Me" onclick="MyFunction()"/>
</form>
</body>
</html>
Client Side Scripting Language 5 - 14 Regular Expression, Rollover and
5.3 Rollover Frames
Step 3 : The second frame contains a single button
Rollover means change in the appearance of the object
element.
Frame2.html
when user moves his or her mouse over an object on
<!DOCTYPE html> the page.
<html>

<head> The rollover effect is mainly used in web page


<title>Frame 2</title> designing for advertising purpose.
</head>
<body> 5.3.1 Creating Rollover
<h1> Frame 2 </h1>
On many web pages, javascript rollovers are handled
<form name="form2">
<input type="button" name="Frame2" by adding an onmouseover and onmouseout event on
value ="Click"/> images.
</form>
</body> (1) onmouseover is triggered when the mouse moves
</html> over an element
Step 4 : Open the web browser such as Mozilla FireFox (2) onmouseout is triggered when the mouse moves
or Chrome and load the MainWindow.html
away from the element
This is an example of how it works.
RolloverDemo.html
<!DOCTYPE html>
<html>
<head>
<title>Creating Rollover</title>
</head>
<body>
<a>
<img src="mickey1.jpg"
onmouseover="src=' mickey2.jpg'"

Just click the Click Me button and see the change in onmouseout="src=' mickey1.jpg'">
</a>
second frame
</body>
</html>
Client Side Scripting Language 5 - 15 Regular Expression, Rollover and
Frames
Output

<a onmouseover="document.fruit.src='
5.3.2 Text Rollover MangoImg.jpg'">
 Text rollover is a technique in which whenever user <b><u>Mango</u></b>
rollover the text , JavaScript allows to change the </a>
<br/><br/><br/><br/>
page element usually some graphics image.
<a onmouseover="document.fruit.src
 Carefully placed rollovers can enhance a visitor's ='OrangeImg.jpg'">
experience when browsing the web page. <b><u>Orange</u></b>
</a>
 Following example illustrates this idea
<br/><br/><br/><br/>
Ex. 5.3.1 : Write a JavaScript in which when user rolls <a onmouseover="document.fruit.src
over the name of fruit, the corresponding image should ='banana.jpg'">
be displayed. For instance – if user rolls over the text <b><u>Banana</u></b>
</a>
“Mango”; the image of Mango should be displayed.
</td>
JavaScript Document </tr>
</table>
<!DOCTYPE html>
</body>
<html>
</html>
<head>
<title>Rollover Text</title>
</head>
<body>
<table>
<tr>
<td>
<a>
<IMG src="MangoImg.jpg"
name="fruit">

</a>
</td><td>
Client Side Scripting Language 5 - 16 Regular Expression, Rollover and
Frames
Output

Clearly, the above output illustrates that when user rolls over the text Mango , the image of mango will
be displayed, if user rolls over the text Orange, the image of orange will be displayed and if user rolls
over the text Banana, the image of banana will be displayed.
Client Side Scripting Language 5 - 17 Regular Expression, Rollover and
Frames
5.3.3 Multiple Actions for Rollover
 Suppose user is rolling the cursor over the text, then instead of simply changing the image we can
display more window displaying some features or additional information about the item on which the
mouse is rolling over. This process is referred as multiple actions for rollover.
 Due to this effect visitor gets more information at a glance.
 We can open additional window using the built in function Open(). This function is invoked using
the object Window.
 The open() method opens a new browser window, or a new tab. The close() window closes the
window.
 The window. open() function can be written as follows

This function returns the object or instance of a window. We store this instance in a variable named
MyWindow.
 Then using MyWindow.document.write() function we can write the information to this opened
window. Thus it is possible to write additional information by opening and writing the contents to
additional window.
 Following example illustrates this idea.
Ex. 5.3.2 : Write a JavaScript in which when user rolls over the name of fruit, the corresponding image should be
displayed. Along with the appropriate image display, additional window should pop up displaying the benefit of
each fruit.
Sol. :
<!DOCTYPE html>
<html>
<head>
<title>Rollover Text</title>
<script language="Javascript">
function MyFunction(choice)
{
if(choice==1)
{
document.fruit.src='MangoImg.jpg'
MyWindow=window.open('','infoWindow',
'height="20",width="20",left="30",top="30"')
MyWindow.document.write(
'Great source of Vitamin A and Vitamin C supplement')
}
if(choice==2)
{
document.fruit.src='OrangeImg.jpg'
Client Side Scripting Language 5 - 18 Regular Expression, Rollover and
Frames
MyWindow=window.open('','infoWindow',
'height="20",width="20",left="30",top="40"');
MyWindow.document.write(
'Great source of Vitamin C supplement and rich antioxidant')
}
if(choice==3)
{
document.fruit.src='banana.jpg'
MyWindow=window.open('','infoWindow',
'height="20",width="20",left="30",top="50"');
MyWindow.document.write(
'Full of Potassium and Fiber')
}
}
</script>

</head>
<body>
<table>
<tr>
<td>
<a>
<IMG src="MangoImg.jpg" name="fruit">
</a>
</td>
<td>
<a onmouseover="MyFunction(1)"
onmouseout="MyWindow.close();">
<b><u>Mango</u></b>
</a>
<br/><br/><br/><br/>
<a onmouseover="MyFunction(2)"
onmouseout="MyWindow.close();">
<b><u>Orange</u></b>
</a>
<br/><br/><br/><br/>
<a onmouseover="MyFunction(3)"
onmouseout="MyWindow.close();">
<b><u>Banana</u></b>
</a>
</td>
</tr>
</table>
</body>
</html>
Client Side Scripting Language 5 - 19 Regular Expression, Rollover and
Frames

5.3.4 More Efficient Rollover


For efficient use of rollover, the images can be stored in an array and required images are displayed when
the web page is loaded.
This makes the rollover action efficient because – the images are already collected and loaded in the
array. The required image is displayed when user rollover particular text.
Ex. 5.3.3 : Write a JavaScript in which when user rolls over the name of fruit, the corresponding image should be
displayed. For instance – if user rolls over the text “Mango”; the image of Mango should be displayed. Make use of
array for storing the image files.
Sol. :
JavaScript Document
<!DOCTYPE html>
<html>
<head>
<title>Rollover Text</title>
<script language="Javascript">
Rollimage = new Array() //creating array of three images
Rollimage[0]=new Image(100,100)
Rollimage[0].src='MangoImg.jpg' //assigning each image at each index of array

Rollimage[1]=new Image(100,100)
Rollimage[1].src='OrangeImg.jpg'

Rollimage[2]=new Image(100,100)
Rollimage[2].src='banana.jpg'

</script>
</head>
Client Side Scripting Language 5 - 20 Regular Expression, Rollover and
Frames
<body>
<table>
<tr>
<td>
<a>
<IMG src='MangoImg.jpg' name="fruit">
</a>
</td>
<td>

<a onmouseover="document.fruit.src=Rollimage[0].src">
<b><u>Mango</u></b>
</a>
<br/><br/><br/><br/>
<a onmouseover="document.fruit.src=Rollimage[1].src">
<b><u>Orange</u></b>
</a>
<br/><br/><br/><br/>
<a onmouseover="document.fruit.src=Rollimage[2].src">
<b><u>Banana</u></b>
</a>
</td>
</tr>
</table>
</body>
</html>
Output
It is same as in example 5.3.1.

You might also like