Scribd
Upload
19 views

Chapter 5 Regular Expression Frames Rollovers

Css using Javascript

Uploaded by

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

Chapter 5 Regular Expression Frames Rollovers

Css using Javascript

Uploaded by

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

CHAPTER 5

REGULAR EXPRESSIONS ,
ROLLOVER AND FRAMES
Subject – Client Side Scripting Language(CSS-22519)
Class :IF5I
Mrs. Alinka Sachin Shinde
Government Polytechnic Solapur
Information Technology Department
INTRODUCTION
• A JavaScript validates information on the form before the form is processed by the CGI
application running on the web server.
• JavaScript validate and format text by using regular expressions.
• An expression uses operators to tell the browser how to manipulate values, such as
adding two numbers (10 + 5). This is called a mathematical expression because the
values being manipulated are numbers.
• A regular expression is very similar to a mathematical expression, except a regular
expression tells the browser how to manipulate text rather than numbers by using
special symbols as operators.
• Regular expressions are used to perform pattern-matching and "search-and-
replace" functions on text.
• A regular expression is a sequence of characters that forms a search pattern. The
search pattern can be used for text search and text to replace operations
Creating A Regular Expression
➢ To create a regular expression in JavaScript, you enclose its pattern in forward-slash (/)
characters like this:
➢ Syntax:
/pattern/modifiers;
pattern is a pattern (to be used in a search).
modifiers are used to perform case-insensitive and global searches:
g Perform a global match (find all matches rather than stopping after the first match)

i Perform case-insensitive matching


m Perform multiline matching

