在一个显示产品列表的页面中单击某个产品的图片,弹出一个新窗口,以显示该产品的详细信息。
以下保存为online_books.htm
<html>
<head>
<title>Online Books</title>
<script language="Javascript" type="text/javascript">
var detailsWindow;
function showDetails(bookURL)
{
detailsWindow=window.open(bookURL,"bookDetails","width=400,height=350");
detailsWindow.focus();//若删除本行。则新打开的窗口在主窗口之后。
return false;
}
</script>
</head>
<body>
<h2 align=center>Online book Buyer</h2>
<p>
Click any of the images below for more details
</p>
<strong>Professional Active Server Page .Net</strong>
<br>
<img src="pro_asp.jpg" border="0" οnclick="return showDetails('pro_asp_details.htm')">
<br><br>
<strong>Beginning Dreamweaver MX 2004<strong>
<br>
<img src="beg_dreamweaver.jpg" border="0" οnclick="return showDetails('beg_dreamweaver_details.htm')">
</body>
</html>
以下为pro_asp_details.htm
<html>
<head>
<title>Professional ASP.NET 2.0</title>
</head>
<body>
<strong>Professional ASP.NET 2.0<strong>
<br>
Subjects
<br>
ASP
<br>
Internet
<br>
<HR color=#cc3333>
<p><strong>Book Overview</strong></p>
<p>
This is the book.
</p>
</body>
</html>
一下为beg_dreamweaver_details.htm
<html>
<head>
<title>Beginning Dreamweaver MX 2004</title>
</head>
<body>
<strong>Beginning Dreamweaver MX 2004</strong>
<br>
<strong>Subjects</strong>
Dreamweaver<br>
Internet<br>
Web Design<br>
XML and Script<br>
<HR color=#cc3333>
<p><strong>Book overview<strong></p>
<p>
This is the book
</p>
</body>
</html>