Java Reference
In-Depth Information
Try It Out Opening New Windows
Let's look at the example mentioned earlier of a products page in which clicking a product brings up a
window listing the details of that product. In a shameless plug, you'll be using a couple of Wrox books
as examples — though with just two products on your page, it's not exactly the world's most extensive
online catalog.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chapter 8: Example 4</title>
<script type=”text/javascript”>
var detailsWindow;
function showDetails(bookURL)
{
detailsWindow = window.open(bookURL, “bookDetails”,
“width=400,height=350”);
detailsWindow.focus();
}
</script>
</head>
<body>
<h2>Online Book Buyer</h2>
<p>
Click any of the images below for more details
</p>
<h4>Professional Ajax</h4>
<p>
<img src=”pro_ajax.jpg” alt=”Professional Ajax, 2nd Edition” border=”0”
onclick=”showDetails('pro_ajax_details.htm')” />
</p>
<h4>Professional JavaScript for Web Developers</h4>
<p>
<img src=”pro_js.jpg” alt=”Professional JavaScript, 2nd Edition”
border=”0” onclick=”showDetails('pro_js_details.htm')” />
</p>
</body>
</html>
Save this page as ch08_examp4.htm. You'll also need to create two images and name them pro_ajax
.jpg and pro_js.jpg. Alternatively, you can fi nd these fi les in the code download.
Note that the window will not open if the user disabled JavaScript — effectively breaking your web
page. You can, however, get around this by surrounding the
<img/>
element with an
<a/>
element,
assigning the
href
attribute to the topic details page, and using the
<a/>
element's
onclick
event
handler to return
false
after launching the new window as follows:
<a href=”pro_ajax_details.htm”
onclick=”showDetails(this.href); return false;”>
<img src=”pro_ajax.jpg” alt=”Professional Ajax” />
</a>
