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

index.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 onmouseover="mouseOver('eid')">getElementById</li>
        <li onmouseover="mouseOver('ename')">getElementsByName</li>
        <li onmouseover="mouseOver('etagname')">getElementsByTagName</li>
    </ul>
  </section>
  <iframe id="desc_frame" src="desc.html" width="600" height="400" >
  </iframe>
  <footer>
  Developed by K Anbarasan
  </footer>

  <script type="text/javascript">
  function mouseOver(elm)
  {  
  iFrame = document.getElementById('desc_frame');
  FrameDiv = iFrame.contentWindow.document.getElementsByTagName("div")[0]; 
  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;
  }
  FrameDiv.innerHTML = val;
  }

  </script>
  </body>
</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.