Ex No: 7 FRAMES AND EVENTS
Aim: To write a JavaScript program to display the specification of an object in another frame on mouseover event.
Algorithm
Step1: Create a folder “Ex7” to place all the HTML files and Image files.
Step2: Create three HTML file “index.html”, “obj.html” and “desc.html”.
Step3: Add JavaScript code in “obj.html” to implement mouse over event.
Step4: Use parent property and innerHTML property to show the description on “desc.html” page.
Source Code

index.html


<html>
<head>
<title>Frames and Events</title>
<style>
body
{
  background-color:#FEC896;
}
</style>
</head>
<frameset cols="25,75">
  <frame src="obj.html" name="obj_frame">
  <frame src="desc.html" name="desc_frame">
</frameset>
<noframes>
   	<i>error to display to those who cannot see frames</i>
</noframes>
</html>

obj.html


<html>
 <head>
  <title>Frames and Events</title>
  <style>
  header {
    text-align:center;
    height: 100px;
    background-color: Khaki ;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
  }
  footer {
    text-align:center;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    background-color: Khaki ;
    padding: 10px;
    border-radius: 10px;
  }
  section{
    height: 100px;
  }
  </style>
 </head>
 <body>
  <header>
   <h1>Object</h1>
  </header>
  <hr/>
  <section>
   <ul>
     <li onmouseout="cleartxt()" onMouseOver="mouseOver('eid')">getElementById</li>
     <li onmouseout="cleartxt()"  onMouseOver="mouseOver('ename')">getElementsByName</li>
     <li onmouseout="cleartxt()"  onMouseOver="mouseOver('etagname')">getElementsByTagName</li>
   </ul>
  </section>
  <footer>
    Developed by K Anbarasan
  </footer>
 </body>
 <script type="text/javascript">
 function mouseOver(elm)
 {  
  switch(elm)
  {
   case 'eid':
        val = "This is used to get element with given ID";
        break;
   case 'ename':
        val = "This is used to get all the elments with the given Name";
        break;
   case 'etagname':
        val = "This is used to get all the elements with the given HTML Tag Name";
        break;
  }
  parent.desc_frame.document.getElementById("desc").innerHTML = val;
 }
 function cleartxt()
 {
  parent.desc_frame.document.getElementById("desc").innerHTML = "";
 }
 </script>
</html>

desc.html


<html>
 <head>
  <title>Frames and Events</title>
  <style>
  header {
	text-align:center;
	height: 100px;
	background-color: Khaki ;
	padding: 10px;
	border-radius: 10px 10px 0px 0px;
  }
  footer {
	text-align:center;
	font-size: 12px;
	height: 50px;
	line-height: 50px;
	background-color: Khaki ;
	padding: 10px;
	border-radius: 10px;
  }
  section{
	height: 100px;
	padding: 10px;
	text-indent: 30px;
  }
  </style>
 </head>
 <body>
  <header>
	<h1>Description</h1>
  </header>
  <hr/>
  <section>
    <div id="desc">
    </div>
  </section>
  <footer>
	Developed by K Anbarasan
  </footer>
 </body>
</html>
Result: Thus JavaScript code is written to show description of an object on mouseover event in Frames.