➢ Example:
var patt=/Morning/i;
where /Morning/i is regular expression
Morning is pattern (to be used in a search).
i is a modifier (modifies the search to be Case-Insensitive).
Develop a simple JavaScript of how to create and use a regular expression that tells the
browser to determine whether the string ‘Morning’ is in the input string “Good
morning!!” and display an appropriate message in an alert dialog box when a button is
clicked on the form.
<html>
<body>
<script>
function myFunction()
{
var str = "Good Morning!";
var patt = /Morning/i;
if(patt.test(str))
{
alert('Found’)
}
else
{
alert('Not Found’)
}
}
myFunction();
</script>
</body>
</html>
The Language Of A Regular Expression
• Regular expression language are called special characters that are used to create a
regular expression.
• ^ : - Beginning of a string or negation operator, depending on where it appears in the
regular expression
Example : If you want to match strings that start with hi, use the ^ operator:
var str=“hi welcome”;
var patt=/^hi/;
patt.test(str) //it returns true
• $ : - End of a string
Example: If you want to match strings that end with hi, use the $ operator:
var str=“Radha hi”;
var patt=/hi$/;
patt.test(str) //it returns true
• Match items in ranges: A character that matches any character in this range of characters;
the hyphen indicates a range
[a-z] //a, b, c, ... , x, y, z
[A-Z] //A, B, C, ... , X, Y, Z
[a-c] //a, b, c
[0-9] //0, 1, 2, 3, ... , 8, 9

Examples:
var patt=/[a-z]/
patt.test('a’) //✅
patt.test('1’) //❌
patt.test('A’) //❌

var patt1=/[a-c]/
patt1.test('d’) //❌
patt1.test('dc’) //✅

var patt3=/[A-Za-z0-9]
patt3.test(‘Alinka12’); //✅
You can check if a string contains one an only one character in a range, by starting the regex
with ^ and ending with the $ char:
Example :
var patt=/^[A-Z]$/
patt.test('A’) //✅
patt.test('AB’) //❌
patt.test('Ab’) //❌
var patt1= /^[A-Za-z0-9]$/.
patt1.test('1’) //✅
patt1.test('A1’) //❌

Negating a pattern
The ^ character at the beginning of a pattern anchors it to the beginning of a string.
Used inside a range, it negates it, so:
Example :
var patt=/[^A-Za-z0-9]/
patt.test('a’) //❌
patt.test('1’) //❌
patt.test('A’) //❌
patt.test('@’) //✅
Special Description
Character
\d matches any digit, equivalent to [0-9]
\D matches any character that’s not a digit, equivalent to [^0-9]
\w matches any alphanumeric character (plus underscore), equivalent to [A-Za-z_0-9]
\W matches any non-alphanumeric character, anything except [^A-Za-z_0-9]
• If you want to search one string or another, use the | operator.
var patt=/hi|Hello/
patt.test(‘hi') //✅
patt.test(‘Hello') //✅
• Say you have this regex, that checks if a string has one digit in it, and nothing else:

/^\d$/

• You can use the ? quantifier to make it optional, thus requiring zero or one .
/^\d?$/
• but what if you want to match multiple digits?

You can do it in 4 ways, using +, *, {n} and {n,m}


/^\d+$/.test('12') //✅
+ :- Match one or more (>=1) items /^\d+$/.test('14') //✅
/^\d+$/.test('144343') //✅
/^\d+$/
/^\d+$/.test('') //❌
/^\d+$/.test('1a') //❌
• : - Match 0 or more (>= 0) items /^\d*$/.test('12') //✅
/^\d*$/ /^\d*$/.test('14') //✅
/^\d*$/.test('144343') //✅
/^\d*$/.test('') //✅
/^\d*$/.test('1a') //❌
• {n} :- Match exactly n items

/^\d{3}$/ /^\d{3}$/.test('123') //✅


/^\d{3}$/.test('12') //❌
/^\d{3}$/.test('1234') //❌
/^[A-Za-z0-9]{3}$/.test('Abc') //✅
• {n,m} :- Match between n and m times:

/^\d{3,5}$/
/^\d{3,5}$/.test('123') //✅
/^\d{3,5}$/.test('1234') //✅
/^\d{3,5}$/.test('12345') //✅
/^\d{3,5}$/.test('123456') //❌
➢ m can be omitted to have an open ending to have at least n items:
/^\d{3,}$/ /^\d{3,}$/.test('12') //❌
/^\d{3,}$/.test('123') //✅
➢ These characters are special: /^\d{3,}$/.test('12345') //✅
\,/,[ ],( ),{ },?,+,*,|,.,^,$ /^\d{3,}$/.test('123456789') //✅
They are special because they are control characters that have a meaning in the regular
expression pattern, so if you want to use them inside the pattern as matching characters, you
need to escape them, by prepending a backslash:

➢ \b and \B checks whether a string is at the beginning or at the end of a word:


✓ \b matches a set of characters at the beginning or end of a word
✓ \B matches a set of characters not at the beginning or end of a word

➢ \s matches any whitespace character: spaces, tabs, newlines and Unicode spaces
➢ \S matches any character that’s not a whitespace

➢ \n matches a newline character


➢ \t matches a tab character
➢ . matches any character that is not a newline char
➢ Using parentheses, you can create groups of characters: (...)
This example matches exactly 3 digits followed by one or more alphanumeric characters:

/^(\d{3})(\w+)$/

/^(\d{3})(\w+)$/.test('123') //❌
/^(\d{3})(\w+)$/.test('123s') //✅
/^(\d{3})(\w+)$/.test('123something') //✅
/^(\d{3})(\w+)$/.test('1234') //✅
Javascript's Built-in Methods For Performing
Pattern-matching

Search for a match in a string. It returns an array of information or null on


exec()
mismatch.
test() Test whether a string matches a pattern. It returns true or false.
Search for a match within a string. It returns the index of the first match,
search()
or -1 if not found.
Search for a match in a string, and replaces the matched substring with a
replace()
replacement string.
Search for a match in a string. It returns an array of information or null on
match()
mismatch.
split() Splits up a string into an array of substrings using a regular expression.
Validate A Phone Number Of 10 Digits.
<html>
<head>
<title>JavaScript Phone Number Validation(XXXXXXXXXX)</title>
<script>
function phonenumber()
{
var phoneno = /^\d{10}$/;
var val=document.getElementById("mbno").value;
if(val=="")
{
document.getElementById("msg").innerHTML="Please fill Mobile Number";
return false;
}
if(phoneno.test(val))
{
document.getElementById("msg").innerHTML="ok";
return false;
}
else
{
document.getElementById("msg").innerHTML="Enter 10 digits only!!1";
return false;
}}
</script>
</head>
<body>
<h2>10 Digit Mobile Number Validation</h2>
<form onsubmit="return phonenumber()">
Mobile Number : <input type="text" id="mbno" value="">
<span id="msg" style="color:red"></span></br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Validate A PAN Number (Example:- AAAAA1234F)
<html>
<head>
<title>JavaScript PAN Number Validation(ABCDF1234G)</title>
<script>
function panvalidate()
{
var pan = /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/;
var val=document.getElementById("panno").value;
if(val=="")
{
document.getElementById("msg1").innerHTML="* Required";
return false;
}
if(pan.test(val))
{
document.getElementById("msg1").innerHTML="Valid PAN Number";
return false;
}
else
{
document.getElementById("msg1").innerHTML="Invalid PAN number!!";
return false;
} }</script></head>
<body>
<h2>PAN Number Validation</h2>
<form onsubmit="return panvalidate()">
PAN Number : <input type="text" id="panno" value="">
<span id="msg1" style="color:red"></span></br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Write A webpage that accepts username and adharcard as input texts. When the user
enters adhaar card number ,the javascript validates card number and diplays whether
card number is valid or not. (Assume valid adhaar card format to be nnnn.nnnn.nnnn
or nnnn-nnnn-nnnn).

1111.2222.3333 or 1111-2222-3333
/^\d{4}[.-]\d{4}[.-]\d{4}$/;
<html>
<head>
<title>JavaScript Adhar Card Validation(1111.2222.3333 or 1111-2222-3333)</title>
<script>
function adharvalidate()
{
var adhar = /^\d{4}[.-]\d{4}[.-]\d{4}$/;
var val=document.getElementById("adno").value;
if(adhar.test(val))
{
document.getElementById("msg1").innerHTML="Valid Adhar Card Number";
return false;
}
else
{
document.getElementById("msg1").innerHTML="Invalid Adhar Card number!!";
return false;
}
}
</script>
</head>
<body>
<h2>Adhar Card Number Validation</h2>
<form onsubmit="return adharvalidate()">
Enter UserName : <input type="text" id="text1" value="">
Adhar Card Number : <input type="text" id="adno" value="">
<span id="msg1" style="color:red"></span></br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Regular expression for validating the Adhar
Number in following format only :

(nnn)-nnnn-nnnn OR nnn.nnnn.nnnn
/^[\(]?\d{3}[\)]?[.-]\d{4}[.-]\d{4}$/;
<html>
<head>
<title>Regular expression for validating the phone number in following format
only :(nnn)-nnnn-nnnn OR nnn.nnnn.nnnn</title>
<script>
Function adharvalidate()
{
var ad = /^[\(]?\d{3}[\)]?[.-]\d{4}[.-]\d{4}$/;
var val=document.getElementById(“adno").value;
if(ad.test(val))
{
document.getElementById("msg").innerHTML="Valid Phone Number";
return false;
}
else
{
document.getElementById("msg").innerHTML="Invalid Phone number!!";
return false;
}

}
</script>
</head>
<body>
<h2>Phone Number Validation</h2>
<form onsubmit="return adharvalidate()">
Enter Phone Number : <input type="text" id=“adno" value="">
<span id="msg" style="color:red"></span></br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Regular expression for validating the phone number in following format only :

2125551212
(212)555-1212
212-555-1212
212.555.1212
(201)555-1212
212555-1212
/^[\(]?\d{3}[\)]?[-.]?\d{3}[-.]?\d{4}$/;
<html>
<head>
<title>Regular expression for validating the phone number
</title>
<script>
function phonevalidate()
{
var phoneval = /^[\(]?\d{3}[\)]?[-.]?\d{3}[-.]?\d{4}$/;
var val=document.getElementById("pno").value;
if(phoneval.test(val))
{
document.getElementById("msg").innerHTML="Valid Phone Number";
return false;
}
else
{
document.getElementById("msg").innerHTML="Invalid Phone number!!";
return false;
}

}
</script>
</head>
<body>
<h2>Regular expression for validating the phone number in following format
only : 2125551212
(212)555-1212
212-555-1212
212.555.1212
(201)555-1212
212555-1212</h2>
<form onsubmit="return phonevalidate()">
Enter Phone Number : <input type="text" id="pno" value="">
<span id="msg" style="color:red"></span></br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Javascript email validation
/^[A-Za-z0-9_.]+@[A-Za-z]+\.[A-Za-z.]{2,6}$/;

Shinde.Alinka @gmail.com
[email protected]
<html>
<head>
<title>JavaScript Email Validation</title>
<script>
function emailvalidate()
{
var email = /^[A-Za-z0-9_.]+@[A-Za-z]+\.[A-Za-z.]{2,6}$/;
var val=document.getElementById("emailid").value;
if(email.test(val))
{
document.getElementById("msg").innerHTML="Valid Email Id";
return false;
}
else
{
document.getElementById("msg").innerHTML="Invalid Email Id!!";
return false;
}
}
</script>
</head>
<body>
<h2>Email Validation</h2>
<form onsubmit="return emailvalidate()">
Enter Email Id : <input type="text" id="emailid" value="">
<span id="msg" style="color:red"></span></br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScript replace() method
✓ replace() method is used to replace a substring in a string with a new one..
✓ The following shows the syntax of the replace() method:

var newStr = str.replace(substr, newSubstr);


✓ The JavaScript String replace() method returns a new string with a substring (substr)
replaced by a new one (newSubstr).
✓ Note that the replace() method doesn’t change the original string. It returns a new
string.
• The following example uses the replace() to replace the JS in the string 'JS will, JS will rock
you' wit the new substring JavaScript:

var str = 'JS will, JS will rock you!’;


var newStr = str.replace('JS','JavaScript’);
document.write(newStr);
• Output:

JavaScript will, JS will rock you!


• To replace all occurrences of a substring in a string with a new one, you must use a regular
expression.

var str = 'JS will, Js will rock you!’;


var newStr = str.replace(/JS/gi,'JavaScript’);
document.write(newStr);
Output:

JavaScript will, JavaScript will rock you!


replace() example
<script language="JavaScript">
var str = "Welcome to abc Programming Language. abc
Programming language is client side scripting language.";
function replaceWithRegex()
{
var rep = str.replace(/abc/gi, "JavaScript");
alert(rep);
}
</script>
// 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
exec( ) method
• The exec() method searches string for text that matches regular expression. If it finds a match,
it returns an array of results; otherwise, it returns null.
<script type = "text/javascript">
var str = "Javascript is an interesting scripting language";
var re = /script/g;
var result = re.exec(str);
document.write("Test 1 - returned value : " + result);
re = /pushing/g;
var result = re.exec(str);
document.write("<br />Test 2 - returned value : " + result);
</script>
<!DOCTYPE html>
<script>
var str = 'More about JavaScript at https://javascript.info';
var reg = /javascript/ig;
var result;
while (result = reg.exec(str)) {
document.write( 'Found '+result+' at position '+result.index+'<br>');
}
</script>
• we want to find all the occurrences of vowels in the string and also the position
of the match, we can do it as below:
<!DOCTYPE html>
<script>
var text = "This is a simple text";
var pattern = /[aeiou]/ig;
document.write('<b>The Given String is : This is a simple text</b><br>');
while(result = pattern.exec(text)) {
document.write('Found '+result+ " " + result.index + "<br>");
}
</script>
• we want to check how many times the word “happy” is present in the string we
can do that as shown below

<!DOCTYPE html>
<script>
var str = "I felt happy because I saw the others were happy and because I knew
I should feel happy, but I wasn’t really happy.";
var pattern = /happy/g;
var count = 0;
document.write('<b>The Given String is : I felt happy because I saw the others
were happy and because I knew I should feel happy, but I wasn’t really
happy.</b><br>');
while(result = pattern.exec(str)) {
count=count+1;
}
document.write('Total Occurrences: '+count);
</script>
search( ) method
✓ The JavaScript search() method is used to search the regular expression in the given string.
This method returns -1, if match is not found.
✓ The search() method is represented by the following syntax:

string.search(regexp)
Where,
regexp - It represents the regular expression which is to be searched.
✓ The position of searched character.

<html>
<body>
<script>
var str="JavaScript is a scripting language. Scripting languages are often interpreted";
document.writeln(str.search(/Scripting/));
</script>
</body>
</html>

Output : 36
<html>
<body>
<script>
var str="JavaScript is a Client Side scripting language.";
document.writeln(str.search(/Javatpoint/i));
</script>
</body>
</html>

Output : -1
JavaScript And Frames
• HTML frames are used to divide your 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 a frameset.
• The window is divided into frames in a similar way the tables are organized: into rows
and columns.
• Frames are created using HTML, but you can interact and manipulate frames using a
JavaScript.
✓ All frames contain at least three web pages. The first frame surrounds the other frames, and
this entire collection is called the frameset. The other frames are within the frameset, and
each is referred to as a child.
✓ JavaScript refers to the frameset as the top or the parent. The parent frame is always at the
top of the display. Child windows appear within the parent window.
✓ Creating Frames
✓ To use frames on a page we use <frameset> 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
<frameset rows="50%,50%">
<frame src=“reg1.html" name="topPage" />
<frame src=“reg2.html" name="bottomPage" />
</frameset>
<html>
<frameset cols="*,*,*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>
<html>
<frameset rows="*,*,*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>
<frameset cols="*,*,*">
<frameset rows="*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
</frameset>
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
<frameset cols="*,*,*">
<frame src="frame_1.html">
<frameset rows="*,*">
<frame src="frame_2.html">
<frame src="frame_3.html">
</frameset>
<frame src="frame_4.html">
</frameset>
<frameset cols="*,*">
<frame src="frame_1.html">
<frameset rows="*,*">
<frame src="frame_2.html">
<frameset cols="*,*">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</frameset>
</frameset>
<frameset rows="*,*" cols="*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
Invisible Borders
✓ The border can be hidden by setting the frameborder and border attributes of the
<frame> tag to zero (0).
✓ Example:
<frame src="WebPage1.html" name="topPage“ frameborder="0" border="0" />

With frame border Without frame border


Write a script for creating following frame structure :

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 “FRAME3”.
myframe.html

<html>
<head>
<title>Create a Frame</title>
</head>
<frameset rows="25%,75%" >
<frame src="frame1.html" name="frame1" noresize="" />
<frameset cols="*,*" >
<frame src="frame2.html" name="frame2" noresize="" />
<frame src="frame3.html" name="frame3" noresize="" />
</frameset>
</frameset>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<h1><center>FRAME 1</center></h1> <h1><center>FRAME 3</center></h1>
</body> </body>
</html> </html>

<!DOCTYPE html>
<html>
<style>
a
{
text-decoration: none;
}
</style>
<body>
<h1><center>FRAME 2</center></h1>
<ul>
<li><h2><a href="fruits.html" target="frame3" >FRUITS</a></h2></li>
<li><h2><a href="flowers.html" target="frame3" >FLOWERS</a></h2></li>
<li><h2><a href="cities.html" target="frame3" >CITIES</a></h2></li>
</ul>
</body> </html>
flowers.html
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:pink">
<center>
<h1>Flowers</h1>
<table border=1>
<tr>
<td><img src="rose.jpg" alt=" " width="200" height="200"></td>
<td><img src="rose1.jpg" alt=" " width="200" height="200"></td>
</tr>
<tr>
<td><img src="rose2.jpg" alt=" " width="200" height="200"></td>
<td><img src="rose3.jpg" alt=" " width="200" height="200"></td>
</tr>
</table>
</center>
</body>
</html>
fruits.html
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:pink">
<center>
<h1>Fruits</h1>
<table border=1>
<tr>
<td><img src=“apple.jpg" alt=" " width="200" height="200"></td>
<td><img src=“kivi.jpg" alt=" " width="200" height="200"></td>
</tr>
<tr>
<td><img src=“mango.jpg" alt=" " width="200" height="200"></td>
<td><img src=“grapes.jpg" alt=" " width="200" height="200"></td>
</tr>
</table>
</center>
</body>
</html>
cities.html
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:pink">
<center>
<h1>Cities</h1>
<table border=1>
<tr>
<td><img src=“city1.jpg" alt=" " width="200" height="200"></td>
<td><img src=“ccity2.jpg" alt=" " width="200" height="200"></td>
</tr>
<tr>
<td><img src=“city3.jpg" alt=" " width="200" height="200"></td>
<td><img src=“city4.jpg" alt=" " width="200" height="200"></td>
</tr>
</table>
</center>
</body>
</html>
Calling A Child Window's Javascript Function
We'll begin with the simple task of calling a JavaScript function that is defined in another
child window.

myframe1.html

<html >
<head>
<title>Create a Frame</title>
</head>
<frameset rows="50%,50%">
<frame src="WebPage1.html" name="topPage" />
<frame src="WebPage2.html" name="bottomPage" />
</frameset>
</html>
WebPage1.html
<!DOCTYPE html>
<html >
<head>
<title>Web Page 1</title>
<script language="Javascript" type="text/javascript">
function ChangeContent() {
alert("Function Called From TopPage")
}
</script>
</head>
<body>
<FORM action="" method="">
<P>
<INPUT name="WebPage1" value="Web Page 1" type="button" />
</P>
</FORM>
</body>
</html>
WebPage2.html

<!DOCTYPE html>
<html >
<head>
<title>Web Page 2</title>
</head>
<body>
<FORM action="" method="">
<P>
<INPUT name="WebPage2" value="Web Page 2" type="button" onclick="parent.topPage.ChangeContent()"/>
</P>
</FORM>
</body>
</html>
Changing The Focus Of A Child Window

• you can give any child window the focus by changing the focus after all the web pages have
loaded in their corresponding child windows.

parent.bottomPage.focus();
Writing to a Child Window from a JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Create a Frame</title>
<script language="Javascript" type="text/javascript">
function ChangeContent() {
window.topPage.document.open()
window.topPage.document.writeln('<html>')
window.topPage.document.writeln('<head>')
window.topPage.document.writeln('</head>')
window.topPage.document.writeln('<body>')
window.topPage.document.writeln('<form action="" method="">')
window.topPage.document.writeln('<input name="WebPage3" value="Click Me" type="button" /></br></br>')
window.topPage.document.writeln('<input name="text1" value="Top Page" type="text“
style="background-color:red"/>')
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="WebPage1.html" name="topPage" />
<frame src="WebPage2.html" name="bottomPage" />
</frameset>
</html>
ROLLOVERS
• Rollover means a webpage changes when the user moves his or her mouse
over an object on the page.
• An object can be an image, text, or any element of a form.
• It is often used in advertising
• we shall learn how to create the rollover effect in JavaScript.

• To create rollover use <onmousover> and <onmousout>


Example image Rollover
<!DOCTYPE html>
<html >
<head>
<title>Rollover Image</title>
</head>
<body>
<a><img height="92" src="rose1.jpg" width="70“ onmouseover="src='rose2.jpg’ onmouseout="src='rose1.jpg'">
</a>
</body>
</html>
Text Rollover Example
<html>
<head>
<title>Text Rollover Effect</title>
</head>
<body><center>
<a><img src="javascript.jpg" name="cover" height="400" width="400"></a><br>
<a onmouseover="document.cover.src='javascript.jpg';this.style.color='red'"
onmouseout="this.style.color='blue'"><h1>JavaScript</h1></a>
<a onmouseover="document.cover.src='datastructure.jpg';this.style.color='red'"
onmouseout="this.style.color='blue'"><h1>Data Structure Using C</h1></a>
<a onmouseover="document.cover.src='java.jpg';this.style.color='red'"
onmouseout="this.style.color='blue'"><h1>Java Programming</h1></a>
</center>
</body>
</html>
Multiple Actions for a Rollover
✓ you want more than one action to occur in response to an onmouseover event.
✓ Let's suppose a visitor rolls the cursor over a book title, instead of simply changing the image
to reflect the cover of the book, you could also display an advertisement for the book in a new
window, encouraging the visitor to purchase the book.
<html>
<head>
<title>Open Window</title>
<script language="Javascript" type="text/javascript">
function OpenNewWindow(book) {
if (book== 1)
{
document.cover.src='javascript.jpg'
MyWindow = window.open('', 'myAdWin', 'height=150,width=300,left=400, top=400')
MyWindow.document.write('10% Discount for Java Scipt!')
}
if (book== 2)
{
document.cover.src='datastructure.jpg'
MyWindow = window.open('', 'myAdWin','height=150,width=300,left=400,top=500')
MyWindow.document.write('20% Discount for Data Structure Using C!')
}
if (book== 3)
{
document.cover.src='java.jpg'
MyWindow = window.open('', 'myAdWin','height=150,width=300,left=400,top=500')
MyWindow.document.write('15% Discount for Java Programming!')
}}
</script></head>
<body>
<br>
<a>
<img height="400" src="javascript.jpg" width="400" border="0" name="cover">
</a>
<a onmouseover="OpenNewWindow(1)" onmouseout="MyWindow.close()"><br>
<h2><U>Java Script</U></h2>
</a>
<a onmouseover="OpenNewWindow(2)" onmouseout="MyWindow.close()">
<h2><U>Data Structure Using C</U></h2>
</a>
<a onmouseover="OpenNewWindow(3)" onmouseout="MyWindow.close()">
<h2><U>Java Programming</U></h2>
</a>
</body>
</html>
More Efficient Rollovers
✓ HTML can be used to create rollovers , it can only performs simple actions. If you
wish to create more powerful rollovers, you need to use JavaScript. To create rollovers
in JavaScript, we need to create a JavaScript function.
✓ Example : In this example, we have create an array MyBooks to store the images of
three book covers. Next, we create a ShowCover(book) to display the book cover
images on the page. Finally, we call the ShowCover function using
the onmouseover event.
<html >
<head>
<script language="Javascript">
MyBooks=new Array('javascript.jpg','datastructure.jpg','java.jpg')
book=0
function ShowCover(book)
{
document.DisplayBook.src=MyBooks[book]
}
</script>
</head>
<body>
<P align="center">
<img src="javascript.jpg" name="DisplayBook"/><p>
<center>
<table border=0>
<tr>
<td align=center>
<a onmouseover="ShowCover(0)"><b>JavaScript</b></a><br>
<a onmouseover="ShowCover(1)"><b>Data Structure Using C</b></a><br>
<a onmouseover="ShowCover(2)"><b>Java Programming</b></a><br>
</td>
</tr>
</table></body></html>

You might also like