Slide 38

First page Back Continue Last page Image

iFrame Example

<!DOCTYPE html>
<html>
<head>
<title>iframe 1</title>
<script src="script02.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<iframe src="iframe01.html" id="icontent“ name="icontent">
</iframe>
<h1>Main Content Area</h1>
<h2>
<a href="page1.html">Link 1</a><br>
<a href="page2.html">Link 2</a><br>
<a href="page3.html">Link 3</a>
</h2>
</body>
</html>

window.onload = initLinks;
function initLinks() {
for (var i=0; i<document.links.length; i++) {
document.links[i].target = "icontent";
}
}

body {
background-color: #FFF;
}
iframe#icontent {
float: right;
border: 1px solid black;
width: 350px;
height: 300px;
margin-top: 100px;
}

<!DOCTYPE html>
<html>
<head> <title>Content iframe</title> </head>
<body> Please load a page </body>
</html>

This line instructs the linked pages to load in the iframe